[CSS 3] Template 3 colonnes - problème d'étirement des sidebars

kaizokou · 12/11/2011, 11h43

Bonjours à tous,

Je recode un site fais avec des tableaux en utilisant du HTML5 et le positionnement du CSS3.

J'ai besoin d'un template comme celui-ci :

J'ai obtenu ce résultat avec le code suivant :

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
 
<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<title>gabarit3col</title>
<link rel="stylesheet" href="stylegab.css" />
</head>
 
<body>
	<!--Left side bar-->
	<nav id="leftbar" class="sidebar"></nav>
 
	<!--Right side bar-->
	<nav id="rightbar" class="sidebar"></nav>
 
	<section id="mainpanel">
		<header id="header">Header</header>
		<nav id="menu">Menu</nav>
		<section id="mainpanelbody"></section>
		<footer> </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 : 100%;
	border: 3px solid red;
	background-color: #3b0046;
	padding: 0;
	font-family: Helvetica, sans-serif, Geneva, Arial;
 
	/** Pour center le site**/
	text-align: center;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
 
#leftbar {
	width: 175px;
	float: left;
	background: url("img/progbgleft.gif") repeat-y;
	border: 3px solid orange;
}
 
#rightbar {
	width: 175px;
    float: right;
	background: url("img/progbgright.gif") repeat-y;
	border: 3px solid pink;
}
 
#mainpanel {
	overflow: hidden;
	margin: auto;
	width: 655px;
	border: 3px solid green;
}
 
header {
	height: 140px;
}

Mon problème c'est les deux sidebars ne s'étendent jusqu'au bas de la page. J'ai lu plusieurs tutoriel proposant diverses solutions mais aucune ne fonctionne.

voici ce que j'obtient :

NoSmoking · 12/11/2011, 23h04

Bonsoir,
associes html à body

Code :

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

1
2
3
4
html, body {
  width : 1024px;
  height : 100%;
}

et testes en ajoutant également des height:100%; à tes sidebars

kaizokou · 13/11/2011, 12h13

Bonjour et merci de ton aide NoSmoking.

Malheuresement cela ne fonctionne pas, je ne me souvient plus exactement mais il me semble avoir lu que la propriété float change la façon donc un block hérite ses attributs du block parent. Si quelqu'un à une vrai explication je ne suis pas contre

J'ai essayé une solution de type faux-colonnes mais cela ne m'a pas convaincu, ou alors je l'ai mal implémenté je ne sais pas.

Une autre suggestion ?

Emyleen · 14/11/2011, 17h21

J'ai une petite astuce qui consiste à créer une div comme ceci:

Code html :

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

<div class="ajusteur"></div>

et à lui appliquer le style suivant :

Code css :

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

1
2
3
4
5
.ajusteur {
    clear: both;
    margin: 0;
    padding: 0;
}

ça me permet de régler tout mes problèmes de flottant, je la met quand je veux que 2 div aient la même hauteur.
Mais peut être que ça ne résoudra pas le problème de 3 colonnes :s

13/11/2011, 12h13	#3
kaizokou Invité régulier Inscription : août 2009 Messages : 18 Détails du profil Informations forums : Inscription : août 2009 Messages : 18 Points : 9 Points : 9	Bonjour et merci de ton aide NoSmoking. Malheuresement cela ne fonctionne pas, je ne me souvient plus exactement mais il me semble avoir lu que la propriété float change la façon donc un block hérite ses attributs du block parent. Si quelqu'un à une vrai explication je ne suis pas contre J'ai essayé une solution de type faux-colonnes mais cela ne m'a pas convaincu, ou alors je l'ai mal implémenté je ne sais pas. Une autre suggestion ?
	00

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