Sprite CSS

[federossoblu]

Per ridurre le richieste al server, ho deciso di utilizzare degli sprite CSS per la generazione di alcune icone nella sidebar (sto usando wordpress 3.4.2 con tema Infrared modificato da me).
Seguendo la guida che ho trovato qua su html.it mi creo la png di base, creo la transparent.gif e scrivo il codice necessario.

Le icone che voglio usare sono attualmente inserite in HTML e Php come di seguito:

[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/rss.png[/img]
	[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/delicious.png[/img] 
	[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/digg.png[/img]
	[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/facebook.png[/img] 
	[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png[/img] 
	[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/linkedin.png[/img] 
	[*][img]<?php bloginfo('stylesheet_directory'); ?>/images/youtube.png[/img]

il css che ho aggiunto al foglio di stile è il seguente:

.sprite {background:url(http://www.bitnation.net/wp-content/uploads/sprite.png);}
	
	.rss {height:32px; width:32px; background-position: -1px -1px}
	.delicious {height:32px; width:32px; background-position: -35px -1px}
	.digg {height:32px; width:32px; background-position: -69px -1px}
	.facebook {height:32px; width:32px; background-position: -103px -1px}
	.twitter {height:32px; width:32px; background-position: -137px -1px}
	.google {height:32px; width:32px; background-position: -171px -1px}
	.youtube {height:32px; width:32px; background-position: -205px -1px}

e al primo html vi sostituirei questo:

[*]
<a href="<?php bloginfo('rss2_url'); ?>" >
</a>

	[*]
	<a href="http://del.icio.us/post?url=<?php bloginfo('siteurl');?>">
	</a> 
	
	[*]
	<a href="http://www.digg.com/submit?phase=2&amp;url=<?php bloginfo('siteurl');?>">
	</a>
	
	[*]
	<a href="<?php $face = get_option('infra_face'); echo ($face); ?>">
	</a>
	 
	[*]
	<a href="http://twitter.com/<?php $twit = get_option('infra_twit'); echo ($twit); ?>">
	</a>
	 
	[*]
	<a href="<?php $linkd = get_option('infra_linkd'); echo ($linkd); ?>">
	</a>
	 
	[*]
	<a href="<?php $yout = get_option('infra_yout'); echo ($yout); ?>">
	</a>

La png di base è questa:



Però non mi funziona, e non viene visualizzata. Qualcuno mi saprebbe dire dove ho sbagliato e come rimediare? Grazie.

[FPDesign]

Prova a mettere i ";" dopo le dichiarazioni

background-position: -1px -1px

Adesso ci sono subito le } e alcuni (se non tutti) i browser non riconoscono la proprietà se non la chiudi correttamente con il suo ;

Ciauz

[federossoblu]

Originariamente inviato da FPDesign
Prova a mettere i ";" dopo le dichiarazioni

background-position: -1px -1px

Adesso ci sono subito le } e alcuni (se non tutti) i browser non riconoscono la proprietà se non la chiudi correttamente con il suo ;

Ciauz

Grazie per la risposta, era esattamente come dici tu, mi ero dimenticato del punto e virgola grazie mille, penso che si possa pure chiudere.

[Shikamaru93]

Anche io ho un problema con la vostra guida.
Ho questo css

.sprite {background:url(../img/icon.png);}
	.icon{height:7px;width:7px;}
	.1{height:32px; width:32px;background-position:-7px 0px;}
	.2{background-position:-14px 0px;}
	.3{background-position:-21px 0px;}

e questo

[img]../img/transparent.gif[/img]

Indipendentemente dal 1, 2, o 3 che io scelgo, mi resta sempre l'icona 1.
Questa dovrebbe essere l'immagine:

[Shikamaru93]

UP

[ratte]

Ciao Shik
Il nome di una classe non può cominciare con un numero

o/ !

[Shikamaru93]

Ah ecco!
Si ora funge.
Una cosa aggiuntiva: nonostante l'aggiunta dello sprite, google mi rompe sempre le scatole per quanto riguarda quell'icona riguardo al fatto di mettere le immagini usando sprite css. Sapete come mai?