www.webdeveloper.com
Results 1 to 7 of 7

Thread: Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

  1. #1
    Join Date
    May 2012
    Posts
    77

    Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

    I am attempting to place sprites in front of its corresponding anchor/link tag(s) however the sprite(s) are not appearing. I'm not sure what I am doing wrong but any help and explanation is appreciated. I have attached the sprites.gif. Thank You.

    HTML code:
    Code:
     
    <ul class="postmetadata clearfix">
    	<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a</li> |
    	<li><a class="email" href="#" title="email">E-mail</a></li> |
    	<li><a class="print" href="#" title="print">Print</a></li> | 
    	<li><a class="share" href="#" title="share">Share</a></li> |
    	<li><a class="large-type" href="#" title="large-type">Large type</a>  </li>
    				</ul>
    CSS code:
    Code:
    ul.postmetadata li{
    	list-style-type: none;
    	font-size: 12px; 
    }
    
    ul.postmetadata li a {
    	background: url('img/sprites.gif')top left;
    	background-repeat: no-repeat;
    	display: block;
    }
    
     li a.post-comment{
    	background-position: 0 -624px;
    	height: 12px;
    	width: 11px;
    }
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    A few corrections/additions:

    Code:
    ul.postmetadata li{
    	list-style-type: none;
    	font-size: 12px;
    }
    
    ul.postmetadata li a {
    	background-image: url(img/sprites.gif);
    	background-repeat: no-repeat;
    	padding-left: 16px;
    	height: 20px;
    	display: block;
    }
    
    li a.post-comment{
    	background-position: 0 -624px;
    }
    
    li a.email{
    	background-position: 0 -847px;
    }
    Code:
    <ul class="postmetadata clearfix">
    	<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
    	<li><a class="email" href="#" title="email">E-mail</a></li> |
    	<li><a class="print" href="#" title="print">Print</a></li> |
    	<li><a class="share" href="#" title="share">Share</a></li> |
    	<li><a class="large-type" href="#" title="large-type">Large type</a>  </li>
    </ul>
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    May 2012
    Posts
    77
    Hi bionoid,

    Thank you for your help. The sprites are still not appearing next to the corresponding links. I have since removed many of the sprites since I did not need all of them. The new sprite has been attached.

    I tried your revised code but unfortunately the sprites are still not showing. I am using HTML 5 Boiler Template starter template not sure if that has to do with the icons not appearing?

    Here is my current code in attempts to get this working. Any suggestions are welcome and appreciated. Thanks again!

    html code
    Code:
    <ul class="postmetadata clearfix">
    					<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
    					<li><a class="email" href="#" title="email">E-mail</a></li> |
    					<li><a class="print" href="#" title="print">Print</a></li> | 
    					<li><a class="share" href="#" title="share">Share</a></li> |
    					<li><a class="large-type" href="#" title="large-type">Large type</a></li>
    				</ul>
    css code
    Code:
    ul.postmetadata li{
    	list-style-type: none;
    	font-size: 12px; 
    }
    
    ul.postmetadata li a {
    	background: url("img/sprites.png") no-repeat top left;
    	padding-left: 16px;
    	padding-right: 5px;
    	text-decoration: none;
        color: #202020;
        font-size: 12px;
        font-family: sans-serif, Arial,"MS Trebuchet";
    }
    
    li a.post-comment{background-position: 0px 0px;
     				   width: 13px; height: 13px;			  
    } 
    
    li a.email{background-position: 0px -63px;
     				   width: 13px; height: 13px;
    }
    
    li a.print{background-position: 0px -126px;
     				   width: 13px; height: 13px;
    }
    
    li a.share{background-position: 0px -189px;
     				   width: 13px; height: 13px;
    }
    
    li a.large-type{background-position: 0px -252px;
     				   width: 13px; height: 13px;
    }
    Attached Images Attached Images

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    Assuming your image is in the right place, this code works in FF, IE and Chrome using the new sprite image:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>CSS Sprite</title>
    
    		<style type="text/css">
    
    			ul.postmetadata li{
    				list-style-type: none;
    				font-size: 12px;
    			}
    
    			ul.postmetadata li a {
    				background-image: url(img/sprites.png);
    				background-repeat: no-repeat;
    				padding-left: 16px;
    				padding-right: 5px;
    				text-decoration: none;
    				color: #202020;
    				font-size: 12px;
    				font-family: sans-serif,Arial,"MS Trebuchet";
    			}
    
    			li a.post-comment{
    				background-position: 0 0px;
    				/*width: 13px; height: 13px;*/
    			}
    
    			li a.email{
    				background-position: 0 -63px;
    				/*width: 13px; height: 13px;*/
    			}
    
    			li a.print{
    				background-position: 0 -126px;
    				/*width: 13px; height: 13px;*/
    			}
    
    			li a.share{
    				background-position: 0 -189px;
    				/*width: 13px; height: 13px;*/
    			}
    
    			li a.large-type{
    				background-position: 0 -252px;
    				/*width: 13px; height: 13px;*/
    			}
    
    		</style>
    
    	</head>
    	<body>
    
    		<ul class="postmetadata clearfix">
    			<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
    			<li><a class="email" href="#" title="email">E-mail</a></li> |
    			<li><a class="print" href="#" title="print">Print</a></li> |
    			<li><a class="share" href="#" title="share">Share</a></li> |
    			<li><a class="large-type" href="#" title="large-type">Large type</a></li>
    		</ul>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact

  5. #5
    Join Date
    May 2012
    Posts
    77
    You were right I was not locating the sprites.png correctly it works when i do ('../img/sprites.png').

    However only the first sprite icon is appearing next to all the links... how can place the sprite / link correspondingly ?

    Thanks.

  6. #6
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    Please go through the post I previously submitted #4, and compare the css styles to yours.
    I had the sprites being displaying correctly for each link.
    JavaScript: Learn | Validate | Compact

  7. #7
    Join Date
    May 2012
    Posts
    77
    IT IS WORKING PERFECTLY!!! Thanks for all your help Bionoid!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles