Problème de div.

**JeanJean75** · 21/02/2010, 22h10

Bonsoir,

J'ai codé une sorte de petite galerie photo fait à partir des images que contient un dossier. Jusque là tout va bien. Mais j'aimerais pouvoir rajouter quelques petits renseignements sous l'image. A la place de ces renseignements, j'ai mis test pour travailler un peu la mise en place des div.

Code :

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

1
2
3
4
5
6
7
8
                               <div class="galerie1">
					<div>
						<img src="'.$photo_tmp.'" width="'.$largeur.'" height="'.$hauteur.'" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;">
					</div>
					<div>
						test
					</div>
				</div>

J'ai affecté en CSS à la class galerie1 un float:left.

J'ai trois soucis :

- Les photos ne sont plus dans le cadre gris.
- La dernière image qui se balade un peu.
- Je souhaiterais que les photos soit aligné par le bas et non par le haut.

Voilà.

**Erwan31** · 21/02/2010, 22h25

Bonsoir,
pour le cadre gris c'est normal puisqu'un élément flottant sort du flux normal vis à vis de son bloc conteneur pour le calcul de sa hauteur?
Solution: on overflow:hidden sur le conteneur
Pour la dernière photo un clear:left devrait régler le problème.
Si tes photos ayant un plus petite hauteur ont toute la même hauteur, ajoute leur une marge haute pour les caller en bas.

Après ta galerie devrait être balisé comme ceci:

Code :

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

1
2
3
4
5
    <ul> 
        <li><img src="images/photo1.png" alt="" height="" width="" /><p>Descriptif</p></li> 
        <li><img src="images/photo2.png" alt=""  height="" width="" /> <p>Descriptif</p></li> 
...
    </ul>

Avec un alt vide si le test est bien un descriptif.

**JeanJean75** · 21/02/2010, 23h02

Merci de ta réponse rapide.

Je t'avoue que le CSS n'est pas vraiment mon fort.

J'ai retapé un peu le code HTML/CSS, voilà ce que ça donne :

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
#galerie_photo{
	width:750px;
	height:100%;
	border:1px dashed #CCC;
	padding:20px;
}
 
#galerie{
	list-style-type:none;
	margin-left:0;
	overflow:hidden;	
}
 
.photo_gal{
    float:left;
}