On explique tout sur les sprites d’images CSS et pourquoi utiliser des sprites.
Retrouvez le script complet de ce cours HTML / CSS sur mon site : http://pierre-giraud.com/home.php.
N’hésitez pas à mettre un pouce bleu ou un commentaire, merci d’avance !
Source du tuto
14 Commentaires. En écrire un nouveau
merci !
Bonjour, serait-il possible d'avoir l'image des logos, car je ne la trouve pas sur votre site, merci 😉
Merci.
Merci beaucoup 🙂
Merci beaucoup 😉
Merci beaucoup 😉
franchement super cours, motivé jusqu'à la vidéo 71 🙂
ca marche pas pour moi, rien ne s'affiche.
sa ne s'affiche pas pour moi alors que j'ai tout écrit comme il faut et mis les images dans le bon dossier. Une solutions ?
rien à faire j'ai bon regarder 50 fois ce tuto et tout recommencer mais rien ne s'affiche ! et pourtant j'ai bien vérifier tout est pareil sauf bien sur le nom de l'image. Avez-vous une solution je dois absolument savoir faire sa pour continuer
mon code marche sur jsbin avec une url externe mais pas avec mon image. Par contre elle est bien présente car le curseur de la souris change au passage sur la zone d'affichage de l'icone. Je pense que c'est peut-être un problème de connexion trop lente.
J'ai télécharger une image au format PNG regroupant tous les logo, mais rien n'apparaît en reproduisant les code; Merci de nous aider
est-il obligatoirement d'utiliser une image png ? pouvons-nous d'utiliser d'autre type jpg…?
Bonjour à tous! PB résolu ici !!
Après avoir bien galéré sur plusieurs problèmes et tatonné sur mon logiciel de codage et sur les sites de référence (W3C, openclassroom) pour trouver une solution, je peux peut-être apporter des éléments de réponse pour ceux pour qui rien ne s'affiche car c'était le cas pour moi également.
(Attention je suis une débutante donc pardonnez moi si je dis des choses qui vous paraissent invraisemblable.)
1- Bref, en gros 1e erreur à vérifier, que les # soient bien devant chaque id mentionné dans le css : #fb, #tw, #lk{}.
2- Ensuite, testez de mettre juste background et pas background-image car mon image s'efface lorsque je mets background-image alors qu'elle est belle et bien présente avec juste background.
3- ensuite, comme l'indique le site W3Cschool, indiquez où commence l'image en partant par la droite. donc pour le logo de twitter, vu qu'il est en 3eme position en partant de la droite j'ai compté 3x50px=150px. J'ai donc écris 150px 0px. Et là HO miracle, ça fonctionne !!!
4- pour suivre cette logique avec le logo de Linkedin, j'ai mis 100px 50px (ça marchait aussi avec -100px -50px mais un bout du logo orange du dessus apparaissait au dessous (étrange…).
VOILA j'espère vous avoir aidé, bonne journée à tous !