|
|
Posted by Ben C on 10/24/06 18:20
On 2006-10-24, Jonathan N. Little <lws4art@centralva.net> wrote:
> Ben C wrote:
>>> John wrote:
>
> Your snipping is incorrectly quoted the message, I wrote this level not
> John.
Sorry.
><snip>
>>> To prove it can be done with valid markup:
>>
>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>>> "http://www.w3.org/TR/html4/strict.dtd">
>>> <html>
>>> <head>
>>>
>>> <title>Valid Template</title>
>>>
>>> <style type="text/css">
>>> #navbar { text-align: center; font: 80% sans-serif; }
>>> #navbar UL { list-style: none; margin: 0; padding: 0; }
>>> #navbar LI { margin: 0 .05em; padding: 0; display: inline;
>>> line-height: 2 }
>>> #navbar A { text-decoration: none; padding: .2em 1em; border: 1px
>>> solid #aaf; }
>>> #navbar A:link, #navbar A:visited { color: #fff; background-color:
>>> #50c; }
>>> #navbar A:hover, #navbar A:active { color: #50c; background-color:
>>> #fff; }
>>> </style>
>> [snip]
>>
>> Yes, that works too, and is a more natural way of doing it. But the OP
>> had his <li>s floating, which means he has control over a few more
>> things-- he can set width on them for example, which you can't do on an
>> inline box.
>>
>> text-align: center doesn't centre the floats (as of course it shouldn't)
>> hence the idea of making the <ul> a shrink-to-fit centered block box.
>
> That's why I did float the LI's.
You mean "didn't".
> The problem is that the UL element
> expands to 100% width so your cannot center by setting the left and
> right margins to auto as with other blocks. To make it work you have to
> set an absolute width on the UL. Best to use 'em' so it scale with the
> font, but the design will break if you add another menus item...
> You could set the UL to "display: table" but that leaves IE out of the
> picture.
I thought the OP said it worked in IE?
> My advice is to make a "design decision" and go with the variable
> width menu items and maintain the flexibility of the menu items or
> forgo the need for the "centered" menu...
Sound advice.
[Back to original message]
|