Forum Moderators: not2easy
The problem I'm having is that I have to add the
padding: 20px 20px 20px 40px;ul li a ul li a:hoverI think I'm missing an integral part here, but am not able to see it. I have seem similar posts on this forum - the first problem I had was that the hover image only displayed around the text, instead of the whole area, but that was solved by the padding.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Blah</title>
<style>
#navigation {
color: #fff;
}
#navigation ul {
background-color: #491d10;
height: 30px;
margin: 5px 0 5px 35px;
padding: 0;
}
#navigation ul li {
display: inline;
list-style-image: none;
height: 25px;
float: left;
padding-top: 4px;
background: transparent url(nav_off.gif) left center no-repeat;
}
#navigation ul li a {
padding: 20px 20px 20px 38px;
text-decoration: none;
height: 25px;
font-weight: bold;
font-size: 0.9em;
}
#navigation ul li a:hover {
padding: 20px 20px 20px 38px;
background: transparent url(nav_on.gif) left center no-repeat;
}
#navigation ul li a#current {
background: transparent url(nav_on.gif) left center no-repeat;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#" id="current" title="home">home</a></li>
<li><a href="menu.html" title="menu">menu</a></li>
<li><a href="about-us.html" title="about us">about us</a></li>
</ul>
</div><!-- /navigation -->
</body>
</html>
A different way of doing this is to allocate a background-image for each list, each image has three states (default, hover, active) stacked on top of one another.
CSS
#nav {
margin: 7px 0 7px 0;
padding: 0;
height: 23px;
list-style: none;
display: inline;
overflow: hidden;
width: 400px;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding: 23px 5px 0 0;
overflow: hidden;
height: 0px!important;
height /**/:23px; /* for IE5/Win only */
}
#nav a:hover {
background-position: 0 -23px;
border:0px solid #fff
}
#nav a:active, #nav a.selected {
background-position: 0 -46px;
}
#home a {
width: 88px;
background: url(home.gif) top left no-repeat;
}
#menu a {
width: 88px;
background: url(menu.gif) top left no-repeat;
}
#aboutus a {
width: 88px;
background: url(aboutus.gif) top left no-repeat;
}
HTML
<ul id="nav">
<li id="home"><a href="index.html" class="selected">Home</a></li>
<li id="menu"><a href="menu.html">Menu</a></li>
<li id="aboutus"><a href="about-us.html">About us</a></li>
</ul>
