Comment placer un texte sous une image et cela deux fois de suite en css?
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:
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:
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
