28173 sujets

CSS et mise en forme, CSS3

Bonjour
Voici mon problème.
Dans une colonne à gauche, j'affiche plusieurs vignettes photos. En passant en rollover sur ces vignettes, j'affiche une photo agrandie. Pour les vignettes du haut de la colonne, pas de problème mais quand il s'agit des vignettes en bas de l'écran, on ne voit que le haut de l'image agrandie.

Comment positionner l'image agrandie quelle que soit la position de la vignette ?

Merci pour votre aide

Extrait du code html :

<dl id="vignettes">
   <dt onmouseover="javascript:montre_v('photo1');"  onmouseout="javascript:montre_v();">
        <a href="#"><img style="width: 90px; height: 60px;" alt="header" src="../images/V_IMG_2885-800.jpg" /></a>
   </dt>
     <dd id="photo1">
	 <ul>
	    <li><img style="width: 400px; height: 300px;" alt="header" src="../images/IMG_2885-800.jpg" /></li>
	 </ul>
     </dd>


URLs des pages :
http://papapetch.free.fr/fort/fr/2007_saison.html
http://papapetch.free.fr/fort/css/deux_colonnes.css
http://papapetch.free.fr/fort/js/fort.js
Modifié par Papapetch (29 Nov 2007 - 12:48)
Tu peux faire apparaitre toutes images à la même position en modifiant ton style dans deux_colonnes.css (ligne 155) :
#vignettes dd {
display:none;
left:100px;
position:absolute;
[#pink]top:0px;[/#]
z-index:50;
}

Je ne suis pas sur que c'est ce que tu attendais. Mais n'avoir que certaines images qui sont plus hautes, ça demande de créer un nouveaux style #photo5, #photo6, #photo7 avec un margin-top différent pour chaque image dont tu voudras changer la position. Je ne sais pas si c'est gèrable dans ton site.

Smiley cligne