Web Analytics Made Easy -
StatCounter Center Aligning Difficulties - CodingForum


No announcement yet.

Center Aligning Difficulties

  • Filter
  • Time
  • Show
Clear All
new posts

  • Center Aligning Difficulties

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

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

    Love the style choice, it's very relaxing.


    • #3
      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)
        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.



      • #4
        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.


        *edit: LOL Willy! I type too damn slow

        I take no responsibility for the above nonsense.

        Left Justified


        • #5
          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!



          • #6
            About ala?!!

            Guess where that menu bar is coming from...
            (Hint: ALA ).


            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.