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
| <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Aligner des div</title>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<style>
html, body{
margin:0;
padding:0;
font-size:100%;
font: 1em/1.5 Verdana, sans-serif;
}
table{
width:500px;
}
/* CSS Document */
* { margin:0; padding:0; }
html, body { width:100%; height:100%; min-height:100%; }
header, footer, main, nav, section, article { display:block; }
#wrapper {
width: 100%;
max-width: 1000px; /* on limite la largeur totale à la taille qu'on veut */
min-width: 640px; /* on peut aussi définir une largeur mini */
margin:0 auto;
background-color:#FF6699;
}
#bandeau {
min-height: 80px;
clear:both;
padding:10px;
background-color:#00ccff;
}
#maincontent {
display:flex;
flex-direction:row; /* en rang */
/* passage en colonnes facile avec flex-direction:column; */
width:100%;
}
#footer {
min-height: 50px;
clear:both;
padding:10px;
background-color:#00ccff;
}
#colgauche, #coldroite {
width:20%;
min-width:150px;
/* background-color:#FF6699;/* report sur le wrapper */
}
#colcentre {
width:60%;
background-color: #FFCC00;
}
#menugauche, #contenu, #menudroite {
padding:10px;
min-height:400px;
} /* blocs news */
#blocnews, #blocnews2, #blocnews3 {
padding:10px;
}
#blocnews2, #blocnews3 {
background-color:#FF3300;
}
#blocnews {
background-color:#33FF00;
}
#colgauche,
#colcentre,
#coldroite {
float:left;
}
</style>
<script>
</script>
</head>
<body>
<div id="wrapper">
<header id="bandeau">
Ceci est le bandeau
</header>
<div id="maincontent">
<div id="colgauche">
<div id="blocnews2">
Bloc News2:
<BR>Bonjour à tous
</div>
<nav id="menugauche">
menu gauche
</nav>
</div>
<div id="colcentre">
<div id="blocnews">
Bloc News:
<BR> portes ouvertes
</div>
<div id="contenu">
<p>Ceci est le contenu</p>
<p>Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.</p>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.</p>
<p>Nunc vero inanes flatus quorundam vile esse quicquid extra urbis pomerium nascitur aestimant praeter orbos et caelibes, nec credi potest qua obsequiorum diversitate coluntur homines sine liberis Romae.</p>
<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
<p>In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.</p>
</div>
</div>
<div id="coldroite">
<div id="blocnews3">
Bloc News3:
<BR>Bonsoir à tous
</div>
<nav id="menudroite">
menu droite
</nav>
</div>
</div>
<footer id="footer">
Ceci est le pied de page
</footer>
</div></body>
</html> |
Aligner des div
Répondre avec citation
Envoyé par Claudine
"display:flex css" 
Partager