- This topic is empty.
-
AuthorPosts
-
August 18, 2009 at 8:07 pm #25804BossChaseMember
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 #62419soapParticipantJust put a padding:0; on #nav ul.
There is left padding.
Cheers
August 19, 2009 at 3:27 am #62422BossChaseMemberThanks 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 #62413BossChaseMemberI 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 #62448soapParticipantyep, 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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.