I have been searching for two days on how to fix this and have had no luck! First off, my page (sorry about the ads, I had to get a free host for now): http://www.angelfire.com/ex/etiquette/test/default.htm Second, my CSS: http://www.angelfire.com/ex/etiquette/test/sheet.css I CANNOT get that menu to center for the life of me. If anyone knows why, please tell me how and explain the changes! Thank you! (I just realized you'll have to copy and paste that CSS URL).
/* Navigation */ #navigation ul { width: 900px; margin: 0 auto; padding: 7px; text-align:center; } #navigation li { display:inline; list-style-type: none; margin: 0 auto; } #navigation a { border-right: 1px solid #A80810; font-weight: bold; text-decoration: none; color: #FFFFFF; padding: 7px 12px 7px 12px; }
I can't force a left margin because there are sections to the site that will have different links at the top. I suppose I could assign a different CSS but that seems to take away from the purpose of CSS, especially when I could have one file. Changing the #navigation li to remove float: left; and adding display: inline; made my links vertical instead of horizontal. Adding 7px of padding to #navigation li just added the padding. Adding text-align: center; to #navigation ul also did not do anything. Thanks for the suggestions, but are there any more?
Ah, I forgot to remove display: block;. This did adjust things, but on pages with other links at the top, it messes them up. Is there a way to just center it without using padding or a margin? Also, I'm using Firefox.
text-align:center is the best thing I can think of at this point without seeing a screenshot of the problem.
coolkid, Drop me a PM with the FTP details to your test page, and I'll give it a quick fix rather than trying to post solutions over here. I've just dealt with a similar case with the template I am coding right now, so I can give it a quick touch to fix yours, too.
I've been trying to solve a similar problem using CSS to create a horizontal menu with the UL tag. Although daltons solution seems to work in most browsers I'm beginning to wonder.... Is it really good programming to use a list which in all browsers is supposed to be vertical to create a horizontal menu? Shouldn't there be a better tag for this?
Once you wrap your head around it, you can build a nice horizontal list with CSS. But the float:left for me is easier than display:inline because I keep needing to add it more than once for some reason. My husband is very newbie with css (though not html) and insists on using spans to hold the links and they're automatically inline. But his site and his links are very very simple. I can do more styling if the anchors are sitting in an li, for me.
As long as that's not going to be a dropdown menu, centering it is easy. Set the UL to a fixed height; overflow:hidden; and text-align:center; set the LI's to display:inline, then on the anchors set the line-height equal to the fixed height, then overpad the anchors. The overflow:hidden will chop off the excess padding, and since it's all inline, text-align works on it. NOT a great technique if you have enough menu items to go to multiple lines though. ANOTHER method would be to use inline-block (and the -moz equivalents), though that has it's own issues. A few observations if you don't mind... #masthead unneeded #navigation DIV should be unneeded too, and instead assign the ID to the UL itself. H1 jumping straight to a H3? Non Semantic. That whole thing should probably be inside the h1. column_l and column_r - classes should describe what something is, not how it appears. <!-- #EndEditable --></div> - with PROPER indentation that type of nonsense commenting shouldn't even be needed. At the LEAST that row should line up with the one that opened it. </p> followed by a <br /> - that BR should probably go - either pad the bottom of the wrapping DIV, or margin the bottom of the paragraph. H2 followed by H4 - see above. Oh, and the footer content rarely constitutes a full paragraph, so I'd not bother with the paragraph to wrap the text when there's a perfectly good DIV already in place.