Texte sous une image

Version imprimable

Bonjour,

Voilà je suis actuellement sur un petit projet (assez simple je pense) qui consite à afficher un ensemble d'images sur une page web en fonction d'une liste.

Ce je je souhaite faire c'est de mettre sous chaque photo, l'année que la photo a été prise, et à la ligne un intitumlé concernant la photo.

Ci dessous mon code html et les css associés

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
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		Album
	</title>
	<link rel="stylesheet" type="text/css" href="base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="modele05.css" media="screen" />
</head>
<body>
<div id="global">
	<div id="entete">
		<h1>
			<img alt="" src="twitter_32.png" />
			<img alt="" src="facebook_32.png" />
			<img alt="" src="facebook_32.png" />
			My Album
		</h1>
	</div><!-- #entete -->
	<div id="navigation">
		<ul>
			<li><a href="index.html">Mes Photos</a></li>
			<li><a href="liste.html">Top Photos</a></li>
			<li><a href="utiliser.html">2000-2010</a></li>
			<li><a href="utiliser.html">2010-2011</a></li>
			<li><a href="licence.html">2011-2012</a></li>
			<li><a href="credits.html">2012-2013</a></li>
			<li><a href="credits.html">2013-2014</a></li>
			<li><a href="credits.html">Famille</a></li>
			<li><a href="credits.html">Amis</a></li>
			<li><a href="credits.html">Divers</a></li>
			<li><a href="credits.html">Archives</a></li>
		</ul>
	</div><!-- #navigation -->
	<div id="contenu">
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<img alt="" src="pictures/picture_2.png" />
			<img alt="" src="pictures/picture_3.png" />
			<img alt="" src="pictures/picture_4.png" />
			<img alt="" src="pictures/picture_5.png" />
			<img alt="" src="pictures/picture_6.png" />
			<img alt="" src="pictures/picture_7.png" />
			<img alt="" src="pictures/picture_8.png" />
			<img alt="" src="pictures/picture_9.png" />
			<img alt="" src="pictures/picture_1.png" />
			<img alt="" src="pictures/picture_2.png" />
			<img alt="" src="pictures/picture_3.png" />
			<img alt="" src="pictures/picture_4.png" />
			<img alt="" src="pictures/picture_5.png" />
			<img alt="" src="pictures/picture_6.png" />
			<img alt="" src="pictures/picture_7.png" />
			<img alt="" src="pictures/picture_8.png" />
			<img alt="" src="pictures/picture_9.png" />
		</figure>
</div><!-- #global -->
</body>
</html>

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
body {
	color: #F0E39E;
	background: black; /*background: #2C2F22;*/
}
a {
	color: #FF6533;
}
a:hover, a:focus {
	color: #FF4C00;
}
 
/* Global */
#global {
	color: orange; /*color: #F0E39E;*/
	background: black; /* Voir -> Note 1 ci-dessous background: #181A12;*/
}
 
/* Navigation */
#navigation {
	background: black;
}
#navigation a {
	color: white;
}
#navigation a:hover, #navigation a:focus {
	background: #2165BC;
	border-radius: 5px 5px 5px 5px;
}
 
/* Contenu principal */
#contenu {
	/*color: #363B29;*/
	background: #303030;
	width: 90%;
	float: right;
	margin-top: 25px;
}
#contenu img {
	padding-top: 25px;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom: 25px;
}
#contenu a {
	/*color: #332510;*/
}
#contenu a:hover, #contenu a:focus {
	/*color: #6E5122;*/
}
#contenu strong {
	/*color: white;*/
}
 
 
/* --- POSITIONNEMENT --- */
 
/* Page */
body {
	/*padding: 30px 50px 30px 50px; /* -> 2 */
	padding: 0; /* -> 2 */
}
#global {
	width: 100%; /* -> 3 */
	overflow: hidden; /* -> 3 */
}
 
/* En-tête */
#entete {
	/*padding: 20px;*/
	padding: 10px 0px 20px 20px;
}
#entete h1 {
	margin: 0;
}
#entete h1 img {
	float: right;
	margin: 3px 10px 3px 10px
	/*margin: 7px 20px 10px 0;*/
}
/*#entete .sous-titre {
	margin: 4px 0 15px 0;
}*/
 
/* Menu de navigation */
#navigation {
	width: 10%; /* -> 4 */
	float: left;
}
#navigation ul {
	margin: 0;
	padding: 10px 10px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 11%; /* -> 5 */
	padding: 10px 5px 10px 5px;
	line-height: 1.5;
	font-size: 1em;
	text-decoration: none;
}
 
/* Contenu */
/*#contenu {
	/*margin-left: 0; /* -> 6 */
	/*padding: 50px 20px 10px 10px;*/
/*}*/
#contenu > :first-child {
	margin: auto;
}
/*#contenu p, #contenu li {
	line-height: 1.5;
}*/

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
html {
	font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
body {
	margin: 0;
	padding: 10px 20px; /* Note -> 2 */
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; /* 3 */
	font-size: .8em; /* -> 4 */
	line-height: 1.25; /* -> 5 */
	color: black;
	background: black;
	font-size: 100%;
}
 
/* Titres */
/*h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0; /* -> 6 */
}
/*h1, h2 {
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-weight: normal;
}*/
/*h1 {
	font-size: 3em;
	font-style: italic;
}*/
/*h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}*/
 
/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}
ul {
	list-style: square;
}
li {
	margin: 0;
	padding: 0;
}
 
