Block links in the navigation header - SOLVED

[fruitsdemer]

Essentially what I want to do with my navigation links in the header is that I want the background colour to change when you hover over them, I believe this is called a block effect. Basically, I want my links to look similar to this layout.

- Basic Account
- Firefox 2.0
- Theme: Mixit
- Journal being modified: fruitsdemerI'm trying to add modifications to a

Comments

[av8rmike]

Add a background-color: specifier to the #header-text ul.nav a:hover rule.

[fruitsdemer]

I tried that, but it doesn't give it the same effect as the example I showed. I also tried to increase the padding but that would cause the words to move to the left whenever you would hover over them.

[fruitsdemer]

I've added the following code to my layout in order to display the problem (you can view it on my livejournal).

#header-text ul.nav a:hover {background-color:#000000; color: #FFFFFF; padding-top: 8px; padding-bottom: 9px; padding-left: 8px; padding-right: 8px;}

The problem occurs once you increase the padding on the left and right. I think it might be because the words aren't spread out far enough? If that is the issue, how would I increase the space between each word?

[fruitsdemer]

Figured it out! I changed up the #header-text ul.nav a rule to the following:

#header-text ul.nav a {color: #000000; font-size: 1.4em; text-decoration: none; padding-top: 8px; padding-bottom: 9px; padding-left: 8px; padding-right: 8px;}

Thanks for your help!