[CSS Sprites] mi date una mano? Garantisco ricompensa

[oronzo_canà]

Salve a tutti , per migliorare la velocita del sito in firma avrei bisogno di sostituire nel file template.css le chiamate alle immagini singole con la chiamata ad una immagine css_sprite.gif e il riferimento alle porzioni della stessa.

Tramite questo tool ho generato sia l'immagine css_sprite.gif che il codice per le varie classi che ricercano le porzioni dentro css_sprite.gif.

.sprite-Block-c { background-position: 0 0; width: 117px; height: 115px; } 
.sprite-Block-h { background-position: 0 -165px; width: 3000px; height: 38px; } 
.sprite-Block-s { background-position: 0 -253px; width: 38px; height: 38px; } 
.sprite-BlockContentBullets { background-position: 0 -341px; width: 5px; height: 13px; } 
.sprite-Button { background-position: 0 -404px; width: 423px; height: 96px; } 
.sprite-Footer { background-position: 0 -550px; width: 1px; height: 1px; } 
.sprite-MenuItem { background-position: 0 -601px; width: 406px; height: 75px; } 
.sprite-MenuSeparator { background-position: 0 -726px; width: 2px; height: 25px; } 
.sprite-Post-h { background-position: 0 -801px; width: 50px; height: 14px; } 
.sprite-Post-s { background-position: 0 -865px; width: 14px; height: 14px; } 
.sprite-Post-v { background-position: 0 -929px; width: 14px; height: 50px; } 
.sprite-PostQuote { background-position: 0 -1029px; width: 28px; height: 18px; } 
.sprite-Sheet-h { background-position: 0 -1097px; width: 50px; height: 70px; } 
.sprite-Sheet-s { background-position: 0 -1217px; width: 70px; height: 70px; } 
.sprite-Sheet-v { background-position: 0 -1337px; width: 70px; height: 50px; } 
.sprite-css_sprites_1 { background-position: 0 -1437px; width: 3000px; height: 1943px; } 
.sprite-livemarks { background-position: -3050px 0; width: 24px; height: 32px; } 
.sprite-nav { background-position: -3050px -82px; width: 990px; height: 37px; } 
.sprite-notice-alert { background-position: -3050px -169px; width: 29px; height: 29px; } 
.sprite-notice-info { background-position: -3050px -248px; width: 29px; height: 29px; } 
.sprite-notice-note { background-position: -3050px -327px; width: 29px; height: 29px; } 
.sprite-selector-arrow { background-position: -3050px -406px; width: 13px; height: 10px; } 
.sprite-subitem-bg { background-position: -3050px -466px; width: 1px; height: 40px; }

Il generatore mi dice di inserire nel CSS il seguente codice

#container li {
   background: url(css_sprite.gif) no-repeat top left;
}

ma poi? Come devo sostituire le parti di codice che definiscono le immagini dentro template.css? Scusatemi ma sono proprio digiuno di CSS.. magari però a chi mi risolve la questione posso sdebitarmi con un salame o una bella bottiglia di vino in omaggio

( senza esagerare però .. niente Brunelli di Montalcino o simili )

[fcaldera]

innanzittutto devi specificare su quali elementi applicare quell'immagine come sfondo.
Quindi suppongo non solo ai list-item[*] ma anche ad altri

A questi elementi assegni il background-image

poi selettivamente a ciascun elemento (link, li, p o altro che sia) assegni come classe una di quelle generate dal tool

[oronzo_canà]

scusa ma sono tardone. prendiamo per esempio la prima riga del template.css

.Sheet-tr,.Sheet-tl,.Sheet-br,.Sheet-bl{width:70px;height:70px;background-image:url('../images/Sheet-s.png');}

ora ../images/Sheet-s.png non la carico più ma è una porzione di css_sprite.gif.

Come dovrei modificare questa riga di codice? Poi le altre provo a farle da solo.

Grazie della risposta.

[fcaldera]

http://css.html.it/articoli/leggi/31...re-sprite-css/