Bonjour à tous,
Je souhaite réaliser une galerie d'images.
Pour cela, j'ai placé une série de liens avec vignettes dans un DIV que j'ai configuré avec overflow:auto. En utilisant les barres de défilement, je peux donc afficher toutes mes vignettes/liens
En utilisant a:hover avec les vignettes, je souhaite faire apparaître l'image grand format et la légende correspondante.
Avec FF, tout fonctionne sans problème (voir http:delasalle.damien.neuf.fr), mais avec IE6, les grandes images sont cantonnées dans le DIV qui contient les vignettes. J'ai essayé tous les positionnement, mais les grandes images ne peuvent pas dépasser la hauteur max de mon div de vignettes.
J'ai disséqué mon code petit bout par petit bout et j'ai fini par trouver que c'était la propriété overflow qui m'empêchait de positionner mes grandes images où je le souhaite.
Existe-t-il à votre connaissance un moyen de contourner le problème ? Merci
Voici des extraits des codes utilisés (validés W3C, ce qui ne veut pas dire qu'ils sont exempts d'erreurs étant donné que c'est ma première approche des CSS).
HTML :
CSS :
Je souhaite réaliser une galerie d'images.
Pour cela, j'ai placé une série de liens avec vignettes dans un DIV que j'ai configuré avec overflow:auto. En utilisant les barres de défilement, je peux donc afficher toutes mes vignettes/liens
En utilisant a:hover avec les vignettes, je souhaite faire apparaître l'image grand format et la légende correspondante.
Avec FF, tout fonctionne sans problème (voir http:delasalle.damien.neuf.fr), mais avec IE6, les grandes images sont cantonnées dans le DIV qui contient les vignettes. J'ai essayé tous les positionnement, mais les grandes images ne peuvent pas dépasser la hauteur max de mon div de vignettes.
J'ai disséqué mon code petit bout par petit bout et j'ai fini par trouver que c'était la propriété overflow qui m'empêchait de positionner mes grandes images où je le souhaite.
Existe-t-il à votre connaissance un moyen de contourner le problème ? Merci
Voici des extraits des codes utilisés (validés W3C, ce qui ne veut pas dire qu'ils sont exempts d'erreurs étant donné que c'est ma première approche des CSS).
HTML :
<div id="galerie">
<a href="#"><imgsrc="...DSC00863_ok.jpg"/><span><img src="DSC00863_ok.jpg"/><br />Vaches.</span></a>
<a href="#"><img src="...DSC01638_ok.jpg"/><span><img src="DSC01638_ok.jpg"/><br />Bouquet.</span></a>
...
</div>CSS :
a{text-decoration: none; color:orange; font-weight: bold; }
a:hover {background:none;}
/*Masquage des grandes images de la galerie*/
#galerie a span{display:none;}
#galerie {
position:relative;
top:500px;
left:10px;
height:80px;
width: 680px;
overflow: auto;
text-align: left;
padding-bottom:5px;
}
/*Affichage des grandes images*/
#galerie a:hover span {
display:inline;
position:absolute;
top:-550px;
left:0px;
}