Css Sprite question, is there a better way?

Question

I'm a big sprite lover, but. I thought I was doing my whole long arm, so I was wondering if there was a shortcut.

In essence, creating a sprite is very simple. Making sprites work is easy, but making a lot of sprites becomes time consuming.

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

We will have about 16 to 20 sprites at our disposal. Below is an example 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.png);
    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 improving our sprites. Or should we create a sprite sheet with all the sprites?

Sample Image:

Added main 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>

, (. spritesheet.png, , 32,32 64,32

, lol

, argghhh

, , , lol :

! [alt text] [5]

.

Answer 1

.

#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);}

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);}

html

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

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

. , .

.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>

jsfiddle http://jsfiddle.net/gJkCZ/

Answer 2

, , . , , , .

, , , , background-position. CSS .

Answer 3

asp.net, , . 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 structure takes all your individual separate images, combines them into a sprite sheet and generates css for it

Answer 4

This is the best way I understood. Mainly because each image in the main menu (http://www.kintek.com.au) is different from the width, I indicate the width and position of the background on #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>