Discussion :

[cilies38]

Bonjour tout le monde,

Tout est dans le titre j'ai utilisé du code css que j'ai trouvé sur le net pour qu'une image agrandie appairaisse dans une div au survol du curseur de la souris sur des images en miniatures. Le problème c'est que sur IE l'image dépasse la div conteneur mais sur firefox lorsque l'image apparaît elle est coupé par la div. J'ai essayé de mettre un overflow hidden mais rien y fait voici le code

le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
.photo {position:relative;}
.photo span  {display:none;}
.photo:hover {border:0;} /* bug IE6 */
.photo:hover span {display:block;position:absolute;top:10px;right:10px}
 
.content{
padding: 20px 10px;
text-align:center;
overflow:visible;
}

html généré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<div class="content"> 
 
<h2>Photos de la mosquée</h2>
<hr/>
<a href="diaporama.php?dir=photos/&nr=1" class="photo">
<img src="photos/P1020485.JPG" width="50px" height="50px" border="1" />
<span><img src="photos/P1020485.JPG" width="200px" height="200px" border="1"/></span>
</a>
<a href="diaporama.php?dir=photos/&nr=2" class="photo">
<img src="photos/P1020489.JPG" width="50px" height="50px" border="1" />
<span><img src="photos/P1020489.JPG" width="200px" height="200px" border="1"/></span>
</a>
<a href="diaporama.php?dir=photos/&nr=3" class="photo">
<img src="photos/P1020490.JPG" width="50px" height="50px" border="1" />
<span><img src="photos/P1020490.JPG" width="200px" height="200px" border="1"/></span>
</a>
<a href="diaporama.php?dir=photos/&nr=4" class="photo">
<img src="photos/P1020491.JPG" width="50px" height="50px" border="1" />
<span><img src="photos/P1020491.JPG" width="200px" height="200px" border="1"/></span>
</a>
<a href="diaporama.php?dir=photos/&nr=5" class="photo">
<img src="photos/P1020493.JPG" width="50px" height="50px" border="1" />
<span><img src="photos/P1020493.JPG" width="200px" height="200px" border="1"/></span>
</a>		
</div>

Merci bien.

[Kerod]

de mettre le code HTML généré.

[cilies38]

J'ai trouvé le probleme.
J'ai une mise en page de 3 colonnes (float right float left avec des margin-right et margin-left) la colonne centre comporte un overflow:hidden le probleme c'est que si je l'enlève la colonne centre se glisse sous la colonne gauche. Bon je vais continuer à chercher.

[cilies38]

C'est bon j'ai enlevé les margin right aux et left aux colonnes gauche et droit et j'ai mis un margin right et left à la colonne centre j'ai pu enlever le overflow hidden et c'est bon. Merci.