Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering text vertically over the buttons in my navbar.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25804
    BossChase
    Member

    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.

    #62419
    soap
    Participant

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

    There is left padding.

    Cheers

    #62422
    BossChase
    Member

    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?

    #62413
    BossChase
    Member

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

    Thanks for the reply though.

    #62448
    soap
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.