Grow your CSS skills. Land your dream job.

[Solved] Navigation w/ Background Images – Alignment Problem

  • # July 20, 2010 at 10:04 am

    Hi,
    can anyone help me with my little problem?
    I’m trying to create a navigation with images as backgrounds for the <li> elements and text as the actual link (so i only need one image for all the buttons no matter what the button will link to) to declare the width and height i used display: block; on the <li> elements but now i can’t use vertical-align: middle; on the link (text-align:center works).

    HTML:

    Code:

    CSS:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-size: 62.5%;
    font-family: georgia, sans-serif ;
    background: #b5b5b5;
    }

    ul {
    list-style: none;
    }

    #wrapper {
    margin: 0 auto;
    margin-top: 30px;
    width: 798px;
    }

    #header {
    height: 133px;
    background: url(../layout/header.png) no-repeat;
    }

    #content {
    background: url(../layout/content.png) repeat-y;
    }

    #footer {
    height: 30px;
    background: url(../layout/footer.png) no-repeat;
    }

    #navigation {
    float: right;
    width: 424px;
    height: 35px;
    margin-top: 59px;
    margin-right: 12px;
    }

    #navigation ul li{
    display: block;
    float: left;
    width: 106px;
    height: 35px;
    background: url(../layout/nav_buttons.png) bottom center no-repeat;
    }
    #navigation ul li#active{
    background: url(../layout/nav_buttons.png) top center no-repeat;
    }
    #navigation ul li:hover {
    background: url(../layout/nav_buttons.png) center center no-repeat;
    }
    #navigation ul li a {
    display: inline;
    text-align: center;
    vertical-align: middle; /* this one doesn’t work*/
    }

    It would be awesome if someone could help me

    # July 20, 2010 at 10:12 am

    try using line-height instead.

    # July 20, 2010 at 10:21 am

    It works! Thanks for the fast reply!

    But just because I’m interested, why doesn’t it work with vertical-align and is there a way around that?

    # July 20, 2010 at 10:26 am

    vertical-align sets how an image is displayed when part of text not as a background. If you were doing this:

    Text text text text <img> text text text.

    then you use vertical-align to tell the image how to set within the text. vertical-align: center would cause the image to sit so the text lies to the center of the image. Since you were using the image as a background there was no image to align to.

    # July 20, 2010 at 10:46 am

    Now it makes sense ;)

    Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".