Jump to content

Sprite images not working??


gffects

Recommended Posts

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

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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 by gffects
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...