Bonjour à tous,
voilà depuis quelques jours que je suis bloqué sur un problème de sprite.
Voici ma page url: http://studio.test.voila.net/ (dans le footer, la partie réseaux sociaux & pictos)
Voici le code concerné :
J'aimerai dans un premier temps à l'aide du sprite image que j'ai réalisé, mettre tout simplement le bon nom du réseau social en face de son picto. respectif (ex: Le picto "t" à gauche de twitter; le picto "f" à gauche de facebook, etc...). Ensuite quand cela sera résolu, j'appliquerai un état hover (2eme ligne en couleur dans le sprite) sur chacun de ces picto (qui sont gris à l'état normal), mais chaque chose en son temps...
Bref j'ai utilisé une liste <ul> avec 4 balises <li> (car j'ai 4 réseaux sociaux) contenant chacune une double classe. Je me suis inspiré de ce code css-sprites. Chaque <li> à une classe commune (.sprite-reseaux-sociaux) pour poser le background qu'est le sprite et également une classe qui lui est propre pour contrôler la position du background en fonction du réseau social (.picto-X).
Logiquement je devrais juste changer les coordonnées du background pour chaque picto, mais j'ai un soucis d'empiètrement du nom sur le picto comme vous pouvez le voir, et quand j'augmente ou réduit le padding de la classe .sprite-reseaux-sociaux, cela dévoile ou cache une partie du sprite. Par exemple sur le 1er reseau social (twitter), j'ai 3 pictos du sprite qui apparaissent au lieu de 1.
(J'ai juste réussi à caler le dernier,mais ce n'est pas bien difficile car c'est le dernier picto du sprite étant donné que je décale la position du background vers la gauche.)
J'ai pourtant sur ma classe .sprite-reseaux-sociaux une width de 15px pour encadrer un seul picto...mais je crois que ce padding me joue des tours, et je ne vois pas trop comment faire, pour décaler le nom du réseau social de son picto sans faire apparaître ou disparaître le sprite...
Je ne sais pas si c'est très clair, pas évident à expliquer, mais je penses qu'en voyant la page à l'aide de firebug, vous comprendrez. En attendant je vous remercie d'avoir pris le temps de me lire et de répondre à mon problème.
Modifié par lj44 (23 Aug 2011 - 16:09)
voilà depuis quelques jours que je suis bloqué sur un problème de sprite.
Voici ma page url: http://studio.test.voila.net/ (dans le footer, la partie réseaux sociaux & pictos)
Voici le code concerné :
<div id="contact">
<a class="bleu">Studio Test</a>
<p>06 xx x xx xx<br>
contact@studiotest.com</p>
<ul id="reseauxsociaux">
<li class="sprite-reseaux-sociaux picto-twitter"><a href="#">Twitter</a></li>
<li class="sprite-reseaux-sociaux picto-facebook"><a href="#">Facebook</a></li>
<li class="sprite-reseaux-sociaux picto-behance"><a href="#">Behance</a></li>
<li class="sprite-reseaux-sociaux picto-viadeo"><a href="#">Viadeo</a></li>
</ul>
</div><!--#contact-->#reseauxsociaux {
list-style: none;
margin: -65px -150px;
float: right;
}
#reseauxsociaux .sprite-reseaux-sociaux {
background:url(images/sprite_reseaux.gif) no-repeat;
display: inline-block;
width: 15px;
margin-left: 30px;
padding: 7px 40px;
}
#reseauxsociaux .picto-twitter {
background-position: 10px 0;
}
#reseauxsociaux .picto-facebook {
background-position: -35px 0;
}
#reseauxsociaux .picto-behance {
background-position: -66px 0;
}
#reseauxsociaux .picto-viadeo {
background-position: -97px 0;
}
#reseauxsociaux a {
color: white;
text-decoration: none;
font-weight: normal;
}
J'aimerai dans un premier temps à l'aide du sprite image que j'ai réalisé, mettre tout simplement le bon nom du réseau social en face de son picto. respectif (ex: Le picto "t" à gauche de twitter; le picto "f" à gauche de facebook, etc...). Ensuite quand cela sera résolu, j'appliquerai un état hover (2eme ligne en couleur dans le sprite) sur chacun de ces picto (qui sont gris à l'état normal), mais chaque chose en son temps...
Bref j'ai utilisé une liste <ul> avec 4 balises <li> (car j'ai 4 réseaux sociaux) contenant chacune une double classe. Je me suis inspiré de ce code css-sprites. Chaque <li> à une classe commune (.sprite-reseaux-sociaux) pour poser le background qu'est le sprite et également une classe qui lui est propre pour contrôler la position du background en fonction du réseau social (.picto-X).
Logiquement je devrais juste changer les coordonnées du background pour chaque picto, mais j'ai un soucis d'empiètrement du nom sur le picto comme vous pouvez le voir, et quand j'augmente ou réduit le padding de la classe .sprite-reseaux-sociaux, cela dévoile ou cache une partie du sprite. Par exemple sur le 1er reseau social (twitter), j'ai 3 pictos du sprite qui apparaissent au lieu de 1.
(J'ai juste réussi à caler le dernier,mais ce n'est pas bien difficile car c'est le dernier picto du sprite étant donné que je décale la position du background vers la gauche.)
J'ai pourtant sur ma classe .sprite-reseaux-sociaux une width de 15px pour encadrer un seul picto...mais je crois que ce padding me joue des tours, et je ne vois pas trop comment faire, pour décaler le nom du réseau social de son picto sans faire apparaître ou disparaître le sprite...
Je ne sais pas si c'est très clair, pas évident à expliquer, mais je penses qu'en voyant la page à l'aide de firebug, vous comprendrez. En attendant je vous remercie d'avoir pris le temps de me lire et de répondre à mon problème.
Modifié par lj44 (23 Aug 2011 - 16:09)
, J'ai tenu compte de cette remarque et cela m'a aidé à résoudre mon problème en partie... Ce que j'ai fais c'est de ne pas lier mes classes .sprite-reseaux-sociaux et .picto-X à la balise <li> directement pour éviter toute dépendance avec le reste du contenu. J'ai donc procéder à la création de span class dans la balise <li> ce qui les rend totalement indépendante du reste de la balise 