Comment placer un texte sous une image et cela deux fois de suite en css?

**Samix.94** · 07/02/2018, 23h10

Bonsoir,
Je fais un petit site que j'aimerais présenter en tant que projet pour un D.U.T informatique (je suis en TS).
Je ne suis qu'a mes debuts et je suis en train de faire les pages statique de mon site.
Le probleme est le suivant:Je ne sais pas comment placer un texte sous une image en css,le texte se place toujours autour de l'image...
De plus je veux mettre deux images,une a droite et une autre a gauche avec chacune comportant un petit texte juste en bas.
Voici le code html:

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
<!DOCTYPE html>
<html>
    <head>
	    <title>index info college html/Css </title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="fichier css.css">
	<body>
		<header>
		<img src="image/banniere creteil.jpg"height="200"style="width: 1600px"VSPACE="0" HSPACE="0" align=center  /> 
 
			<nav>
			<label for="menu-mobile" class="menu-mobile">Menu</label>
			<input type="checkbox" id="menu-mobile" role="button"> 
			</head>
			<ul>
				<li class="menu-acceuil"><a href="page accueil.html">ACCUEIL </a></li>
				<li class="menu-connexion"><a href="#"> connexion </a>
				</li>
				<li class="menu-inscription"><a href="#">Inscription</a>
				</li>
				<li class="menu-college"><a href="indexpageCollege html.html"> Le college Amedee Laplace </a>
				</li>
				<li class="menu-liste"><a href="#"> Les anciens eleves du college </a>	
				</li>
			</ul>
		</nav>
 
	</header><hr>
	<section>
<center>texte</center>
 
<p class="ancien"><img src="image/college 1960.jpg" alt="1960."></img></p><p>dans les annees 1960</p>
<p class="nouveau"><img src="image/college 2018.jpg" alt="2018."></img></p><p>Puis en 2018</p>
 
	</section>
	<footer>
	<hr>
	<img src="image/college pied de page.jpg"height="100"style="width: 100px"VSPACE="0" HSPACE="8" align=right  />
	<img src="image/sami.jpg" height="100" style="width: 100px;"  VSPACE="0" HSPACE="8" align=left />
	<p>Samix:Créateur du site</p>
	</footer>
	</body>
</html>

comme vous pouvez le remarquer au niveau de la section j'essaye de palcer les deux images en question et le texte qui correspond
en css:

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{
	font-family: verdana, calibri, sans-serif;
	font-size: 130%;
	margin: 	0px;
	padding: 0px;
}
nav > ul{
	margin:0px;
	padding: 0px;
}
nav li{
	list-style-type: none;
}
nav > ul > li{
	float: left;
 
}
nav input[type=checkbox]{
	display: none;
}
.menu-mobile{
	display: none;
}
nav{
	width: 100%;
	background-color: #24639C;
}
nav > ul > li{
	float: left;
	position: relative;
}
nav > ul:after{
	content: "";
	display: table;
	clear: both;
}
nav a{
	display: inline-block;
	text-decoration: none;
}
 
nav > ul > li > a{
	padding: 20px 30px;
	color: #FFF;
}
 
.menu-accueil:hover{
	border-top: 5px solid #0070bb;
	background-color: RGBa(000, 112, 192, 0.15);
}
.menu-inscription:hover{
	border-top: 5px solid #0070bb;
	background-color: RGBa(000, 112, 192, 0.15);
}
.menu-college:hover{
	border-top: 5px solid #f1dc4f;
	background-color: RGBa(241, 211, 79, 0.15);
}
.menu-connexion:hover{
	border-top: 5px solid #0070bb;
	background-color: RGBa(241, 211, 79, 0.15);
}
nav > ul > li:hover a{
	padding: 15px 30px 20px 30px;
}
 
 
body{
	font-family:Helvetica,ARIAL sans-serif;
	background:#F3EB99;
}
 
 
footer{
 
 
position:absolute;
 
bottom:;
 
width:100%;
 
padding-top:500px;
 
height:50px;
 
}
 
.ancien img {
 
width:250px;
 
height:250px;
 
}
 
p.ancien {
    float: left;
    margin: 0 10px 0 0;
 
}
p.nouveau {
	 float: right;
    margin: 0 10px 0 0;
}
.nouveau img {
 
width:250px;
 
height:250px;
 
 
}

voila je vous ai tout dit,merci d'avance

Samix.94

**ABCIWEB** · 08/02/2018, 02h43

Salut,

Déjà faudrait voir à fermer ta balise <head> avant de déclarer ta balise <body>

Pour positionner des éléments autrement qu'en ligne on utilise des balises de type bloc ex: p, div, et pour positionner des blocs en ligne on utilise le style inline-block.

Sur le principe tu pourrais faire :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<div style="text-align:center">
    <div style="display:inline-block">
        <p><img src="monimage.jpg"></p>
        <p>mon commentaire</p>
    </div>
    <div style="display:inline-block">
        <p><img src="monimage2.jpg"></p>
        <p>mon commentaire2</p>
    </div>
</div>

A noter que "text-align:center" du bloc conteneur va centrer à la fois les blocs contenus dans ce bloc et leur contenu (images et texte).

Après il y a aussi les objets flottants avec float et les tableaux pour afficher des données tabulaires, mais le principe ci-dessus est utilisé couramment pour des besoins simples comme ici.

**Samix.94** · 08/02/2018, 06h58

Re-salut,
Et bien merci ça marche mais le probleme maintenant c'est que la taille que j'avais defini pour les images dans le css n'a plus d'effet?
Pourquoi?
Mercid'avance
Samix.94

**NoSmoking** · 08/02/2018, 14h21

Bonjour,
pourquoi ne pas utiliser les balises HTML5 ?

Code html :

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

1
2
3
4
<figure>
  <img src="nom_de_l_image" alt="">
  <figcaption>Légende de l'image</figcation>
</figure>

**Samix.94** · 08/02/2018, 18h54

Oui c'est ce que j'avais fais au par avant mais mon prof d'informatique m'a dit qu'avec le html il se peut qu'avec un autre navigateur par exemple les images soit décalées.
Sayé j'ai trouvé la solution merci beaucoup!!!!!!!

Comment placer un texte sous une image et cela deux fois de suite en css?

Positionnement en CSS

Discussions similaires

Partager

Partager