mistados Posted July 19, 2011 Share Posted July 19, 2011 Ok, before attempting this with list items im trying it with just one. Ive had a go myself after reading the chapter on CSS sprites and this is the code i tried:Heres the CSS <!DOCTYPE HTML><html><head><title>Page Title</title><style type="text/css">#button { display: {position:relative;} width: 263px; height: 42px; background: url("http://www.proaudioheadz.com/wp-content/uploads/2011/07/music_production.png"); } #button:hover { background-position: 0 -42px; }</style></head><body> <a id="button" title="Music Production" href="music-production.htm"></a> </body></html> and heres the HTML: <a href="http://www.proaudioheadz.com"><img src="http://www.proaudioheadz.com/wp-content/uploads/2011/07/music_production.png" alt="" title="music_production" width="263" height="84" img class="button" ... /></a> The whole image is being loaded rather than just the top half, can anyone see where im going wrong? Link to comment Share on other sites More sharing options...
ste Posted July 19, 2011 Share Posted July 19, 2011 You cannot use the html img element for CSS sprites.Change your HTML from: <a href="http://www.proaudioheadz.com"><img src="http://www.proaudioheadz.com/wp-content/uploads/2011/07/music_production.png" alt="" title="music_production" width="263" height="84" img class="button" ... /></a> To this: <a href="http://www.proaudioheadz.com" class="button"></a> There are also several errors in your CSS. You were using an ID (#button) when you need to refer to a class (.button)Also, you need to use display:block in order to assign a width and height to a link change it to this .button {display: block;width: 263px;height: 42px;background: url("http://www.proaudioheadz.com/wp-content/uploads/2011/07/music_production.png");}.button:hover {background-position: 0 -42px;} Link to comment Share on other sites More sharing options...
mistados Posted July 19, 2011 Author Share Posted July 19, 2011 Thanks for your reply ste,I made the adjustments but the image has vanished from my page altogether now..why would it have done that? Link to comment Share on other sites More sharing options...
ste Posted July 19, 2011 Share Posted July 19, 2011 Thanks for your reply ste,I made the adjustments but the image has vanished from my page altogether now..why would it have done that?It's difficult to say without seeing your code, can you post it? I have uploaded a little demo of a working example of this: http://jsfiddle.net/9v7gN/1/ Link to comment Share on other sites More sharing options...
mistados Posted July 19, 2011 Author Share Posted July 19, 2011 Nice, thats the effect i was after, here is my code:HTML: <a href="http://www.proaudioheadz.com" class="button"></a> CSS <!DOCTYPE HTML><html><head><title>Page Title</title><style type="text/css">.button {display: block;width: 263px;height: 42px;background: url("http://www.proaudioheadz.com/wp-content/uploads/2011/07/music_production.png");}.button:hover {background-position: 0 -42px;} Link to comment Share on other sites More sharing options...
ste Posted July 19, 2011 Share Posted July 19, 2011 The code you posted should be fine now. If you are still having trouble, make sure the CSS is included on the page where you have the link or it is included in an external stylesheet. As the code is correct the only reason I can imagine it is not working is if the CSS is not being loaded. This should definitely work <!DOCTYPE HTML><html><head><title>Page Title</title><style type="text/css">.button {display: block;width: 263px;height: 42px;background: url("http://www.proaudioheadz.com/wp-content/uploads/2011/07/music_production.png");}.button:hover {background-position: 0 -42px;}</style></head><body><a href="http://www.proaudioheadz.com" class="button"></a></body></html> Link to comment Share on other sites More sharing options...
mistados Posted July 20, 2011 Author Share Posted July 20, 2011 The problem was this: <!DOCTYPE HTML><html><head><title>Page Title</title><style type="text/css"> When i removed this code from the CSS file the code you gave meworked fine.. Link to comment Share on other sites More sharing options...
ste Posted July 20, 2011 Share Posted July 20, 2011 You only need that if you are including the CSS within your html document. Which is what I thought you were doing Link to comment Share on other sites More sharing options...
mistados Posted July 20, 2011 Author Share Posted July 20, 2011 Sorry for the confusion, thanks a lot for your help my friend.. Link to comment Share on other sites More sharing options...
ste Posted July 20, 2011 Share Posted July 20, 2011 Glad to help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.