Page 1 of 1
[Solved] Centering the CSS Menu Horizontal
Posted: Wed Nov 07, 2007 1:24 am
by 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
Re: Centering the CSS Menu Horizontal
Posted: Wed Nov 07, 2007 1:28 am
by lollipop27
why dont you tell the #menuwrapper: text-align: center?
Re: Centering the CSS Menu Horizontal
Posted: Wed Nov 07, 2007 1:32 am
by lollipop27
no wrong, give the menuwrapper the width: 780px;
Re: Centering the CSS Menu Horizontal
Posted: Wed Nov 07, 2007 2:02 am
by 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}
Re: Centering the CSS Menu Horizontal
Posted: Wed Nov 07, 2007 2:49 am
by 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
Re: [Solved] Centering the CSS Menu Horizontal
Posted: Wed Nov 07, 2007 4:30 pm
by designhut
Magic! Thx for posting!
