[Solved] Centering the CSS Menu Horizontal

[TJINAK]

Hello Everyone,

After reading the forums and trying some of the suggestions I still can't get this menu to center.

Take a look here at what I'm doing please:

http://www.dev.ridesalaska.org/

I've seemed to get IE to play correctly with this:

Code: Select all

#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #ECECEC;
   width: 95%;
   margin: auto;

But it doesn't work with FireFox - and my client is using Firefox.

Please advise if possible.

TJ

[lollipop27]

why dont you tell the #menuwrapper: text-align: center?

[lollipop27]

no wrong, give the menuwrapper the width: 780px;

[kermit]

if that top menu is only going to be root level items (no dropdowns); then the absolute easiest thing to do is dump the complicated default menu styles and style your own from scratch; perhaps using minimal_template.tpl as the basis for your menu template... might end up with something like this :

Code: Select all

#topmenu{padding:.25em 0;text-align:center;width:100%}
#topmenu ul{list-style:none}
#topmenu ul li{display:inline;margin:0 .5em}
#topmenu a{padding:.25em .5em}
#topmenu a.current,#topmenu a.activeparent{font-weight:700}
#topmenu a:hover{text-decoration:none}

(note: i stripped the colors and what-not out of this working example)

[TJINAK]

After having a cup of coffee my brain woke back up and I remembered this little formula:

CSS Width = width + margins + padding

No need for a calculator here.  My page width is 800px.

Minor changes to my stylesheet:

Code: Select all

#menuwrapper { 
   width: 750px;
   margin: auto;
   padding: 0 0 0 50px;

Then a little padding for my top level links, (spreading out the fun!):

Code: Select all

#primary-nav a { 
   display: block; 
   margin: 0px; 
   padding: 5px 12px 0px 12px; 
   text-decoration: none; 
   font-weight: bold;
   color: #672614;

Note the 0 padding on the primary-nav a class becuase if I did add padding I could not get to the sub menus due to white space.

After reading Dan Cederholms "Bulletproof Web Design" things are maybe starting to sink in.

Now to read his other book and learn what I should have learned from the begging....simple, clean, html markup.

Thanks for reading.

TJ

[designhut]

Magic! Thx for posting!