/* Paragraphes */
p {
	margin: .75em 0;
}
li p, blockquote p {
	margin: .5em 0;
}
 
/* Citations */
blockquote, q {
	font-size: 1.1em;
	font-style: italic;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
	margin: .75em 0 .75em 24px;
}
cite {
	font-style: italic;
}
 
/* Liens */
a {
	color: mediumblue;
	text-decoration: underline;
}
a:hover, a:focus {
	color: crimson;
}
a img {
	border: none; /* -> 10 */
}
 
/* Divers éléments de type en-ligne */
em {
	font-style: italic;
}
strong {
	font-weight: bold;
	color: white;
}
 
 
/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */
 
pre, code {
	font-size: 100%;
	font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;
}
pre {
	width: 90%;
	overflow: auto;
	overflow-y: hidden;
	margin: .75em 0;
	padding: 12px;
	background: #eee;
	color: #555;
}
pre strong {
	font-weight: normal;
	color: black;
}
#copyright {
	margin: 20px 0 5px 0;
	text-align: right;
	font-size: .8em;
	color: #848F63;
}
#copyright a {
	color: #848F63;
	text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
	text-decoration: underline;
}

Les images se situent dans le contenu je les positionnes assez simplement comme vous pouvez le constater. Mais j'ai cherché pas mal sur le forum et je n'ai rien trouvé. Si vous pouviez m'aider ?

Merci d'avance

20/03/2014, 16h56
Astoumix
Bonjour,

Utilise les balises <figure> et <figcaption>
Code:

1 2 3 4 <figure> <img src="image.jpg" alt="" /> <figcaption>Légende</figcaption> </figure>
Une balise <figure> pour une image.

Merci de ta réponse. Justement j'avais testé cette solution mais bizarement la légende ne se place pas tout à fait sous l'image mais à droite.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		Album
	</title>
	<link rel="stylesheet" type="text/css" href="base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="modele05.css" media="screen" />
</head>
 
<body>
 
<div id="global">
 
	<div id="entete">
		<h1>
			<img alt="" src="twitter_32.png" />
			<img alt="" src="facebook_32.png" />
			<img alt="" src="facebook_32.png" />
			My Album
		</h1>
	</div><!-- #entete -->
 
	<div id="navigation">
		<ul>
			<li><a href="index.html">Mes Photos</a></li>
			<li><a href="liste.html">Top Photos</a></li>
			<li><a href="utiliser.html">2000-2010</a></li>
			<li><a href="utiliser.html">2010-2011</a></li>
			<li><a href="licence.html">2011-2012</a></li>
			<li><a href="credits.html">2012-2013</a></li>
			<li><a href="credits.html">2013-2014</a></li>
			<li><a href="credits.html">Famille</a></li>
			<li><a href="credits.html">Amis</a></li>
			<li><a href="credits.html">Divers</a></li>
			<li><a href="credits.html">Archives</a></li>
		</ul>
	</div><!-- #navigation -->
 
	<div id="contenu">
			<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_2.png" />
				<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_3.png" />
				<figcaption>Légende</figcaption>
			</figure>
 
			<figure>	
				<img alt="" src="pictures/picture_4.png" />
				<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_5.png" /> 
				<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_6.png" /> 
				<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_7.png" /> 
				<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_8.png" />
			<figcaption>Légende</figcaption>				
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_9.png" />
			<figcaption>Légende</figcaption>				
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_2.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_3.png" />
			<figcaption>Légende</figcaption>
			<figure>
 
			<figure>
				<img alt="" src="pictures/picture_4.png" />
			<figcaption>Légende</figcaption>
			<figure>
 
			<figure>
				<img alt="" src="pictures/picture_5.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_6.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_7.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_8.png" />
			<figcaption>Légende</figcaption>
			</figure>
 
			<figure>
				<img alt="" src="pictures/picture_9.png" /> 
			<figcaption>Légende</figcaption>
			</figure>
 
</div><!-- #global -->
 
</body>
</html>

j'ai donc essayé de postionner via CSS le texte mais pas moyen :

Code:

1
2
3
4
5
6
 
#contenu figcaption {
	float: Left;
	font-size: 0.5em;
	color: white;
}

Est ce que #contenu figcaption c'est correct comme appelation ?

encore merci

21/03/2014, 13h46
Astoumix
Supprime ceci de ton css :
Code:

1 2 3 #contenu > :first-child { margin: auto; }
Supprime le padding sur tes images (ça fait un décalage sur ton figcaption)
Code:

1 2 3 4 5 6 #contenu img { padding-top: 25px; padding-right: 25px; padding-left: 25px; padding-bottom: 25px; }
Pour un espace entre tes images, privilégie un margin sur les figure
Code:

1 2 3 #contenu figure { margin: 10px; }
Tu peux mettre un float sur tes figure pour qu'elle soit l'une à côté de l'autre
Code:

1 2 3 #contenu figure { float: left; }
Pour mettre ton texte à droite, un simple alignement de texte à droite
Code:

1 2 3 #contenu figcaption { text-align: right; }
Et le code complet
Code:

1 2 3 4 5 6 7 8 #contenu figure { float: left; margin: 10px; } #contenu figcaption { text-align: right; }
Et normalement, tu obtiens le résultat que tu voulais. :)
25/03/2014, 16h22
nekcorp

Merci beaucoup, cela fonctionne parfaitement