Grow your CSS skills. Land your dream job.

Issues Centering Link On Header Nav Bar

  • # May 30, 2009 at 10:13 pm

    My website has a nav bar at the top of the page that spans horizontally 100% the width of the screen. I have buttons on the left-hand side (i.e. Home, About, Blog, Contact) and a Login button on the far-right hand-side of the screen. I am trying to center a particular button in the middle of the this nav bar (let’s call it "X"). I want it to look something like this:

    <–Home–About–Blog–Contact


    X


    Login–>

    I have successfully got button X to be centered, however, in doing so this button seems to affect the functionality of the other buttons on the nav bar in such a way that I can no longer rollover or click on any of the other nav bar links on the left or right-hand side.

    Here is my CSS for button X, maybe you can recommend a better way of accomplishing this centering, so that I do not lose the functionality of the other buttons.

    Code:
    #buttonX a {
    background: url(../images/x.png) no-repeat 0 50%;
    padding: 0 0 0 35px;
    text-decoration: none;
    }

    #buttonX {
    font-size: 1.3em;
    position: fixed;
    text-align: center;
    top: 0;
    width:100%;
    margin: 0 auto;
    list-style: none;
    line-height: 2em;
    height: 100%;
    }

    # May 31, 2009 at 6:31 pm

    It looks like you are stretching #buttonX over all of the other links… That could definitely "cover up" clickable links…

    I would use absolute positioning to make just the link stay in the middle… something like this:

    Code:
    #buttonX a {
    background: url(../images/x.png) no-repeat 0 50%;
    padding: 0 0 0 35px;
    text-decoration: none;
    width: 115px;
    position:absolute;
    top: 100px;
    left: 50%
    margin-left: -75px;
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".