CSS Buttons

[podja]

Hi,

 

I am working on a photography portfolio for a friend and have made the simple layout.

 

http://sam.jackday.co.uk/

 

When you rollover the CSS buttons on the bottom left, only the text background changes and not the whole button. How can I change this so the whole button changes colour and not just the text?

 

Here's the relevant CSS code:

#container ul#nav {
float: left;
width: 120px;
padding: 0px;
text-align: right;
margin-top: 420px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#container ul li {
background-color: #38322C;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
width: 100px;
margin-top: 10px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
}

	#container ul li a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
text-transform: lowercase;
padding: 10px;
	}

	#container ul li a:hover {
background-color: #003366;
width: 100px;
	}

 

and the HTML code if needed:

<ul id="nav">
	<li><a href="#">News</a></li>
	<li><a href="#">About Me</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>
</ul>

[haku]

It should be

 

#container ul a:hover #container li
{
   background-color: #abcdef;
}

 

Although this won't work in IE6, as :hover only works on 'a' elements in IE6. If you want the background to change in that browser, you will need to use a javascript solution.

[TheFilmGod]

You have to make the "a" element a block element. Display: block;. This should work in IE6 too.

 

Like so: - edit as needed

 

#container ul li a {

        display: block;

        width: 100px;

        height: something px;

color: #FFFFFF;

text-decoration: none;

font-weight: bold;

text-transform: lowercase;

padding: 10px;

}

 

#container ul li a:hover {

background-color: #003366;

}

 

 

[haku]

Heh, leave it to me to do it the difficult way. The film god's method will be easier and more cross-browser friendly.