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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS]Mise en page</title>
<meta name="Author" content="NoSmoking">
<style>
html,body {
margin:0;
padding:0;
height:100%;
background:#F3F3F3;
font:1em/1.25 "Trebuchet MS",Verdana,sans-serif;
}
#main {
width:60em;
margin:0 auto;
background:#FFF;
overflow:auto;
}
.header h1 {
margin:0;
padding:0.5em 1em;
color:#069;
text-shadow:1px 1px 0 #FFF;
background:#E1E4F2;
}
.article {
float:left;
overflow:hidden;
margin:0 2em 2em 1em;
width:60%;
}
.section {
margin:0 0.5em;
}
.aside {
padding:1em;
}
.aside h1 {
font-size:1.25em;
color:#069;
text-align:center;
}
.section img,.aside img {
display:block;
margin:auto;
max-width:100%;
}
.auteur {
font-size:0.9em;
font-style:italic;
color:#069;
}
ul {
list-style-type:disc;
margin:0;
}
.footer {
clear:both;
background:#E1E4F2;
min-height:2em;
font:italic 0.8em/1 Verdana,sans-serif;
padding: 0.5em;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1>[CSS]Mise en page simple</h1>
</div>
<div class="article">
<div class="section">
<h1>Club d'entraide</h1>
<img src="http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg" alt="Club d'entraide">
<p class="auteur">By: www.faux-texte.com</p>
<p>Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</p>
<p>Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</p>
</div>
<div class="section">
<h1>Les forums</h1>
<img src="http://cyberzoide.developpez.com/misc/background01-800x600.jpg" alt="Les forums">
<p class="auteur">By: www.faux-texte.com</p>
<p>Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.</p>
<p>Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.</p>
<p>Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.</p>
</div>
</div>
<div class="aside">
<h1>Mes faux amis</h1>
<img src="http://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1401036420" alt="NoSmoking">
<ul>
<li>Quapropter a natura mihi videtur potius quam ab</li>
<li>Et quoniam mirari posse quosdam peregrinos</li>
<li>Et olim licet otiosae sint tribus pacataeque</li>
<li>Denique Antiochensis ordinis vertices sub uno</li>
<li>Nec minus feminae quoque calamitatum participes</li>
<li>Thalassius vero ea tempestate praefectus praetorio</li>
<li>Eius populus ab incunabulis primis ad usque</li>
<li>Illud tamen te esse admonitum volo, primum ut</li>
<li>Excitavit hic ardor milites per municipia plurima,</li>
<li>Post quorum necem nihilo lenius ferociens Gallus</li>
<li>Ultima Syriarum est Palaestina per intervalla</li>
<li>Nihil morati post haec militares avidi saepe</li>
<li>Quam ob rem id primum videamus, si placet,</li>
<li>Haec dum oriens diu perferret, caeli reserato</li>
<li>Homines enim eruditos et sobrios ut infaustos et</li>
</ul>
</div>
<div class="footer">
<p><FOOTER>Je vous le concède, c'est un footer de me**e!</FOOTER></p>
</div>
</div>
</body>
</html> |
