$1 for the first person to turn this into an image sprite with hover states. OR $2 if you comment on each element so I can learn from it and know how to do it on my own in the future. Payments sent via paypal I will want to see it in action before paying to ensure it is working I dont care if its video or watermarked before paying I just want to make sure it does what I want it to do. Image Sprite
Increase your prize to $20 and get some contestants. People Like you are a Shame to the WebMastering world!
lol sorry, I dont have a lot of extra cash right now... Im just trying to learn to make a sprite and all the tutorials dont go into length about how to do it. I feel like it would be different if you had to create the image, which is time consuming. All I need is the code to deploy it... Warm Regards...
already did that... but I cant get the image to display correctly. Hell Id give someone $2 just to get it to display correctly... <!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>SMF Menu Test</title> <link rel="stylesheet" href="style.css" /> </head> <body> <ul id="mainMenu"> <li><a href="#home" class="home">Home</a></li> <li><a href="#soap" class="soap">Soap</a></li> <li><a href="#candles" class="candles">Candles</a></li> <li><a href="#bath-body" class="bath-body">Bath/Body</a></li> <li><a href="#forum-tips" class="forum-tips">Forum-Tips</a></li> <li><a href="#faq" class="faq">FAQ</a></li> <li><a href="#links" class="links">Links</a></li> <li><a href="#forum" class="forum">Forum</a></li> </ul> </body> </html> Code (markup): * { margin: 0; padding: 0; } /* Reset stuff */ ul#mainMenu { width: 751px; margin: 250px auto; list-style: none; } ul#mainMenu li { display: inline; } ul#mainMenu li a { display: block; float: left; height: 34px; background-image: url ('http://www.smftutorials.com/testing/phpUpdate/images/mainMenu-sprite.png'); text-indent: -9999px; } ul#mainMenu li a.home { width: 91px; background-position: 0 0; } ul#mainMenu li a.soap { width: 65px; background-position: -91px 0; } ul#mainMenu li a.candles { width: 95px; background-position: -156px 0; } ul#mainMenu li a.bath-body { width: 140px; background-position: -251px 0; } ul#mainMenu li a.forum-tips { width: 129px; background-position: -391px 0; } ul#mainMenu li a.faq { width: 61px; background-position: -520px 0; } ul#mainMenu li a.links { width: 70px; background-position: -581px 0; } ul#mainMenu li a.forum { width: 100px; background-position: -651px 0; } ul#mainMenu li a.home:hover, ul#mainMenu li a.home:focus { background-position: 0 -56px; } ul#mainMenu li a.soap:hover, ul#mainMenu li a.soap:focus { background-position: -91px -56px; } ul#mainMenu li a.candles:hover, ul#mainMenu li a.candles:focus { background-position: -156px -56px; } ul#mainMenu li a.bath-body:hover, ul#mainMenu li a.bath-body:focus { background-position: -251px -56px; } ul#mainMenu li a.forum-tips:hover, ul#mainMenu li a.forum-tips:focus { background-position: -391px -56px; } ul#mainMenu li a.faq:hover, ul#mainMenu li a.faq:focus { background-position: -520px -56px; } ul#mainMenu li a.links:hover, ul#mainMenu li a.links:focus { background-position: -581px -56px; } ul#mainMenu li a.forum:hover, ul#mainMenu li a.forum:focus { background-position: -651px -56px; } a { outline: none; } Code (markup): I dont know what I am doing wrong.
you can't make a whole navbar work like that, it requires much more cuttings and codes. IF it's for a simple button u can, but for the whole navbar it requires more codes which is more tough!
nevermind I got it to work. and btw. it is possible to do with one image using the code above. apparently all i had to do was change the attribute from -56 to -33.5 and everything works fine now.