Grow your CSS skills. Land your dream job.

Centering text vertically over the buttons in my navbar.

  • # August 18, 2009 at 8:07 pm

    Hello,

    Can someone help me get the text over my buttons centered over the button?

    html

    css

    Code:
    #nav {float: left; width: 100%; text-align: center; height:69px; background:url(/assets/images/navbg.png) repeat-x;}
    #nav ul {width: 880px; margin: 0 auto; list-style: none; height:34px; margin-top:17px;}
    #nav li {float: left; position: relative; width: 100px;}
    #nav a {display: block; width: 100px; color: #000000; background-color: #000000; background:url(/assets/images/button.png) 0 0 no-repeat; height:34px;}
    #nav a:hover {color: #ffffff; background:url(/assets/images/button.png) 0px -34px no-repeat;}
    #nav li ul {display: block; position: absolute; width: 100px; left: -999em;}
    #nav li:hover ul {top: 1.3em; left: 0;}
    #nav li li {display: block;}
    #nav li ul ul {margin: -1em 0 0 10em;}
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em;}
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto;}

    I can’t figure out why its not centering. You can look at it on my site a gamerunion.com
    Thanks so much for the help.

    # August 18, 2009 at 9:42 pm

    Just put a padding:0; on #nav ul.

    There is left padding.

    Cheers

    # August 19, 2009 at 3:27 am

    Thanks for the reply but it didn’t help.

    When I add padding 0 to nav ul nothing happens. When I add a number to like padding 20 it moves both the buttons and the text.

    I played around with padding and padding top and the best I got was adding padding top 15px to nav a. That moves the text on the button down but also messes up my rollover effect by showing 15px of the hover image when you are not hovering.

    Any more ideas?

    # August 19, 2009 at 10:31 am

    I figured it out. I had to subtract the amount of padding from the height.

    Thanks for the reply though.

    # August 20, 2009 at 3:14 am

    yep, always remember that padding adds to the width and height of an element.

    BTW:
    padding:0; on your ul in firebug fixed it. dunno why it didn’t work for you.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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