Help needed creating CSS sprites

Norman · December 31, 2015, 12:12am

I need some help here as I have currently this code:

<!-- Cambia Skin -->
<a href="?styleid=11"><img src="images/misc/cambia_stile_1.png" class="icone-cambiaskin" alt="Cambia skin: Blu" /></a>&nbsp;
<a href="?styleid=22"><img src="images/misc/cambia_stile_5.png" class="icone-cambiaskin" alt="Cambia skin: Orange" /></a>&nbsp;
<a href="?styleid=15"><img src="images/misc/cambia_stile_2.png" class="icone-cambiaskin" alt="Cambia skin: Grey" /></a>&nbsp;
<a href="?styleid=16"><img src="images/misc/cambia_stile_3.png" class="icone-cambiaskin" alt="Cambia skin: Ocean" /></a>&nbsp;
<a href="?styleid=21"><img src="images/misc/cambia_stile_4.png" class="icone-cambiaskin" alt="Cambia skin: Green" /></a>&nbsp;
<a href="?styleid=24"><img src="images/misc/cambia_stile_6.png" class="icone-cambiaskin" alt="Cambia skin: Black" /></a>&nbsp;
<!-- ### -->

Well, in Italian “Cambia” means “Change”.
This is the simple CSS that I am using:

.icone-cambiaskin {
      border: 1px solid #333; 
      vertical-align: middle; 
      width: 12px; 
      height: 12px;
}

And this is the combined image that I have:

Now this is just an information that I need to have, because I solved this using simple background colors and that’s all (this way I also have not to make requests for these images, which is better). But I have also another spirit to create that this time wouldn’t be solved using only colours. So I’m asking this: in this specifica case, will I need to just change all those <img> tags to <div> tags or is there a faster way to do this?

ralphm · December 31, 2015, 4:35am

It’s not really clear what you want to do here, but a few concepts need to be cleared up:

a sprite is a single image. You place all of your individual images into one, and then position that image strategically to show just a small part of it at any one time. Thus, it’s mainly used as a CSS background, rather than as an inline image.
divs really have nothing much to do with sprites. You can use any element, such as a span or even the a itself, to apply the background image to. It depends on what you’re trying to do, though.

Ideally, give a clear indication of what you are trying to achieve here, with the minimal HTML markup and the sprite image.

Norman · December 31, 2015, 2:43pm

Ok, so, this is the case:

and so on.

Now I created this image:

This is the code that I have for each image now:

<img src="images/misc/webdirectory-icona.png" class="mini-icone" alt="Web Directory" />

The class mini-icone just add the width, height and vertical-align.
As far as I created the image using this tool: http://spritepad.wearekiss.com/, if needed, now I also have this CSS code: http://pastie.org/10662886. What would be the best for me in this case?

Gandalf · December 31, 2015, 2:55pm

As Ralph mentioned, sprites are usually background images, and you select which part of the image to display using background-position.

Norman · December 31, 2015, 3:11pm

Then in that case would be good for me to use:

.mini-icone { background: url(spirites.png) no repeat; display: inline-block; }

And then:

<span class="webdirectory-icona mini-icone"></span>

Am I right?

Gandalf · December 31, 2015, 3:20pm

You’re on the right lines. You will need a class for each icon. For example, for the star you will have something like:

.stella {
  background-position: 0 0;
}

and you will need to give each icon a height and width.

Norman · December 31, 2015, 3:35pm

Yes, basically I could use this CSS: http://pastie.org/10662886, right?

Gandalf · December 31, 2015, 3:40pm

That looks about right. You may also need the

display: inline-block;

Norman · December 31, 2015, 3:42pm

For each rule in that CSS I posted? Wouldn’t be just fine to have it here:

.mini-icone { background: url(spirites.png) no repeat; display: inline-block; }

?

Gandalf · December 31, 2015, 3:45pm

Yes, just as you had it before!

Norman · December 31, 2015, 3:53pm

So, just to make it a little bit more clear for me:

I upload that spirited file to images/misc/iconenavbar-spirit.png. Then I add this to my stylesheet:

.mini-icone {    
       height: 13px;   
       vertical-align: middle;    
       width: 13px; 
       background: url(images/misc/iconenavbar-spirit.png) no repeat;
       display: inline-block;
}
.listautenti-icona{
	background-position: 0 -28px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.regolamento-icona{
	background-position: -15px -14px ;
	width: 11px;
	height: 13px;
        display: inline-block;
}

.newsletter-icona{
	background-position: -14px -28px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.nuovi-messaggi-icona{
	background-position: -27px -28px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.cerca-icona{
	background-position: -42px -28px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.collegamentiveloci-icona{
	background-position: 0 -42px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.registrati-icona{
	background-position: -27px -14px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.ottieni100-icona{
	background-position: -41px -12px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.webdirectory-icona{
	background-position: 0 0;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.risorsegratuite-icona{
	background-position: -13px 0;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.servizi-icona{
	background-position: -27px 0;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.usercp-icona{
	background-position: -41px 0;
	width: 13px;
	height: 13px;
        display: inline-block;
}

.newsannunci-icona{
	background-position: 0 -14px ;
	width: 13px;
	height: 13px;
        display: inline-block;
}

Then I change all these instances:

<img src="images/misc/webdirectory-icona.png" class="mini-icone" alt="Web Directory" />

to:

<span class="mini-icone webdirectory-icona"></span>

(obviously with their correct class for each icon)

Right?

Gandalf · December 31, 2015, 4:01pm

Without testing it, that looks about right, although having

display: inline-block;

in the .mini-icone class means you don’t need it in all the other classes (perhaps that was me being unclear).

In bocca al lupo!

Norman · December 31, 2015, 4:23pm

ahaha grazie mille gandalf458! Thank you so much for your help! I’m gonna try it right now! Let me see if I can get it work before 2016! LOL

Norman · December 31, 2015, 4:34pm

Tried but I can’t get it to work. Check it here: http://www.klayz.com/community/index.php?styleid=30
I just changed this one:
http://i.imgur.com/xwauC0L.png
But it doesn’t show up for some reason. In Firebug, if I check it, the CSS rule for mini-icone is not showing the background image rule. What could be?

Gandalf · December 31, 2015, 4:44pm

I think it’s your CSS rule. If it’s the same as you posted above then you’re missing a hyphen

background: url(images/misc/iconenavbar-spirit.png) no-repeat;

Norman · December 31, 2015, 5:02pm

Oh gosh you’re right! Thank you! Now it seems to be working. Let me change them all to see the final effect and I’ll let you know!

Norman · December 31, 2015, 5:07pm

Great! Its is working correctly! Thank you so much @Gandalf!

Gandalf · December 31, 2015, 5:09pm

Glad to hear Norman. Prego!

Norman · December 31, 2015, 5:49pm

Hey gandalf458, I’m having another problem and this time, as it seems to me to have done exactly the same, I can’t find a solution. I did the same thing for these icons:

But they aren’t showing.

I double-checked the codes and everything seems to be ok! Then what’s wrong here?

Norman · December 31, 2015, 5:53pm

Found! I didn’t add the display: inline-block rule. Sorry!