Bonjour tout le monde, content d'entrer dans la communauté.
Et bien, je vous expose mon problème...
Je fais un site et je dois intégrer une galerie. Ce que je voudrais que ca fasse : Gallerie full CSS avec scrollbar
En bref, une simple galerie en full css, les vignettes utilisant une scrollbar Horizontale. Lorsqu'on passe avec la souris sur les vignettes, la photo apparait en plus grand au dessus et reste affichée lorsqu'on clique dessus.
Mon problème c'est que la photo grand format apparait au mauvais endroit. Elle apparait dans la div vignettes.
J'ai trouvé une demi solution au problème c'est que lorsque j'enlève le overflow, je peux positionner ma photo ou je le désire.
Mais si je fais ça je n'ai plus de scrollbar horizontale.
Mon CSS:
Mon html:
Voilà, j'espère que vous pourrez m'aider... Ca me rend fou, j'ai recommencé plein de fois!!!
Alors S'il te plait Alsacréation, Tune mon code
!
Merci d'avance à tous.
Bien à vous,
Damien.
Et bien, je vous expose mon problème...
Je fais un site et je dois intégrer une galerie. Ce que je voudrais que ca fasse : Gallerie full CSS avec scrollbar
En bref, une simple galerie en full css, les vignettes utilisant une scrollbar Horizontale. Lorsqu'on passe avec la souris sur les vignettes, la photo apparait en plus grand au dessus et reste affichée lorsqu'on clique dessus.
Mon problème c'est que la photo grand format apparait au mauvais endroit. Elle apparait dans la div vignettes.
J'ai trouvé une demi solution au problème c'est que lorsque j'enlève le overflow, je peux positionner ma photo ou je le désire.
Mais si je fais ça je n'ai plus de scrollbar horizontale.
Mon CSS:
/* ================================================== */
/* ================================================== */
/* =====================Galerie====================== */
/* ================================================== */
/* ================================================== */
.vignettes{
display:block;
position:absolute;
bottom:50px;
left:50px;
border:#000000 solid 1px;
width:385px;
height:90px;
white-space:nowrap;
[b]overflow:auto; /*l'overflow en question qui ajoute le scroll horizontal, lorsque je l'enlève plus de scroll mais la photo grand format peut s'afficherou je le veux*/[/b]
}
.mini{
width:840px; height:60px;
}
a.gallery, a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
width:75px;
height:47px;
margin:3px;
float:left;
}
a.slidea {background:url(images/gallerie/mini/portrait/vignette_portrait_01.jpg);} /* vignettes*/
a.slideb {background:url();}
a.slidec {background:url();}
a.slided {background:url();}
a.slidee {background:url();}
a.slidef {background:url();}
a.gallery span{/*état photo grand format quand rien ne se passe, pas de vignettes survolées ni cliquées*/
position:absolute;
background:#efedec;
z-index:1;
visibility:hidden;
}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img {border:1px solid #000; z-index:100;}
a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
a.gallery:hover span{ /*état photo grand format quand on passe sur les vignettes*/
position:absolute;
width:407px;
height:290px;
top:-200px;
left:0px;
padding:5px;
color:#000;
background:#fff;
z-index:1;
visibility:visible;}
a.gallery:active {border:1px solid #eee;} /*état des vignettes lorsqu'elle sont actives*/
a.gallery:active span, a.gallery:focus span { /*état de la photo grand format quand elle est active*/
position:absolute;
width:407px;
height:290px;
top:-200px;
left:0px;
padding:5px;
color:#000;
background:#fff;
z-index:1;
}
Mon html:
<div class="titre_vignette">
Vignettes: <span class="texte-rose">Cliquez pour agrandir!</span> </div>
<div class="vignettes">
<div class="mini">
<a class="gallery slidea" href="#nogo" title=""><span><img src="images/gallerie/photo/portrait/portrait_01.jpg" alt="portrait_01" title="Portrait_01" ></span></a>
<a class="gallery slideb" href="#nogo" title=""><span><img src="" alt="" title="" /></span></a>
<a class="gallery slidec" href="#nogo" title=""><span><img src="" alt="" title="" /></span></a>
<a class="gallery slided" href="#nogo" title=""><span><img src="" alt="" title="" /></span></a>
<a class="gallery slidee" href="#nogo" title=""><span><img src="" alt="" title="" /></span></a>
<a class="gallery slidef" href="#nogo" title=""><span><img src="" alt="" title="" /></span></a>
<a class="gallery slideg" href="#nogo" title=""><span><img src="" alt="" title="" /></span></a>
</div>
</div>
Voilà, j'espère que vous pourrez m'aider... Ca me rend fou, j'ai recommencé plein de fois!!!
Alors S'il te plait Alsacréation, Tune mon code
!Merci d'avance à tous.
Bien à vous,
Damien.
