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;
}

Les photos sont dans le cadre gris, cependant, elles ne sont plus alignés, mais en colonnes. :/

**Erwan31** · 21/02/2010, 23h08

ça ne devrait pas. Une page en ligne?

**JeanJean75** · 22/02/2010, 09h52

Nop, désolé, c'est en local et je n'ai pas de FTP sous la main. :s

**Erwan31** · 22/02/2010, 11h21

Dans ce cas tu dois fournir la totalité des code (HTML et CSS)

**JeanJean75** · 22/02/2010, 13h02

Alors la totalité du code HTML / CSS de cette page :

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
#corp_galerie_photo{
	width:750px; 
	height:100%; 
	margin-top:-8px; 
	font-family:Calibri;
	font-size:14px;
}
 
#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;
}

Voilà

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

Tu donnes le code non interprété (PHP) et non HTML

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

Oups !

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Expose ta mode - Galerie photo</title> 
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> 
</head> 
 
<body> 
	<div id="corp_galerie_photo"> <!-- Corp de la page --> 
    	<div id="ajouter-image-baniere"> <!-- Bannière de la page --> 
        </div> 
		<div id="galerie_photo"> 
		<span class="sous_titre_bleu" style="font-size:18px;">Vos photos :</span><br /><br /> 
 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_1.jpg" width="100" height="75" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_2.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_3.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_4.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_5.png" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_6.png" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_7.png" width="100" height="14.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul> 
				<ul id="galerie"> 
					<li class="photo_gal"> 
						<img src="photos/Jean/photo_8.jpg" width="67.25" height="100" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
						test
					</li> 
				</ul>		</div> 
    </div> 
</body> 
</html>

**JeanJean75** · 27/02/2010, 10h14

En m'inspirant d'un tuto j'ai réussi à faire ça :

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
 
#corp_galerie_photo{
	width:750px; 
	height:100%; 
	margin-top:-8px; 
	font-family:Calibri;
	font-size:14px;
}
 
#galerie_photo{
	width:750px;
	height:100%;
	border:1px dashed #CCC;
	padding:20px;
}
 
#vignette{
    list-style-type:none;
	float:left;
	overflow:hidden;
}

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<body> 
	<div id="corp_galerie_photo"> <!-- Corp de la page --> 
    	<div id="ajouter-image-baniere"> <!-- Bannière de la page --> 
        </div> 
		<div id="galerie_photo"> 
		<span class="sous_titre_bleu" style="font-size:18px;">Vos photos :</span><br /><br /> 
 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_1.jpg" width="100" height="75" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_2.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_3.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_4.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_5.png" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_6.png" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_7.png" width="100" height="14.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div> 
				<div id="galerie"> 
					<ul id="vignette"> 
						<li> 
							<img src="photos/Jean/photo_8.jpg" width="67.25" height="100" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
							test
						</li> 
					</ul> 
				</div>		</div> 
    </div> 
</body>

Voilà ce que ça donne :

Cependant, si je met un overflow:hiden; j'ai le même résultat que précédément.

Merci.

**Erwan31** · 27/02/2010, 14h57

Bonjour,
tu ne devrais pas avoir un UL par photo mais un LI par photo!
D'ailleurs le float left tu le met sur le LI et non l'UL.

**JeanJean75** · 28/02/2010, 11h15

Oh la grosse faute.

Corrigé !

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
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
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Galerie photo</title> 
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" /> 
</head> 
 
<body> 
	<div id="corp_galerie_photo"> <!-- Corp de la page --> 
    	<div id="ajouter-image-baniere"> <!-- Bannière de la page --> 
        </div> 
		<div id="galerie_photo"> 
			<span class="sous_titre_bleu" style="font-size:18px;">Vos photos :</span><br /><br /> 
			<div id="galerie"> 
				<ul id="vignette"> 
					<li> 
									<img src="photos/Jean/photo_1.jpg" width="100" height="75" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_2.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_3.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_4.jpg" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_5.png" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_6.png" width="100" height="62.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_7.png" width="100" height="14.333333333333" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>	<li> 
									<img src="photos/Jean/photo_8.jpg" width="67.25" height="100" border="3" style="color:#FF9600; margin:0px 19px 19px 0px;"> 
									test
								</li>				</ul> 
			</div> 
		</div> 
    </div> 
</body> 
</html>

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

Voilà ce que ça donne :

**Erwan31** · 28/02/2010, 12h28

Tu retombes au point de départ ^^
Tu n'as plus qu'à appliquer ce que je t'expliquais dans mon premier post

**JeanJean75** · 28/02/2010, 17h01

Done !

J"ai ajouter un width et un height sur le li et ça fonctionne bien.

Merci.

Edit : Une petite chose. Pour aligner les images vers le bas plutôt qu'en haut je fais comment ?

**Erwan31** · 28/02/2010, 18h09

Envoyé par JeanJean75

Edit : Une petite chose. Pour aligner les images vers le bas plutôt qu'en haut je fais comment ?

Si tes photos qui ont une hauteur plus petite ont toutes la même hauteur, ajoute leur une marge haute pour les caler en bas.

Sinon position:relative sur les LI et position:absolu; bottom:0 sur les images.

**JeanJean75** · 28/02/2010, 22h34

Merci ça marche.

Problème de div.

HTML

Discussions similaires

Partager

Partager