2 replies [Last post]
silentslumber
silentslumber's picture
Offline
newbie
Canada
Last seen: 12 years 22 weeks ago
Canada
Timezone: GMT-5
Joined: 2010-01-26
Posts: 2
Points: 3

Hey Smile So I'm fairly good at simple CSS usually, but I've been trying to figure out this darn thing for school forever now...I've researched it on these forums, as well as other sites I've found, and I just can't seem to get it to work Sad

I'm trying to make a navigation menu using CSS Sprites, with each button having one normal state, a hover state, and a current/active page state. The hover and normal state are working fine, I just can't get the current/active state to work. The background image just will not seem to show up...

It's probably something really simple that I missed, but any help would be awesome. Thanks!!

CSS

*{
	padding:0;
	margin: 0;
 
}
 
html, body{
	background:#FF9;
	margin:10px auto;		
	text-align:center;	
}
 
 
#wrapper{
	text-align:left;	
	width: 800px;
	height:500px;
	border:1px solid #333;
	background:#fff;
	padding:0;
	margin:0px auto;
 
}
 
#masthead{
	padding:5px;
	background-color:#F90;
 
}
 
#nav{
	font:bold 16px/20px Arial, Helvetica, sans-serif;
	color:#000;
 
}
 
.clearfix:after{
	content:'bob';
	clear: both;
	visibility:hidden;
	height:0;
}
ul#menu li{
	padding:0;
	margin:10px;
	list-style:none;
	font:bold 16px/20px Arial, Helvetica, sans-serif;
	color:#000;
	border:1px solid #333;
	width:200px;
	height:20px;
 
}
ul#menu li a{
	display:block;
	text-align:center;
	background:#ccc url(csssprite.gif) no-repeat 0px -60px;
}
ul#menu li a:active,
ul#menu li a:hover{
	background:#ccc url(csssprite.gif) no-repeat 0px -30px !important;
 
}
 
body#home ul#menu li.home,
body#services ul#menu li.services,
body#products ul#menu li.products,
body#facilities ul#menu li.facilities,
body#contact ul#menu li.contact{
	background:#ccc url(csssprite.gif) no-repeat 0px 0px;
}
 
/*Link Styles*/
a:link{ 
	text-decoration:none; 
	color:#000;  
}
a:visited{ 
	text-decoration:none;
	color:#000;  
}
a:hover{ 
	color:#FFF; 
}
a:active{ 
	text-decoration:none; 
	color:#000; 
}

HTML

<!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>CSS Sprites</title>
<link href="menu_main.css" rel="stylesheet" type="text/css" />
</head>
 
<body id="home">
	  <div id="wrapper">
 
   	  <div id="masthead">
   	  <h1 align="right">Navigation Menu</h1>
          </div>
 
		<div class="clearfix" id="nav">
        	<ul id="menu">
            	<li class="home"><a href="index.html" title="mouseover text">Home</a></li>
                <li class="products"><a href="products.html" title="mouseover text">Products</a></li>
                <li class="facilities"><a href="facilities.html" title="mouseover text">Facilities</a></li>
                <li class="services"><a href="services.html" title="mouseover text">Services</a></li>
                <li class="contact"><a href="contact.html" title="mouseover text">Contact</a></li>
            </ul>
        </div>
 
</div>
</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You're trying to place the

You're trying to place the background on the li, where the anchor background covers it. Add the a to the following selectors:

body#home ul#menu li.home a,
body#services ul#menu li.services a,
body#products ul#menu li.products a,
body#facilities ul#menu li.facilities a,
body#contact ul#menu li.contact a {
background:#ccc url(csssprite.gif) no-repeat 0px 0px;
}

silentslumber
silentslumber's picture
Offline
newbie
Canada
Last seen: 12 years 22 weeks ago
Canada
Timezone: GMT-5
Joined: 2010-01-26
Posts: 2
Points: 3

Ahh, that's awesome!!

Ahh, that's awesome!! Thank-you so much! Smile