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
|
<html>
<head>
<meta charset="utf-8" />
<title>ma page</title>
<style>
body {
margin: 0;
}
html, body {
height: 100%;
}
/*En tête*/
#headerdiv {
width:100%;
height:6%;
background-color: red;
text-align: center;
padding: 5px 0px;
color:white;
font-size: 20;
}
#container {
min-height: 100%;
margin-bottom: -50px;
position: relative;
}
#footer {
font-family: helvetica;
text-align: center;
color: white;
padding: 10px;
background-color:blue;
position: relative;
height:30px;
}
#clearfooter {
height: 30px;
clear: both;
}
div#contenu {
background-color:yellow;
width:92%;
margin:0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="headerdiv">
Mon titre
</div>
<div id="contenu">
Mon contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed arcu non leo vestibulum adipiscing. Suspendisse nec quam eget ante rhoncus posuere eu ac diam. Proin a magna mi. Maecenas leo nulla, ultrices id bibendum quis, euismod eget turpis. Maecenas at ante ac augue luctus luctus. Nam adipiscing, nibh eu mollis eleifend, magna lectus tempus dui, vitae placerat ipsum nisi sit amet ante. Duis tincidunt lacus at tortor eleifend non pharetra elit convallis.
Suspendisse ultrices odio a turpis tempus aliquet. Aliquam malesuada tellus eget justo tempor sed lobortis ante facilisis. Sed faucibus felis at urna consequat pellentesque. In consectetur, augue tincidunt commodo adipiscing, justo orci pharetra leo, vitae ultrices diam nisi ut neque. Nullam non orci purus. Aenean non quam vitae velit volutpat iaculis. Vestibulum sit amet purus magna, id mollis nisl. Aenean viverra arcu quis mauris fringilla aliquet. Sed odio tortor, fringilla quis venenatis id, facilisis vitae tellus. Integer feugiat, eros id tincidunt cursus, odio mauris elementum est, id convallis dui mi tristique ligula. Aenean iaculis porttitor nisl eget euismod. Phasellus congue faucibus purus, ut fermentum libero sollicitudin at. Curabitur quis venenatis mauris. Integer in ante lectus.
Etiam urna urna, tempus at tristique vitae, tristique at libero. Aenean varius, lectus non viverra tempor, risus mi facilisis mauris, varius blandit lorem ipsum ut dui. Suspendisse nec dui nec nisl convallis aliquet ut eu erat. Quisque ut nunc eget mi semper eleifend vitae ac justo. Nunc imperdiet magna eget lacus mattis id commodo felis venenatis. Quisque hendrerit mauris et nisi adipiscing posuere. Aliquam erat volutpat. Praesent molestie, augue sit amet pharetra tincidunt, ipsum mauris consectetur diam, et iaculis diam nisi non est.
Donec eleifend tellus quis urna vulputate sodales. Donec ornare lectus volutpat tellus tempor varius. Aliquam erat volutpat. Nunc hendrerit purus eget justo rhoncus in ornare neque commodo. Donec augue dolor, auctor id convallis sit amet, hendrerit eget tortor. Pellentesque sit amet dui quis tellus pellentesque sempe
</div>
<div id="clearfooter"></div>
</div>
</div>
<div id="footer">Informations légale - Copyright - Notice légale - Charte d'utilisation</div>
</body>
</html> |
Footer et marges horizontales
Répondre avec citation
Partager