Contest $1 for for the first person to turn this image into an image sprite

Discussion in 'Design Contests' started by IanT, Jun 2, 2011.

  1. #1
    $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
     
    IanT, Jun 2, 2011 IP
  2. SabTech

    SabTech Member

    Messages:
    892
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    35
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    Increase your prize to $20 and get some contestants. People Like you are a Shame to the WebMastering world!
     
    SabTech, Jun 2, 2011 IP
  3. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    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...
     
    IanT, Jun 2, 2011 IP
  4. SabTech

    SabTech Member

    Messages:
    892
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    35
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    Google it, [CSS Sprite Example], That will be enough to know how it works.
     
    SabTech, Jun 2, 2011 IP
  5. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #5
    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.
     
    IanT, Jun 2, 2011 IP
  6. SabTech

    SabTech Member

    Messages:
    892
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    35
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #6
    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!
     
    SabTech, Jun 2, 2011 IP
  7. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #7
    ok...back to the drawing board.... thanks for the tip... at least I know im not going crazy.
     
    IanT, Jun 2, 2011 IP
  8. IanT

    IanT Well-Known Member

    Messages:
    503
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    130
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #8
    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.
     
    IanT, Jun 2, 2011 IP
  9. helgaindra

    helgaindra Member

    Messages:
    226
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    33
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #9
    just $1?
    lol
     
    helgaindra, Jun 2, 2011 IP