|
|
Posted by Jonathan N. Little on 10/24/06 17:57
Ben C wrote:
>> John wrote:
Your snipping is incorrectly quoted the message, I wrote this level not
John.
<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. 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. 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...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|