Sent by Zoe M. Gillenwater on 1 November 2004 15:03
Rick Pasotto wrote:
>On Sun, Oct 31, 2004 at 10:29:22PM +0000, Christian Heilmann wrote:
>
>
>>Robert Dumas wrote:
>>
>>
>>
>>>I'm creating the new version of my site and I'm trying to get the
>>>navigation centered. You can see a rough of the header and navigation
>>>at http://obnoxio.us/dumpbox/rdo/ (the stylesheet is "layout.css"). I
>>>want the navigation to be centered in the navigation bar, but I don't
>>>know how.
>>>
>>>Can someone help me with this?
>>>
>>>
>>>
>>You need to set a width to the navigation and then set its margin to 0
>>auto. For older IEs you also need to set the text-align of the
>>parent element to center. The auto margin will also mean that you'll
>>have to apply the background image to the parent element. The
>>easiest option is to add a DIV around the navigation UL and make the
>>changes to that one:
>>
>><div id="navigation">
>><ul.......>
>></div>
>>
>>and
>>
>>#navigation{
>> text-align:center;
>> background: transparent url(images/navbarbg.gif) repeat-x;
>>}
>>#navigation ul{
>> width:30em;
>> margin:0 auto;
>>}
>>
>>
>
>The problem with this is that you don't know what width to use.
>
Sure you do. You know how many links you have and how many characters
they use, so you can figure out roughly how many ems they all take up.
Then just add a couple ems on for good measure, and you should be fine.
>If the
>user resizes the font then the menu breaks terribly.
>
It shouldn't if it's set in ems. Ems means that the entire width
expands as the text gets larger, so everything still fits. Perhaps if
you size up to the extreme, but sizing up or down a few notches
shouldn't hurt. Just make sure your height isn't rigid. The height
ought to change with the text size too.
Zoe
--
Zoe M. Gillenwater
Design Specialist
Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
