Texte sous une image

**nekcorp** · 20/03/2014, 14h23

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 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
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 :

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
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 :

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

**Astoumix** · 20/03/2014, 16h56

Bonjour,

Utilise les balises <figure> et <figcaption>

Code html :

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

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

Une balise <figure> pour une image.

**nekcorp** · 21/03/2014, 11h54

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 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
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 :

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

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

**Astoumix** · 21/03/2014, 13h46

Supprime ceci de ton css :

Code :

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

1
2
3
#contenu > :first-child {
     margin: auto;
}

Supprime le padding sur tes images (ça fait un décalage sur ton figcaption)

Code :

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

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 :

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

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 :

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

1
2
3
#contenu figure {
     float: left;
}

Pour mettre ton texte à droite, un simple alignement de texte à droite

Code :

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

1
2
3
#contenu figcaption {
     text-align: right;
}

Et le code complet

Code :

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

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.

**nekcorp** · 25/03/2014, 16h22

Merci beaucoup, cela fonctionne parfaitement

Texte sous une image [CSS 3]

CSS

Discussions similaires

Partager

Partager