Results 1 to 9 of 9
Threaded View
-
16th Feb 2011, 07:00 AM #1OPToo busy :|Website's:
L337Fx.com BeastieBay.netCSS 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
PHP Code:/* 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;}
PHP Code:<div class="sprite icon soft" /><a href="/softwares">Softwares</a></div>
<div class="sprite icon game" /><a href="/games">Games</a></div>
So how do I fix it ?BlaZe Reviewed by BlaZe on . 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
Sponsored Links
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
Social Network Icons in form of CSS Sprites for websites
By flanker in forum Web Development AreaReplies: 1Last Post: 15th Jun 2012, 06:19 AM -
[Hiring] Combine images using CSS sprites
By chakravarti in forum Completed TransactionsReplies: 8Last Post: 14th Apr 2011, 05:05 AM -
[html/css] Mouse Hover Button using Sprites
By jayfella in forum Web Development AreaReplies: 6Last Post: 15th Jun 2010, 11:21 AM -
CSS - Sprites (Web 3.0) Tutorial
By litewarez in forum Tutorials and GuidesReplies: 14Last Post: 29th May 2009, 01:01 AM
themaCreator - create posts from...
Version 3.53 released. Open older version (or...