28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour la création d'un slideshow avec le plugin cycle jquery, j'ai besoin de la placer, sur la photo, des liens images suivant précédent.

Tout fonctionne normalement sauf sur IE7 IE8, où les images suivant précédent ne s'affichent tout simplement pas lorsque je passe en hover sur la photo.

En bref, j'ai créer 2 liens html comme suit :
			 	
<a href="#" class="prev"></a>	
<a href="#" class="next"></a>


Ensuite, je fait mon css avec une background-image qui ne fonctionne que sur FF et safari.

.slide a.prev:link,
.slide a.prev:visited{
	background-image:none;
	background-position:left top;
	background-repeat:no-repeat;
	height:505px;
	padding-right:300px;
	position:absolute; /* pour que mon lien image se positionne sur la photo */
	width:40px;
	border:none;
	outline:none;
	z-index:100;
	display:block;
}
.slide a.prev:hover,
.slide a.prev:active{
	background-image:url("../img/prev_bk.png");
	background-position: top left;
	background-repeat:no-repeat;
}

.slide a.next:link,
.slide a.next:visited{
	background-image:none;
	background-position:right top;
	background-repeat:no-repeat;
	height:505px;
	margin-left:420px;
	padding-left:300px;	
	position:absolute;
	width:40px;
	border:none;
	outline:none;
	z-index:100;
	display:block;
}
.slide a.next:hover,
.slide a.next:active{
	background-image:url("../img/next_bk.png");
	background-position: top right;
	background-repeat:no-repeat;
}


Je commence à ne plus rien comprendre à IE Smiley fache
Tout aide est la bienvenue ! Merci !
Modifié par nforum (20 Oct 2010 - 13:34)
Bonjour,

L'intitulé de la question annonce déjà le problème : tu essayes de faire quelque chose d'idiot.

Lien image sans texte -> image en background -> pas de lien.

Mets ton image dans le code HTML, donne lui un texte alternatif correct et gère le survol en JavaScript.
ce n'est pas idiot. C'est d'ailleurs ce qui se fait pour gérer des liens suivant/précédent avec des slideshows jquery...
bonjour,

utiliserait tu un script pour gerer les png pour IE ?
Si c'est le cas , il arrive frequement que le 'lien' indiqué dans le filtre soit incorrecte. ça fait mouliner IE et ça n'affiche rien , de plus ça ne serait utile que pour IE6.

GC
oui c'est le cas. je vais regarder de plus près.

mais depuis, j'ai trouvé la solution. J'ai refait mon css, ce qui m'a donné la réponse à ma question.
Le problème était apparemment le suivant pour IE :
le css est correct, mais il fallait sur mes liens, a:link + a:visited, non pas utiliser un background-image: none, mais faire une image png transparente de la même taille de celle utilisée pour mes liens, a:hover + a:active. Par exemple : background-image:url("img/bk_trasparent.png");

voilà donc
Modifié par nforum (20 Oct 2010 - 13:33)