Jump to content

CSS Buttons


podja

Recommended Posts

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>

Link to comment
https://forums.phpfreaks.com/topic/110902-css-buttons/
Share on other sites

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;

}

 

 

Link to comment
https://forums.phpfreaks.com/topic/110902-css-buttons/#findComment-569672
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.