Another table -> CSS convert :)

Trouble positioning text in UL

[marty3d]

Hi!

I've been browsing the forum for a couple of hours now, finding lots of input in my quest to dig deeper into CSS.

Anyhow, I've got stuck on a (probably) simple design. What I'm trying to accomplish is a replace of a single table containing a menu.

The problem is that I want the text for each <LI> should be vertically centered instead of left-top. The best result I've got is to use margin and padding. But then the background images which is used to draw the menu buttons follows the padding/margins :(

Any ideas/tips on text positioning?

CSS:
ul.menu {
margin: 0px;
padding: 0px;
border: 0px none;
list-style: none;
font: 10px Tahoma;
}
li.menu_top {
background: url(/images/menu_top.gif);
height: 27px;
}
li.menu_mid {
background: url(/images/menu_mid.gif) repeat-y;
height: 27px;
}

HTML:
<div>
<ul class="menu">
<li class="menu_top">Home</li>
<li class="menu_mid">Some other link</li>
</ul>
</div>

Thanks! And wow! this is a great forum!

/Martin

[benihana]

try adding

text-align:center;

to ul.menu

[marty3d]

Sorry, didn't work... The text aligned horizontally instead, keeping its top position, much like this:

________
text
________

What I'm trying to do here is this:

--------
text
--------

Thanks!
/Martin

[marty3d]

Trying to do the same with a combination och CSS/tables works like a charm...:

<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="middle" class="menu_top">Hem</td>
</tr>
<tr>
<td valign="middle" class="menu_mid">Webbutveckling</td>
</tr>
</table>
</div>

But surely there must be a way to ditch the table?

[pageoneresults]

Something like this maybe...

<div class="vam"> 
<ul class="menu"> 
<li class="menu_top">Home</li> 
<li class="menu_mid">Some other link</li> 
</ul> 
</div>

.vam{vertical-align:middle;}

Assign vertical alignment to the containing

<div>

for the

<ul>

.

[marty3d]

Nopes...didn't work neither :(

Any other ideas? Or is vertical positioning an impossible thing in CSS?

[drbrain]

.menu li { padding: 6px 0 1px 0; }

.menu_top, .menu_mid {
height: 20px; /* padding-top + height + padding-bottom = image height */
background: url(...)
}

.menu_mid {
background-repeat: repeat-y;
}

This will only work with fixed-width fonts, but it seems you'll want fixed-width fonts anyhow, since you're aligning to background images.

You may need to adjust the padding-top and padding-bottom to get the precise alignment you want.

[drbrain]

'vertical-align' [w3.org] only works on inline elements and elements with display: table-cell.

You could wrap it in a span and make sure the span fits properly inside the li, but that leaves you with ugly, bloated markup.

Careful use of padding is your best bet.

[Bonusbana]

CSS:
ul.menu {
margin: 0px;
padding: 0px;
border: 0px none;
list-style: none;
font: 10px Tahoma;
}
li.menu_top {
background: url(/images/menu_top.gif);
height: 27px;
line-height: 27px;
}
li.menu_mid {
background: url(/images/menu_mid.gif) repeat-y;
height: 27px;
line-height: 27px;
}

Setting a line height equal to the actual pixel height makes the text stay vertically centered. Actually, you dont need the height attribute if you use line-height, and you can also set a relative line-height, f.ex 2.7em. That way the list item will expand nicely when the user resizes the text.

[marty3d]

Thank you thank you thank you!

Bonusbana, your solution works like a charm!
How did you learn about line-height? I didn't know it existed, nor how to use it or when... Still I don't know the difference, but I'll be sure to look into it!

Ah...I wish CSS would be as straightforward as ASP...but you can't have everything, can you? :)

Thanks all again!

[createErrorMsg]

Setting a line height equal to the actual pixel height makes the text stay vertically centered.

Line-height also allows you to actually use that vertical-align property and actually have it DO something. It defaults to center (as we know from Bonusbana's post), but you can use top or bottom to adjust the text position with respect to, say, a background-image.

For instance, say you have a 20px high bg-image for a button with a text space cleared at the top. Set line-height to 20px and vertical-align to top and the text slots right in.

[marty3d]

Amazing! I knew this forum was a goldmine :)

Anyway, after the excellent solutions I got here to my simple menu problem, I went straight on to create rounded corners using css instead of tables. I don't know if there's a general solution to this, but I managed to find a few examples on the net. But it seems quite messy with four nested divs and large background images to create the framework... but that's another story!

Thanks alot to all of you! See you around!

/Martin