Positionnement pour template 3 colonnes en HTML5
Je souhaite crée un template 3 colonnes du type suivant en utilisant html5 et css3.
http://kwash.free.fr/web/template.jpg
voici le code HTML et CSS épurer que j'utilise.
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>template2</title>
<link rel="stylesheet" href="style_template2.css" />
</head>
<body>
<!--Left side bar-->
<nav id=leftbar class=sidebar>
<h1>left</h1>
</nav>
<!--Right side bar-->
<nav id=rightbar class=sidebar>
<h1>right</h1>
</nav>
<section id=mainpanel>
<header id=header>
<h1>I'm the header</h1>
</header>
<nav id=menu>
<h1>I'm the menu</h1>
</nav>
<section id=mainpanelbody>
<h1>I'm the body</h1>
</section>
<footer>
<h1>I'm the footer</h1>
</footer>
</section>
</body>
</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
|
body {
width: 1024px;
height :768px;
}
header {
border : 5px solid red;
width : 655px;
height : 140px;
}
section{
border : 5px solid black;
width : 655px;
}
nav {
border: 3px solid #222;
}
nav#leftbar {
width: 175px;
height : 768px;
}
nav#rightbar {
width: 175px;
height : 768px;
}
section#mainpanelbody{
width : 655px;
}
footer {
border : 5px solid green;
width : 655px;
} |
J'ai utilisé les propriétés float left et right sur les nav#rightbar et nav#leftbar mais la section mainpanel ne se place pas correctement au milieu. J'ai essayé de corriger ce problème avec la propriété clear, je ne suis pas loin du bon résultat mais je n'ai pas trouvé la bonne combinaison.
Finalement j'ai réussi à obtenir ce que je veux en utilisant un placement absolue, mais cela ne me satisfait pas. Quelqu'un aurai t'il la solution a mon problème ?
