Horizontal menu centering

liunx

Guest
Hey guys,

I did a layout today (attached) and I have a horizontal menu. It works great in all browsers, but I'm having trouble centering it.

Thanks in advance for any help. :)Wrap the #nav:
<div id="centered"><div id="containermenu">
<ul id="nav">
...
</ul>
</div></div>

css:
#header h1 {
text-align: center;
border-bottom: solid 1px #000;
}
#nav {
list-style: none;
text-align: center;
padding-left: 8%;
}
#centered {text-align:center;}
#containermenu {margin:0 auto; width:90%; text-align:left;}

You may want to change the width in #containermenu to suit your needs.Thanks a lot, Fang. I had to change the padding percentages for different browsers using code IE doesn't understand, but in the end it all worked out. Thanks again! :)dang, that is awesome looking man!Originally posted by Neczy
dang, that is awesome looking man!

Thanks. I'll show you what it looks like when I'm done -- I'm adding some graphics and things to it. ;)Originally posted by Jona
It works great in all browsers, but I'm having trouble centering it.

Opera 7.23 does weird things with your right side Infobox. It creates a horizontal scrollbar and pushes the div way down below the content.

Mozilla 1.6 will cut off the text in the main content if you shrink the browser down. Even at 800 x 600 on my screen it will cut text off. Also the font in the nav links is way smaller in Mozilla than it is in IE or Opera.

It works good in IE, which is an odd thing for me. Usually mine work in Mozilla then I have to figure out how to make them work in IE.Thanks, Tom. I have made a great deal of modifications to it -- I figured out how to center the navigation menu without using the wrapped DIV's that Fang suggested. The reason the text was larger in Opera and IE, I believe, is because the first line, which is an XML declaration. I removed that and the size seemed to work properly. I haven't checked again, but last time I looked the reason the infobox dropped down below the content area instead of floating beside it was because of the table it contained, which had a width of 100% of the document instead of the containing DIV. I think I've fixed that too. I'll upload again or link to it once I've fixed all the bugs I could find. Thanks again!
 
Back
Top