Center Aligning Difficulties

[Antoniohawk]

Why won't my menu bar center align? http://www.graphics-forum.com/manicpyro

[MysteryMan]

Because there is no tag around the menu bar that tells it to center.

Love the style choice, it's very relaxing.

[Willy Duitt]

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)

#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; 
}

Also; I would change the name links since I believe links is a collection
(document.links) and is probably a reserved word and could cause
unexpected problems.

.....Willy

[mindlessLemming]

Re: Center Aligning Difficulties

Originally posted by Antoniohawk
Why won't my menu bar center align? http://www.graphics-forum.com/manicpyro

Hey man, nice site, very simple.

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

[Willy Duitt]

Re: Re: Center Aligning Difficulties

Originally posted by mindlessLemming
*edit: LOL Willy! I type too damn slow

I didn't bother to check my spelling!

.....Willy

[ronaldb66]

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.