SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Jackson, Mississippi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I center a Navigation Bar

    Hi,
    I'm working my way through the first edition of CSS: The Missing Manual and following all of the tutorials.

    I've built the horizontal navigation bar from an unordered list of links and have used it in a tutoring website that I'm currently developing, but I can't get the resulting navigation bar to center on the page. Does anyone know how I can do this? Obviously, the <div align="center"> doesn't do it.

    The code with the internal style sheet is copied here. I hope I've included enough for a diagnosis.

    Thanks,
    Gorillamo



    <style type="text/css">
    ul#competencyNav {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #999999;
    float: left;
    }

    #competencyNav li {
    float: left;
    width: 125px;
    }

    #competencyNav a {
    font: 12px Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 20px;
    text-decoration: none;
    color: #FFFFFF;
    text-transform: uppercase;
    border: 1px solid #999999;
    display: block;
    padding: 7px 5px 7px 5px;
    background-color: #000000;
    border-left: none;
    }

    #competencyNav a:hover {
    background: #FFFFFF;
    color: #000000;
    font-weight: bolder;
    }
    </style>
    </head>


    <body>
    <div align="center">
    <ul id="competencyNav">
    <li><a href="lc_langarts_g5c1objA.html">COMPETENCY 1</a></li>
    <li><a href="lc_langarts_g5c2objA.html">COMPETENCY 2</a></li>
    <li><a href="lc_langarts_g5c3objA.html">COMPETENCY 3</a></li>
    <li><a href="lc_langarts_g5c4objA.html">COMPETENCY 4</a></li>
    <li><a href="lc_langarts_g5c5objA.html">COMPETENCY 5</a></li>
    </ul>
    </div>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You can use this technique

    You have the HTML structure ready so just use that CSS . Basically you do a double relative shift (left:50&#37; and left:-50% to center it to the pixel
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    but I can't get the resulting navigation bar to center on the page. Does anyone know how I can do this?
    Hi Gorillamo, Welcome to SitePoint!

    You can also center widthless list items by using display:inline-block; for the list items and text-align:center; on the parent ul.

    Centered Inline-Block List Items
    Inline-Block with suckerfish dropdown (No support for FF2 - details explained in link)

    You have to use overflow:hidden; on the main wrapping div when using the Widthless Float & Relative Position method. Not a problem most of the time but if you can't set overflow:hidden; on the main wrapper for any reason you will get large horizontal scrollbars from the RP.

    Paul's article that Ryan linked to also covers the Inline-Block method at the end of the article. Inline-Block is widely supported these days and there is a workaround for IE6/7 so that has become my method of choice.

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Jackson, Mississippi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi RyanReese,
    Actually I found that link right after I posted. Guess I should have looked first! It wasn't a perfect solution for me but it does work. Thanks.

    And Rayzur,
    I'll take a look at what you suggested as well. Being new to CSS, every small step is an effort for me, but I like challenges.

    Thanks,
    Gorillamo

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Paul's article that Ryan linked to also covers the Inline-Block method at the end of the article. Inline-Block is widely supported these days and there is a workaround for IE6/7 so that has become my method of choice.
    Yup, i agree. I don't use floats anymore for lay out, except the occasional small stuff.

    Inline-Block gives less headache lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,761
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Yup, i agree. I don't use floats anymore for lay out, except the occasional small stuff.

    Inline-Block gives less headache lol
    It's a headache doing CCs for IE6/7 and another way for FF2..it's just too much hassle.

    Floats all the way
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Location
    Jackson, Mississippi
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur,
    I took a look at the Centered Inline-Block List Items page you set up as an example, and I was pleased to see that I could interpret the source code. Like I said, I'm new to CSS and it's like realizing that I can actually read AND understand a new language (which IS what it is for me!).

    What you showed me is so much simpler and far more straight-forward than what I got from the "float" method. I appreciate your sharing this with me.

    Gorillamo

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It's a headache doing CCs for IE6/7 and another way for FF2..it's just too much hassle.

    Floats all the way
    lol, CCs are less headache then float issues

    And FF2, well we've been on that road already
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


Bookmarks

Posting Permissions

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