Css Sprite question, is there a better way?

I am a great lover of sprites, but. Got thinking, I do everything long hand, so was wondering if there was a shortcut.

Essentially, creating a sprite is easy. Making the sprite work is easy, but doing lots of sprites, gets laborious.

So was wondering what is the cleanest way of doing multiple sprites, that I can position anywhere on our web pages. I have seen multiple sprite sheets, similar to jquery ui icons, but we have our own icons. So was wondering if there was a cleaner method.

All up we will have approx 16 to 20 sprites in the set. Below is sample of html and css.

#logo-link
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/analytics.png);
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active  { background-position:0 0; }

#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/addlisting.pn开发者_JAVA百科g);
    background-position:0 32px;
}
#logo-link2:hover,#logo-link2:active    { background-position:0 0; }

html

<a href="link1.html" id="logo-link"> </a>

<a href="link2.html" id="logo-link2"> </a>

Any thoughts, on refining our sprites. Or should we create a sprite sheet with all sprites on ?

Image sample:

Added basic sprite sheet on x axis

Example:

Ok Guys:

So far I have this in css:

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(sprites/spritesheet.png);
}

.addlisting{background-position:0 32;}
.addlisting:hover{background-position:0 0;}
.addanalytics{background-position:64 32;}
.addanalytics:hover{background-position:64 0;}
.addprofile{background-position:32 32;}
.addprofile:hover{background-position:32 0;}

html I have:

<a href="link2.html" class="sprite addlisting"> </a>

<a href="link2.html" class="sprite addanalytics"> </a>

<a href="link2.html" class="sprite addprofile"> </a>

What I really dont get ( see the spritesheet.png I made above , is why profile is at co-ordinates 32,32 and why analytics is at co-ordinates 64,32

Perhaps I have my co-ords wrong lol

This is driving me mad now, argghhh

Added the actual sprite sheet now, but I am buggered if I can get so-ordinates to play with me lol Image added:

![alt text][5]

Finally figured it out.

---

Using a sprite sheet is beneficial to both the server and the end users, because the browser only needs to download one image instead of multiple images. Therefore, whe navigating to different pages, the browser does not need to download additional images since the master sprite sheet has already been received.

Also, in regards to your stylesheet, it may be easier to have a master link class that sets everything except the background-position property. This would decrease the size of the CSS and make it easier to modify in the future.

---

You could combine the selectors like so.

#logo-link,#logo-link2
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
#logo-link:hover,#logo-link:active,#logo-link2:hover,#logo-link2:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

Alternatively you could add a class called sprite

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-position:0 32px;
}
.sprite:hover,.sprite:active {background-position:0 0;}

#logo-link{background-image:url(sprites/analytics.png);}
#logo-link2{background-image:url(sprites/addlisting.png);}

And the html

<a href="link1.html" id="logo-link" class="sprite"> </a>

<a href="link2.html" id="logo-link2" class="sprite"> </a>

Edit: Here is another alternative if you plan on using a sprite sheet.

.sprite
{
    width:32px;
    height:32px;
    text-decoration:none;
    display:block;
    background-image:url(spritesheet.png);
}
.analytics{background-position:0 0;}
.analytics:hover{background-position:0 0;}
.addlisting{background-position:0 0;}
.addlisting:hover{background-position:0 0;}

HTML:

<a href="link2.html" class="sprite addlisting"> </a>

And a jsfiddle http://jsfiddle.net/gJkCZ/

---

If you are working in asp.net then there has been a framework released recently which is dedicated to handling this problem. Its call ASP.NET Sprite & Image Optimization Framework:

• http://weblogs.asp.net/craigshoemaker/archive/2010/08/06/asp-net-sprite-amp-image-optimization-framework-intro-in-webforms.aspx
• http://aspnet.codeplex.com/releases/view/50869

The approach it takes is as follows:

• You create the images as normal individual images
• The framework takes all of your separate individual images, combines them into a sprite sheet and generates the css for it

---

This is the best way I've figured out. Basically because each image in the main menu (http://www.kintek.com.au) is a different width, I specify a width and background position on the #id.

Css

ul.menu li a{
    background: url(/images/menu/nav.png) no-repeat;
    height:77px;
    display:block;
    text-indent:-9999px;
}
a#home{width:73px;background-position:0 -3px;}
a#home:hover, a#home.selected {background-position:0 -83px;}

a#services{width:90px;background-position:-231px -3px;}
a#services:hover, a#services.selected {background-position:-231px -83px;}

Markup

<li><a id="home"?> title="Kintek Web Design, Brisbane">Home</a></li>
<li><a id="services" class="selected">Services</a>