CSS Sprites Help

[BlaZe]

Alright, so I'm new in CSS. I was trying to reduce the number of HTTP Requests on RapidScene.ws by minimizing all the icons to CSS sprites and load them via one image. Currently I'm trying this out on the category icons.

This is the CSS which I made with the help of tutorials.

style.css

/* CSS Sprites By BlaZe */

/* Key to #nav classes
li.soft = Software
li.game = Games
li.mov = Movies
li.mus = Music
li.tv = TV Shows
li.gfx = Graphics
li.eb = eBooks
li.temp = Templates
li.script = Scripts
li.ps = Photoshop Resources
li.tut = Tutorials
li.xxx = Adult */

#cat li.soft,
#cat li.game,
#cat li.mov,
#cat li.mus,
#cat li.tv,
#cat li.gfx,
#cat li.eb,
#cat li.temp,
#cat li.script,
#cat li.ps,
#cat li.tut,
#cat li.xxx{
background:url('/custom/icon_sprites.png') no-repeat;
padding:0 0 0 19px;
}

/* Positioning */
li.soft {
background-position:0 0px;
padding-top:2px;
}
li.game {
background-position:0 -17px;
padding-top:2px;
}
li.mov {
background-position:0 -34px;
padding-top:2px;
}
li.mus {
background-position:0 -51px;
padding-top:2px;
}
li.tv {
background-position:0 -68px;
padding-top:2px;
}
li.gfx{
background-position:0 -85px;
padding-top:2px;
}
li.eb {
background-position:0 -102px;
padding-top:2px;
}
li.temp {
background-position:0 -119px;
padding-top:2px;
}
li.script {
background-position:0 -136px;
padding-top:2px;
}
li.ps {
background-position:0 -153px;
padding-top:2px;
}
li.tut {
background-position:0 -170px;
padding-top:2px;
}
li.xxx {
background-position:0 -187px;
padding-top:2px;
}

/* Again (litewarez tutorial) */

.sprite{background:url('/custom/icon_sprites.png');}
.icon{width:16px;}

.soft{height:17px; background-position:-0px -0px; padding-left:18px;}
.game{height:17px; background-position:-0px -17px; padding-left:18px;}
.mov{height:17px; background-position:-0px -34px;}
.mus{height:17px; background-position:-0px -51px;}
.tv{height:17px; background-position:-0px -68px;}
.gfx{height:17px; background-position:-0px -85px;}
.eb{height:17px; background-position:-0px -102px;}
.temp{height:17px; background-position:-0px -119px;}
.script{height:17px; background-position:-0px -136px;}
.ps{height:17px; background-position:-0px -153px;}
.tut{height:17px; background-position:-0px -170px;}
.xxx{height:17px; background-position:-0px -187px;} 

Displaying them :

<div class="sprite icon soft" /><a href="/softwares">Softwares</a></div>
<div class="sprite icon game" /><a href="/games">Games</a></div> 

Output :


So how do I fix it ?

BlaZe Reviewed by BlaZe on 16th Feb 2011. CSS Sprites Help Alright, so I'm new in CSS. I was trying to reduce the number of HTTP Requests on RapidScene.ws by minimizing all the icons to CSS sprites and load them via one image. Currently I'm trying this out on the category icons. This is the CSS which I made with the help of tutorials. style.css /* CSS Sprites By BlaZe */ /* Key to #nav classes li.soft = Software li.game = Games Rating: 5

[FancyPants]

margin-right?

[BlaZe]

@edavreda,

Show me an example please ? I'm new to CSS :\

[ajinkya9]

Do this

/* Again (litewarez tutorial) */

.sprite{background:url('/custom/icon_sprites.png') no-repeat;}

Just add the no-repeat

[BlaZe]

Thanks ajinkya9

===========

I added no-repeat and this is what I'm getting



style.css

/* CSS Sprites By BlaZe */

/* Key to #nav classes
li.soft = Software
li.game = Games
li.mov = Movies
li.mus = Music
li.tv = TV Shows
li.gfx = Graphics
li.eb = eBooks
li.temp = Templates
li.script = Scripts
li.ps = Photoshop Resources
li.tut = Tutorials
li.xxx = Adult */

.sprite{background:url('/custom/icon_sprites.png') no-repeat;}
.icon{width:16px;}

