Sprite images not working??

[gffects]

Hey guys this is a secondary pots to the previous one but highlight the problem with me trying to do the navigation with sprites.

 

ok heres the code:

 

html:

<div id="navigation">

<ul>

<li id="home" ><a href="#" title="Click to visit Hompage"><span>Home</span></a></li>

<li id="portfolio" ><a href="#" title="Click to visit Portfolio"><span>Portfolio</span></a></li>

<li id="contact" ><a href="#" title="Click to visit Contact"><span>Contact</span></a></li>

<li id="about"><a href="#" title="Click to visit About"><span>About</span></a></li>

<li id="testimonials"><a href="#" title="Click to visit Testimonials"><span>Testimonials</span></a></li>

<li id="services"><a href="#" title="Click to visit Services"><span>Services</span></a></li>

<li id="blog"><a href="#" title="Click to visit Blog"><span>Blog</span></a></li>

<li id="rss"><a href="#" title="Click to visit RSS"><span>RSS</span></a></li>

 

</ul></div>

 

and the css:

#navigation{width:1024px;height:50px;margin:0px;padding:0px;background-image:url(images/bg_navbar.gif);}

#navigation a{display:block;height:50px;}

#navigation a:hover{background-image:url(images/bg_navbar.gif);}

#navigation li{margin:0px;padding:0px;display:inline;list-style-type:none;height:50px;text-align:center;float:left;}

#home{width:109px;}

#home:hover{background-position:0px bottom;}

#portfolio{width:136;}

#portfolio:hover{background-position:109px bottom;}

#contact{width:132px;}

#contact:hover{background-position:-245px bottom;}

#about{width:124px;}

#about:hover{background-position:-377px bottom;}

#testimonials{width:174px;}

#testimonials:hover{background-position:-501px bottom;}

#services{width:134px;}

#services:hover{background-position:-675px bottom;}

#blog{width:109px;}

#blog:hover{background-position:-809px bottom;}

#rss{width:111px;}

#rss:hover{background-position:-918px bottom;}

span{display:none;}

 

this should work I followed an online tut to the exact letter but when I roll over it doesnt disply the right part of the sprite image not to mention its in the wrong place on the site aswell.

can anyone spot where I have gone wrong? thanks

[newseed]

You've set your background for the #navigation div but not for the individual link which is why there is not hover affect. You don't need to assign the image to the #navigation div.

 

Here is a good example of a sprite image with the default and hover affect:

 

Sample Image

 

Let's take your Home link for an example how you would code it:

 

HTML:

<li id="home" ><a href="#" title="Click to visit Hompage">Home</a></li>

 

CSS:

#home {width:109px; background-image:url(images/bg_navbar.gif);}

#home:hover{background-position:0px bottom;}

[gffects]

The tutorial I followed was using the whole navigation image to do it thats why there are no individual images.

navbar

this is the image I am using.

 

and the rollover does work its just not moving to the correct poistion of the image and sits in the wrong place during rollover.

 

but i can make the individual images aswell to c if it works but will take a bit of time.

Edited May 11, 2012 by gffects

[benjaminmorgan]

Well just find where it starts at the top, then add a width and height.

[gffects]

finaly managed it that was lot more difficult than the tus showed and that you guys explained. I went with what was said about doing it as individual buttons so had to redesign the whole thing again, then came the problems of slicing 1 pixl off and it goes wrong so that too a while but thanks thats it done on the navbar just need to do it for the rest of my buttons tommorow and the speed of the site will be much better thanks again