[Résolu] Problème de sprite

Bonjour, je me suis tenté aux sprites aujourd'hui et j'ai quelques soucis car le résultat diffère de mes attentes :

Je souhaiterai afficher une image de mon sprite et permettre de cliquer dessus (sans texte dessus).

Voici l'index de mon site :
http://www.penspinning.fr/

La modification concerne la parte "Abonnez vous".

J'ai déjà le sprite : http://images.penspinning.fr/sprite.png

Et le css (enfin je crois qu'il est complet) :

.sprites {
    background-image     : url(http://images.penspinning.fr/sprite.png);
    background-color     : transparent;
    background-repeat    : no-repeat;
 }

 #FaceBook_32x32_png {
    height               : 32px;
    width                : 32px;
    background-position  : -0px -0px;
 }

 #Feed_32x32_png {
    height               : 32px;
    width                : 32px;
    background-position  : -32px -0px;
 }

 #Twitter_32x32_png {
    height               : 32px;
    width                : 32px;
    background-position  : -64px -0px;
 }

 #Youtube_32x32_png {
    height               : 32px;
    width                : 32px;
    background-position  : -96px -0px;
 }

Donc tous les codes html que j'ai pu trouver sur le net, utilise des li ou des ul (je n'en veux pas ^^) et utilise du texte (ce que je ne veux pas non plus, je souhaite juste l'image à la manière de cette page mais sans hover : http://www.pompage.net/IMG/html/sprites/ala-buttons1.html )

Si je tente

<a class="sprite" id"FaceBook_32x32_png" href="lienblabla"></a>

il n'y a rien qui s'affiche...Comment faire pour avoir juste l'image de cliquable?

Merci beaucoup !
Modifié par Picool (25 Sep 2010 - 13:41)

Bonjour,
donne un display:block ou inline-block à tes liens

.sprites{
    display:block;
    background-image     : url(http://images.penspinning.fr/sprite.png); 
    background-color     : transparent; 
    background-repeat    : no-repeat; 
}

En effet, par défaut, la balise <a> a un comportement "inline", donc les width et height ne s'appliquent pas (à part dans ie).

Avec le display:block, tes liens vont se placer les uns en dessous des autres, donc donne leur aussi un float:left.
Avec le display:inline-block, pas de float:left, mais il te faudra écrire un style spécifique pour ie <8:

.sprites{
    display:inline;
    zoom:1
}

Et si ce n'est pas une faute de frappe, écrits : id="FaceBook_32x32_png".
Modifié par loicbcn (25 Sep 2010 - 06:33)

Bonjour,
Oui c'était juste une faute de frappe mais je l'avais bien écris dans mon code ^^.

Par contre j'ai essayé ta solution avec le display:block et rien ne s'affiche et j'ai la même chose avec l'autre code donné...Peut être que je dois modifié un peu plus que ce que tu as donné mais je ne suis pas un gros codeur ^^.

Merci de m'aider

C'est une faute de frappe aussi le <a class="sprite"> et le .sprites{} dans le css.

Oh quel idiot >< oui manquait un ptit s là c'était ma faute depuis le début ^^'

Donc j'ai tenté ton float:left; sur toutes les images :

 #Twitter_32x32_png {
float:left;
    height               : 32px;
    width                : 32px;
    background-position  : -64px -0px

Mais j'ai encore un ptit soucis ^^ mon div align center n'est plus pris en compte et les sprites "sortent" de la boîte d'où ils auraient du être.

<div align="center">
<a class="sprites" id="FaceBook_32x32_png" href="http://www.facebook.com/penspinningfr"></a>
<a class="sprites" id="Twitter_32x32_png" href="http://twitter.com/penspinningfr"></a>
<a class="sprites" id="Youtube_32x32_png" href="http://www.youtube.com/user/Penspinningfr"></a>
<a class="sprites" id="Feed_32x32_png" href="http://feeds.feedburner.com/penspinningfr"></a>
</div>

Comment réparer ce soucis ? Merci encore ^^

Si tu veux utiliser le float:left, tu ne pourras pas utiliser un text-align:center(tu aurais pu avec inline-block) ... Mais je viens de voir ton site, et ta colonne de droite a une largeur fixe. Tu connais donc la largeur du conteneur et celle de tes éléments, donc, en jouant sur les marges, tu peux centrer le tout.

Autre chose, donne a ton div.textwidget la propriété overflow:hidden pour éviter que tes icônes sortent du flux (passe au dessus du conteneur).

J'ai modifié pour utiliser le inline-block et ça marche nickel sans devoir rajouter le overflow:hidden.
J'ai pu tester sous IE6, et à part la transparence, il n'y a aucune problème

Merci beaucoup