[CSS 3] Positionnement pour template 3 colonnes en HTML5

kaizokou · 19/06/2011, 01h01

Je souhaite crée un template 3 colonnes du type suivant en utilisant html5 et css3.

voici le code HTML et CSS épurer que j'utilise.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

Macmillenium · 19/06/2011, 11h37

Hello,

Citation:

Envoyé par kaizokou

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.

float:left sur #leftbar, float:right sur #rightbar et overflow:hidden sur #mainpanel afin de conférer un nouveau de formatage à ce bloc.

kaizokou · 19/06/2011, 13h12

merci Macmillenium.

voila ce que j'ai fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#leftbar {
	width: 175px;
	height: 768px;
	float: left;
}
 
#rightbar {
	width: 175px;
	height: 768px;
	float: right;
}
 
#mainpanel {
	margin: auto;
	width: 655px;
}

la propriété overflow:hidden sur #mainpanel me place le block mainpanel sous les sidebar gauche et droite.

Macmillenium · 20/06/2011, 09h49

Citation:

Envoyé par kaizokou

la propriété overflow:hidden sur #mainpanel me place le block mainpanel sous les sidebar gauche et droite.

Tu l'as peut-être mal intégré...

Voici un exemple avec les 3 solutions possibles

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<title>template2</title>
 
<style>
body {
   width: 1024px;
   height :768px;
}
 
header {
	border : 5px solid red;
	width : 655px;
    height :140px;
}
 
nav {
	border: 3px solid #222;
}
 
#leftbar {
	float:left;
	width: 175px;
	height : 368px;
}
 
#rightbar {
	float:right;
	width: 175px;
	height : 368px;
}
 
.solution1 { 
	overflow:hidden
}
 
.solution2 { 
	margin:0 181px 
}
 
.solution3 { 
	width:662px;
	margin:auto
}
 
#mainpanelbody{
	width : 255px;
}
 
footer {
	border : 5px solid green;
	width : 255px;
}
</style>
</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" class="solution1">
	<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>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email