Discussion :

[folvool]

Bonjour,
J'ai sur cette page (http://www.sentiersdumonde.fr/fr_album.html) un soucis. Je m'explique : quand l'internaute clique sur les différentes galeries, les vignettes des photos s'affichent à droite. Seul soucis : elles ne s'affichent pas toutes à la même hauteur. Comment puis-je résoudre mon problème?

Le code de ma page de galerie

Code html :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table>
     <tr>
         <td>
             <ul>
                 <p>
                     <li><a href="#" alt="galerie1"  onclick ="afficher('galerie1'), masquer('galerie2'), masquer('galerie3'), masquer('galerie4'), masquer('galerie5')">GALERIE1</a></li>
                     <li><a href="#" alt="galerie2"  onclick ="afficher('galerie2'), masquer('galerie1'), masquer('galerie3'), masquer('galerie4'), masquer('galerie5')">GALERIE2</a></li>
                     <li><a href="#" alt="galerie3"  onclick ="afficher('galerie3'), masquer('galerie1'), masquer('galerie2'), masquer('galerie4'), masquer('galerie5')">GALERIE2</a></li>
                     <li><a href="#" alt="galerie4"  onclick ="afficher('galerie4'), masquer('galerie1'), masquer('galerie2'), masquer('galerie3'), masquer('galerie5')">GALERIE2</a></li>
                     <li><a href="#" alt="galerie5"  onclick ="afficher('galerie5'), masquer('galerie1'), masquer('galerie2'), masquer('galerie3'), masquer('galerie4')">GALERIE2</a></li>
                 </p>
             <ul>
         </td>
         <td>
             <p id="galerie1">
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo1" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
             </p>
             <p id="galerie2">
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo1" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
             </p>
             <p id="galerie3">
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo1" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
             </p>
             <p id="galerie4">
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo1" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
             </p>
             <p id="galerie5">
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo1" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/1.jpg" title="photo1" rel="sexylightbox  "><img src="images/carte/argentine/1.jpg" alt="photo2" width="35" height="22" /></a>
                 <a href="images/carte/argentine/2.jpg" title="photo2" rel="sexylightbox  "><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
             </p>
         </td>
     </tr>
 </table>

Le css associé

Code :

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

1
2
3
4
5
6
7
#galerie1, #galerie2, #galerie3, #galerie4, #galerie5 {
     background-color:#ff0000;
     margin:0 0 0 20px;
     padding:0;
     z-index: 1;
     visibility: hidden;
 }

Et le javascript

Code :

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

<script type="text/javascript">     //<![CDATA[            function afficher(info)     {             var tooltip = document.getElementById(info);             tooltip.style.visibility = "visible";             run= true ;     }     function masquer(info)     {             var tooltip = document.getElementById(info) ;             tooltip.style.visibility = "hidden";             run= false ;     }     //]]> </script>

[Yorick]

Salut,

C'est plus un problème de JS que de CSS.
Tes galeries utilisent la propriété visibility pour masquer/afficher, il faudrait que le script joue sur la propriété display.