28172 sujets

CSS et mise en forme, CSS3

Positionnement d'éléments

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
<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[galerie1]"><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[galerie1]"><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[galerie2]"><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[galerie2]"><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[galerie2]"><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[galerie2]"><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[galerie3]"><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[galerie3]"><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[galerie3]"><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[galerie3]"><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[galerie4]"><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[galerie4]"><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[galerie4]"><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[galerie4]"><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[galerie5]"><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[galerie5]"><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[galerie5]"><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[galerie5]"><img src="images/carte/argentine/2.jpg" alt="photo2" width="35" height="22" /></a>
			</p>
		</td>
	</tr>
</table>


Le css associé
#galerie1, #galerie2, #galerie3, #galerie4, #galerie5 {
	background-color:#ff0000;
	margin:0 0 0 20px;
	padding:0;
	z-index: 1;
	visibility: hidden;
}


Et le javascript
<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>

Modifié par folvool (13 Apr 2010 - 14:14)
Salut.
Le navigateur positionne tous tes paragraphes les uns en dessous des autres, et ils sont invisibles.
Donc il est tout à fait normal que celui qui s'affiche lors du onclick soit positionné à un endroit différent.
Pour qu'il s'affiche tous à la même hauteur, il faudrait que tu programmes en javascript (désolais mais je n'y connais rien) des conditions qui permettrons à partir du Onclick sélectionné par le visiteur, d' initialiser une variable avec le paragraphe qui correspond.
Donc au lieu d'avoir 5 paragraphe (id="galerie1" a 5), il n'y en aurait plus qu'un avec la bonne galerie affiché grace à ta variable.

Pour te montrer l'idée, en php çà donnerait:



<?php

$variable; // valeur  recupéré du onclick

echo '<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>';

if($variable == '1')
{
echo '<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>';
}
else if($variable == '2')
{
echo '<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>';
// etc jusqu'a galerie 5

echo '</td> 
    </tr> 
</table>';

?>


Voilà j'espère que ca va t'aider. ++
Sujet clos
Aller à