Bonjour à tous,
Je me retrouve avec un problème lié à l'utilisation d'un Sprite global contenant les icones d'un menu état link et hover. Sauf que je voudrais associer du texte à ces icones. et cela ne marche pas.
Voici mon code HTML :
et mon css :
Est-ce que quelqu'un pourrait me dire s'il y a un moyen de faire fonctionner cela ainsi ou s'il faut que je découpe mon sprite en 4 images de 2 états et de le mettre dans un a simplement. Me fais-je bien comprendre.
Salut à vous.
Modifié par FrogDesign (13 Jul 2012 - 09:30)
Je me retrouve avec un problème lié à l'utilisation d'un Sprite global contenant les icones d'un menu état link et hover. Sauf que je voudrais associer du texte à ces icones. et cela ne marche pas.
Voici mon code HTML :
<ul>
<li><a id="sprite1" href="#"><span class="picto"> </span><span>Premier niveau</span></a></li>
<li><a id="sprite2" href="#"><span class="picto"> </span><span>Deuxième niveau</span></a></li>
<li><a id="sprite3" href="#"><span class="picto"> </span><span>Troisième niveau</span></a></li>
</ul>et mon css :
li{ display:inline}
a{ border:none}
li>a>span.picto{ /*pour les spans contenant le picto en sprite*/
display:inline-block;
vertical-align: middle;
width:30px;
height:30px;
background-image: url(sprite_pictos_referencement.png);
background-repeat:none
}
#sprite1:link span.picto,#sprite1:visited span.picto {background-position:0px 0px;}
#sprite1:hover span.picto,#sprite1:active span.picto {background-position:0px 30px;}
/*etc... pour les deux autres menus*/
span+span{ /*pour les spans contenant le texte*/
display:inline-block;
vertical-align: middle;
margin:10px 0px;}
span+span:hover{ color:red}/*hover des spans contenant le texte*/Est-ce que quelqu'un pourrait me dire s'il y a un moyen de faire fonctionner cela ainsi ou s'il faut que je découpe mon sprite en 4 images de 2 états et de le mettre dans un a simplement. Me fais-je bien comprendre.
Salut à vous.
Modifié par FrogDesign (13 Jul 2012 - 09:30)