Why won't my menu bar center align? http://www.graphics-forum.com/manicpyro
Announcement
Collapse
No announcement yet.
Center Aligning Difficulties
Collapse
X
-
Center Aligning Difficulties
xhtml :: attributes . tags . <abbr> vs. <acronym> CSS :: Box Model Hack
[CF T-Shirts] [CP Resources] [ithium hosting] [A New Generation of Tree Menu]Tags: None
-
Hi Antonio;
It is aligned left because the links width is undefined
and you are foating the containing unordered list left.
Try these changes:
(you may need to play with the numbers)
Code:#links{ margin: 0 auto; padding: 0px; [color=red]width: 612px; text-align: center;[/color] } #links ul { border: none; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #links ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #links ul li a { background: #B2B2B2; width: [color=red]122px;[/color] height: 2em; border-top: 1px solid #808080; border-left: 1px solid #808080; border-bottom: 1px solid #808080; border-right: none; padding: 0; margin: 0 0 10px 0; color: #424242; text-decoration: none; display: block; text-align: center; line-height: 2em; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: x-small; }
(document.links) and is probably a reserved word and could cause
unexpected problems.
.....Willy
Comment
-
Re: Center Aligning Difficulties
Originally posted by Antoniohawk
Why won't my menu bar center align? http://www.graphics-forum.com/manicpyro
Q.First up, how does #links differ from #title and #content? (The other elements on which margin:0 auto; is effective).
A. The other div's have a fixed width. I added width:600px; to #links and it's all good. (sort of...you'll see)
My guess is that trying to give an element with an undetermined width margin:auto, which is nested inside another element without a fixed width (body/viewport) is either against W3C guidlines or causing the browser to bug out.
Another solution to giving all elements a determined width may be to assign a 100% width to the body tag. This is untested and may very well cause other problems, especially regarding accessibility.
Andrew.
*edit: LOL Willy! I type too damn slow
I take no responsibility for the above nonsense.
Left Justified
Comment
-
About ala?!!
Guess where that menu bar is coming from...
(Hint: ALA ).
Update:
while you're borrowing from the best anyway: ala uses a wrapper div around the whole page which has a set width and margin-left and -right: auto, which centers every box inside the wrapper nicely.Last edited by ronaldb66; Feb 18, 2004, 09:04 AM.
Comment
Comment