...

View Full Version : Resolved css sprite not working!?



student101
06-29-2010, 07:47 AM
Every attempt I've tried just doesn't work :(
How do I get this sprite to work?
Is the attached image correct or too much?

MENU:


<ul id="nav">
<li id="nav_home"><a href="index.php">Home</a></li>
<li id="nav_about"><a href="about.php">About</a></li>
<li id="nav_gallery"><a href="gallery.php">Gallery</a></li>
<li id="nav_services"><a href="services.php">Services</a></li>
<li id="nav_contact"><a href="contact.php">Contact</a></li>
</ul>
CSS:


/* Default */
#nav {
width: 150px;
height: 125px;
position: relative;
background: url(../img/sprite.png);
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 25px;
background: url(../img/sprite.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}
/*up state*/
li#nav_home a {
left: 0;
width: 150px;
background-position: 0 0;
}
li#nav_about a {
top: 25px;
width: 150px;
background-position: 150px 50px;
}
li#nav_gallery a {
top: 50px;
width: 150px;
background-position: 150px 100px;
}
li#nav_services a {
top: 75px;
width: 150px;
background-position: 150px 125px;
}
li#nav_contact a {
top: 125px;
width: 150px;
background-position: 150px 0;
}
/*hover state*/
li#nav_home a:hover {
background-position: 300px 0;
}
li#nav_about a:hover {
background-position: 300px 0;
}
li#nav_gallery a:hover {
background-position: 450px 0;
}
li#nav_services a:hover {
background-position: 435px 0;
}
li#nav_contact a:hover {
background-position: 580px 0;
}
/*current state*/
#body_home li#nav_home a {
background-position: 0 -300px;
}
#body_about li#nav_about a {
background-position: -150px -300px;
}
#body_gallery li#nav_gallery a {
background-position: -290px -300px;
}
#body_services li#nav_services a {
background-position: -290px -300px;
}
#body_contact li#nav_contact a {
background-position: -290px -300px;
}

student101
06-29-2010, 09:56 AM
Can't delete post;
Solved!
Less code, less image AND more thinking!

I have absolutely NO CLUE how I coded this!


<style type="text/css">
img {
border: 0px none;
}
a{
outline: none;
}
#menu a {
width:150px;
margin: 0em;
padding:0px;
font: bold 14px/1 sans-serif;
color:#c60;
background: url("images/autogen/newsprite.png") 0 0 no-repeat;
text-decoration: none;
height: auto;
text-align: center;
display: block;
}
#menu a:hover {
background-position: -304px 0;
color: #E9BE75;
}
#menu a:active {
background-position: -304px 0;
color:white;
}
#menu .current {
background-position: -456px 0;
color:white;
}
#menu a:hover.current {
background-position: -151.5px 0;
color:white;
}
#menu a span {
font: normal 14px/24px tahoma, verdana, arial, helvetica, sans-serif;
color: #313C29;
margin: 0px;
padding: 0px;
}
</style>

<div id="menu">
<a href="home.php"><span>Home</span></a>
<a href="about.php" class="current"><span>About Us</span></a>
<a href=""><span>Service</span></a>
<a href=""><span>Location</span></a>
<a href=""><span>Contact Us</span></a>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum