Alignement de photos (Galerie)

**terry90** · 22/06/2009, 19h04

Bonjour,
Je suis en train de faire une galerie pour mon site et je n'arrive pas à aligner mes photos.

Voici mon code:

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
	<div id="galerie" style="margin-left:150px;">
 
		<div id="image1"style="max-width: ">
		<img src="galerie/image2.JPG" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
			<div style="text-align: center;">
		<form name="form1" method="GET" action="galerie.php">
		<input name="im1" type="submit" value=>
		</form>
			</div>		
		</div>
 
		<div id="image1"style="max-width: ">
		<img src="galerie/image1.JPG" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
			<div style="text-align: center;">
		<form name="form1" method="GET" action="galerie.php">
		<input name="im2" type="submit" value=>
		</form>
			</div>		
		</div>
		<div id="image1"style="max-width: ">
		<img src="galerie/image3.JPG" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
			<div style="text-align: center;">
		<form name="form1" method="GET" action="galerie.php">
		<input name="im3" type="submit" value=>
		</form>
			</div>		
		</div>
</div>

Voici mon site : http://restaurant-les-terrasses.com/galerie.php

**12monkeys** · 22/06/2009, 20h09

Bonsoir

Tu veux les aligner comment tes photos ? Horizontalement ? Donc les unes à coté des autres ?

**terry90** · 22/06/2009, 20h55

Oui, mais je ne veux pas faire de tableau, j'aimerais qu'elles s'adaptent selon la résolution, qu'elles aillent à la ligne s'il le faut.

**12monkeys** · 22/06/2009, 21h09

Oui tu as raison de faire sans tableaux. Un exemple en listes non ordonnées :

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
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
ul li { float:left; }
</style>
</head>
 
<body>
 
<ul>
  <li>
	<img src="img.jpg" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
	<div style="text-align: center;">
	  <form name="form1" method="GET" action="galerie.php">
	    <input name="im1" type="submit" value="d">
	  </form>
	</div>
  </li>
  <li>
	<img src="img.jpg" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
	<div style="text-align: center;">
	  <form name="form1" method="GET" action="galerie.php">
	    <input name="im1" type="submit" value=>
	  </form>
	</div>
  </li>
  <li>
	<img src="img.jpg" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
	<div style="text-align: center;">
	  <form name="form1" method="GET" action="galerie.php">
	    <input name="im1" type="submit" value=>
	  </form>
	</div>
  </li>
  <li>
	<img src="img.jpg" alt="Salle du restaurant" style="max-width: ; border: 2px solid black; margin:10px;">
	<div style="text-align: center;">
	  <form name="form1" method="GET" action="galerie.php">
	    <input name="im1" type="submit" value=>
	  </form>
	</div>
  </li>
</ul>
 
</body>
</html>

**terry90** · 22/06/2009, 21h18

Merci, ça marche mais n'y a t-il pas moyen de faire la même chose sans utiliser les listes à puces ???

Résultat>>> http://restaurant-les-terrasses/galerie.php

**12monkeys** · 22/06/2009, 21h23

Pourquoi ne pas utiliser de liste à puce ? Ah oui j'ai compris

tu as l'affichage de la puce, que tu peut supprimer avec :

Code :

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

ul { list-style-type:none; }

Tu peut aussi le faire avec des div, c'est juste une question de sémantique, une div est neutre d'un point de vue sémantique, alors que les listes indiquent que tu utilises une liste (menu, suite d'images...)