.soft{height:17px; background-position:-0px -0px; padding-left:18px;}
.game{height:17px; background-position:-0px -17px; padding-left:18px;}
.mov{height:17px; background-position:-0px -34px; padding-left:18px;}
.mus{height:17px; background-position:-0px -51px; padding-left:18px;}
.tv{height:17px; background-position:-0px -68px; padding-left:18px;}
.gfx{height:17px; background-position:-0px -85px; padding-left:18px;}
.eb{height:17px; background-position:-0px -102px; padding-left:18px;}
.temp{height:17px; background-position:-0px -119px; padding-left:18px;}
.script{height:17px; background-position:-0px -136px; padding-left:18px;}
.ps{height:17px; background-position:-0px -153px; padding-left:18px;}
.tut{height:17px; background-position:-0px -170px; padding-left:18px;}
.xxx{height:17px; background-position:-0px -187px; padding-left:18px;} 

On main page

<div class="sprite icon soft" /><a href="/softwares" title="Download Windows & Macintosh Applications"/>Softwares</a></div>
                                <div class="sprite icon game" /><a href="/games" title="Download PC, Console & ROM Games"/>Games</a></div>
                                <div class="sprite icon mov" /><a href="/movies" title="Download Latest Movies XViD, DVDR, CAM"/>Movies</a></div>
                                <div class="sprite icon mus" /><a href="/music" title="Download Music, Videos & Albums"/>Music</a></div>
                                <div class="sprite icon tv" /><a href="/tv-shows" title="Download Latest TV Show Seasons"/>TV Shows</a></div>
                                <div class="sprite icon gfx" /><a href="/graphics" title="Download Graphic Resources"/>Graphics</a></div>
                                <div class="sprite icon eb" /><a href="/ebooks" title="Download eBooks, Guides & Tutorials"/>eBooks</a></div>
                                <div class="sprite icon temp" /><a href="/templates" title="Download Joomla, Wordpress, Forum Templates"/>Templates</a></div>
                                <div class="sprite icon script" /><a href="/scripts" title="Download latest rare scripts"/>Scripts</a></div>
                                <div class="sprite icon ps" /><a href="/photoshop-resource" title="Download Adobe Photoshop Plugins, Brushes, Patterns & Shapes"/>Photoshop Resource</a></div>
                                <div class="sprite icon tut" /><a href="/tutorials" title="Download Video Tutorials & Demonstrations"/>Tutorials</a></div>
                                <div class="sprite icon xxx" /><a href="/adult-xxx" title="Download XXX Porn Videos, Clips, Moves, Siterips"/>Adult XXX (+18)</a></div> 

[warezrock]

here you goo mate

remove the icon class from css file or increase the width

[ajinkya9]

Replace the php Code on the Main Page with this:

<div class="sprite icon soft" /><a href="/softwares" title="Download Windows & Macintosh Applications"/>Softwares</a></div>
                                <div class="sprite icon game" /><a href="/games" title="Download PC, Console & ROM Games"/>Games</a></div>
                                <div class="sprite icon mov" /><a href="/movies" title="Download Latest Movies XViD, DVDR, CAM"/>Movies</a></div>
                                <div class="sprite icon mus" /><a href="/music" title="Download Music, Videos & Albums"/>Music</a></div>
                                <div class="sprite icon tv" /><a href="/tv-shows" title="Download Latest TV Show Seasons"/>TV&nbsp;Shows</a></div>
                                <div class="sprite icon gfx" /><a href="/graphics" title="Download Graphic Resources"/>Graphics</a></div>
                                <div class="sprite icon eb" /><a href="/ebooks" title="Download eBooks, Guides & Tutorials"/>eBooks</a></div>
                                <div class="sprite icon temp" /><a href="/templates" title="Download Joomla, Wordpress, Forum Templates"/>Templates</a></div>
                                <div class="sprite icon script" /><a href="/scripts" title="Download latest rare scripts"/>Scripts</a></div>
                                <div class="sprite icon ps" /><a href="/photoshop-resource" title="Download Adobe Photoshop Plugins, Brushes, Patterns & Shapes"/>Photoshop&nbsp;Resource</a></div>
                                <div class="sprite icon tut" /><a href="/tutorials" title="Download Video Tutorials & Demonstrations"/>Tutorials</a></div>
                                <div class="sprite icon xxx" /><a href="/adult-xxx" title="Download XXX Porn Videos, Clips, Moves, Siterips"/>Adult&nbsp;XXX&nbsp;(+18)</a></div> 

I Just Replaced all the Spaces with

 

Alternatively, you can Also Remove the following from style.css

.icon{width:16px;}

[BlaZe]

@warezrock & ajinkya9,

It worked ! Thanks ! ya both

[CJ]

this post would be good to learn css sprites

& ajinkya9, nice to see u helping members