Problème de div.

Version imprimable

Problème de div.

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:

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à. ;)

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:

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.

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:

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; }
http://img12.imageshack.us/img12/3351/sanstitreob.png

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

;)

21/02/2010, 23h08
Erwan31

ça ne devrait pas. Une page en ligne?
22/02/2010, 09h52
JeanJean75

Nop, désolé, c'est en local et je n'ai pas de FTP sous la main. :s
22/02/2010, 11h21
Erwan31

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

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

Code:

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à ;)

22/02/2010, 21h38
Erwan31

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

Oups !

Code:

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>

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

Code:

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:

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 :

http://img715.imageshack.us/img715/6969/sanstitreze.png

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

Merci. ;)

27/02/2010, 14h57
Erwan31

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.

Oh la grosse faute.

Corrigé !

Voilà ce que ça donne :

Code:

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:

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 :

http://img31.imageshack.us/img31/7303/sanstitrevlx.png

;)

28/02/2010, 12h28
Erwan31

Tu retombes au point de départ ^^
Tu n'as plus qu'à appliquer ce que je t'expliquais dans mon premier post ;)
28/02/2010, 17h01
JeanJean75

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 ?
28/02/2010, 18h09
Erwan31

Citation:

Envoyé par JeanJean75

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

Citation:

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.
28/02/2010, 22h34
JeanJean75

Merci ça marche. ;)