(re) bonjour,
J'ai un (autre) souci sur un site internet.
j'ai créer un diaporama utilisant des fonctionnalités jquery. Des liens ont été créée afin de contrôler le diaporama : précédent, suivant, stop, play.
Mon objectif était de placer des liens images à la place de liens texte. Afin d'avoir l'effet d'un rollover, j'ai donc décider de placer les images dans un background-image. Je m'explique :
Voici la structure html de mes liens :
mon css définit les images en background pour les différentes classes :
Le problème est le suivant : les icônes s'affichent correctement et permettent de contrôler le diaporama. Par contre, safari est le seul navigateur à ne pas m'afficher les icônes! est-ce un problème de padding ? ou autre chose ?
Merci
J'ai un (autre) souci sur un site internet.
j'ai créer un diaporama utilisant des fonctionnalités jquery. Des liens ont été créée afin de contrôler le diaporama : précédent, suivant, stop, play.
Mon objectif était de placer des liens images à la place de liens texte. Afin d'avoir l'effet d'un rollover, j'ai donc décider de placer les images dans un background-image. Je m'explique :
Voici la structure html de mes liens :
<div id="controls">
<span>
<a class="prev" href="#"> </a>
</span>
<span>
<a class="next" href="#"> </a>
</span>
<span>
<a class="pause" href="#"> </a>
</span>
<span>
<a class="play" href="#"> </a>
</span>
</div>
mon css définit les images en background pour les différentes classes :
a.prev{
height:25px;
width:55px;
padding:5px 53px 5px 0;
margin-right:2px;
background-image:url("../img/prev.png");
background-repeat:no-repeat;
}
a:hover.prev{
background-image:url("../img/prev_hover.png");
}
a.next{
height:25px;
width:55px;
padding:5px 53px 5px 0;
margin-right:2px;
background-image:url("../img/next.png");
}
a:hover.next{
background-image:url("../img/next_hover.png");
}
a.play{
height:25px;
width:55px;
padding:5px 53px 5px 0;
margin-right:2px;
background-image:url("../img/play.png");
}
a:hover.play{
background-image:url("../img/play_hover.png");
}
a.pause{
height:25px;
width:55px;
padding:5px 53px 5px 0;
margin-right:2px;
background-image:url("../img/pause.png");
}
a:hover.pause{
background-image:url("../img/pause_hover.png");
}
Le problème est le suivant : les icônes s'affichent correctement et permettent de contrôler le diaporama. Par contre, safari est le seul navigateur à ne pas m'afficher les icônes! est-ce un problème de padding ? ou autre chose ?
Merci