images alignées horizontalement avec légende centrée en-dessous [Résolu]

laurentSc · 23/11/2012, 18h06

Bonjour,

mon besoin est résumé dans le titre. J'ai repris le code de jreaux62 d'ici mais les images sont à la verticale...

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
<style type="text/css">
#ul_liste li { /* liste */
list-style-type:none; list-style-position:inside;
display:inline-block;
width:85px;
padding:5px;
text-align:center;
vertical-align:top;
}
#ul_liste li img { /* image */
width:85px;
}
#ul_liste li span { /* texte */
width:85px;
font-size:0.9em;
color:blue;
}
</style>
<ul id="ul_liste">
  <li> <img src="g---.jpg"></li>
  <li><span>xxx</span></li>
  <li> <img src="g---.jpg"></li>
...</ul>

Muchos · 23/11/2012, 19h08

Vous n'avez pas dû lire tout le sujet, car il donne la solution.

Si vous êtes en html5, vous pouvez reprendre son code et utiliser la balise FIGURE :

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
50
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Alignement horizontal image + légende</title>
	<style type="text/css">
body {
	text-align: center; /* Pour la démo ;) */
}
ul {
	list-style: none;
	padding: 0;
}
li {
	display: inline-block;
	width: 25%; /* Jouez avec la width ou le zoom ! */
	min-width: 218px; /* L'image ne débordera pas de la boîte \o/ */
	margin: 1ex; padding: 1ex;
	border: thin solid #333;
}
figure {
	margin: 0;
	text-align: center;
}
	</style>
</head>
<body>
<ul>
	<li>
		<figure>
			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
			<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
		</figure>
	</li>
</ul>
</body>
</html>

NOTA: les smileys dans les commentaires ne sont PAS obligatoires

En outre, si l'usage d'une liste n'est pas pertinent dans votre contexte, vous pouvez vous contenter de :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Alignement horizontal image + légende</title>
	<style type="text/css">
body {
text-align: center;
}
 
figure {
display: inline-block;
width: 25%;
min-width: 218px;
margin: 1ex;
border: thin solid #333;
}
	</style>
</head>
<body>
	<figure>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
	</figure>
 
	<figure>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
	</figure>
 
	<figure>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<figcaption>Les professionnels de l'informatique (pas toujours&nbsp;;))</figcaption>
	</figure>
</body>
</html>

laurentSc · 23/11/2012, 19h53

Alors pourquoi ça reste vertical ?

Bovino · 23/11/2012, 21h17

CTRL + F5 ?

laurentSc · 23/11/2012, 22h10

Pareil

Muchos · 24/11/2012, 01h32

Mais dites-moi, dites-moi… Ne serait-ce pas un problème de support de la propriété display:inline-block ?

Vous utilisez quel navigateur, laurentSc ?

À défaut de support, vous pourriez vous tourner vers un code comme ça (ici, j'ai mis des div : ça passe aussi) :

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
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Alignement horizontal image + légende</title>
	<style type="text/css">
div {
float: left;
width: 25%;
min-width: 218px;
margin: 1ex;
padding: 0.5ex 0;
border: thin solid #333;
text-align: center;
}
	</style>
</head>
<body>
	<div>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
	</div>
 
	<div>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
	</div>
 
	<div>
		<img alt="Developpez.com" src="http://www.developpez.net/template/images/logo.png" />
		<p>Les professionnels de l'informatique (pour bientôt&nbsp;!)</p>
	</div>
</body>
</html>

laurentSc · 24/11/2012, 10h10

Parfait Muchos.
Navigateur=IE8.

laurentSc · 26/11/2012, 14h21

Je voulais préciser que pour utiliser ton code, j'ai du le modifier un peu :

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
<style type="text/css">
div.trombi {
float: left;
width: 4%;
min-width: 100px;
margin: 1ex;
padding: 0.5ex 0;
border: 0;
text-align: center;
}
p {
font-family:Arial;
}
  </style>
<div class="trombi">
<img style="width: 79px; height: 105px;" alt=""
 src="---.jpg">
<p>bla bla</p>
</div>
<div class="trombi">
<img src="---.jpg">
<p>bla bla</p>
...

car il ne faut pas que ça touche toutes les divs...et ça a servi à faire un trombinoscope, d 'où le nom de la classe...

23/11/2012, 21h17	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 135 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 135 Points : 64 942 Points : 64 942	CTRL + F5 ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

23/11/2012, 22h10	#5
laurentSc Débutant Laurent Webmaster débutant Inscription : octobre 2006 Messages : 3 494 Détails du profil Informations personnelles : Nom : Laurent Âge : 49 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster débutant Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 3 494 Points : 1 693 Points : 1 693	Pareil __________________ Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
	00

24/11/2012, 10h10	#7
laurentSc Débutant Laurent Webmaster débutant Inscription : octobre 2006 Messages : 3 494 Détails du profil Informations personnelles : Nom : Laurent Âge : 49 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster débutant Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 3 494 Points : 1 693 Points : 1 693	Parfait Muchos. Navigateur=IE8. __________________ Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
	00

23/11/2012, 19h53	#3
laurentSc Débutant Laurent Webmaster débutant Inscription : octobre 2006 Messages : 3 494 Détails du profil Informations personnelles : Nom : Laurent Âge : 49 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster débutant Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 3 494 Points : 1 693 Points : 1 693	Alors pourquoi ça reste vertical ? __________________ Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email