[Solved] Navigation w/ Background Images – Alignment Problem

[Anonymous]

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:

• 1
• 2
• 3
• 4

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

[dcp3450]

try using line-height instead.

[Anonymous]

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?

[dcp3450]

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.

[Anonymous]

Now it makes sense

Thanks!

[Author]

Posts