Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why won't my ul menu center?

    Ok. I've looked at every item on the first 5+ pages of Google to find an answer and I'm more confused than when I started. My CSS standard, I would say, marginally better than Beginner. So I'd like a solution I can cut 'n paste to get my centering to work.

    Here's my HTML Code

    <div id="menu">
    <ul>
    <li><strong><a href="index.php">Home </a></strong></li>
    <li><strong><a href="page2.php">Page 2</a></strong></li>
    <li><strong><a href="page3.php">Page 3</a></strong></li>
    <li><strong><a href="page4.php">Page 4</a></strong></li>
    <li><strong><a href="page5.php">Page 5</a></strong></li>
    <li><strong><a href="page6.php">Page 6</a></strong></li>
    <li><strong><a href="news.php">News </a></strong></li>
    <li><strong><a href="contact-us.php">Contact Us</a></strong></li>
    </ul>
    </div>

    and here is my CSS Code

    #menu {
    width: 850px;
    height: 30px;
    margin: 0 auto;
    background: #37AEF2;
    }

    #menu ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    }

    #menu li {
    display: inline;
    list-style: none;
    }

    #menu a {
    width: auto;
    display: block;
    float: left;
    height: 32px;
    padding: 8px 10px 0 10px;
    text-decoration: none;
    color: #ffffff;
    }

    #menu a:hover, #menu .active a {
    background: url(images/img3.gif);
    color: #ffffff;
    }

    Why doesn't my UL Menu center on the page?
    Last edited by stub; 06-18-2009 at 07:37 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    #menu ul {
    /*display: inline;*/
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    }
    Edit: Oh.. I missed the float applied on the anchors, In that case you'd need to use some techiniques like one given at http://matthewjamestaylor.com/blog/b...rowser-support
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That reference to mathewjamestaylor.com worked with a little tweaking. Thank you very much.
    Last edited by stub; 06-18-2009 at 10:11 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Put your menu inside content div, like
    Code:
    <div id="content">
    <div id="menu">
    <ul>
    <li><strong><a href="index.php">Home </a></strong></li>
    <li><strong><a href="page2.php">Page 2</a></strong></li>
    <li><strong><a href="page3.php">Page 3</a></strong></li>
    <li><strong><a href="page4.php">Page 4</a></strong></li>
    <li><strong><a href="page5.php">Page 5</a></strong></li>
    <li><strong><a href="page6.php">Page 6</a></strong></li>
    <li><strong><a href="news.php">News  </a></strong></li>
    <li><strong><a href="contact-us.php">Contact Us</a></strong></li>
    </ul>
    </div>
    .......
    PS: If you just need to get the anchors in your menu in bold, you could use font-weight:bold; to remove all those <strong> tags.
    Last edited by abduraooft; 06-18-2009 at 10:09 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK. I took out the strong tags. Thanks. I didn't try your other solution because I already got my ul menu centered using the suggestion at mathewjamestaylor.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •