Mise en page DIV CSS

**Rifton007** · 01/05/2009, 14h41

Bonjour à vous tous et merci d'avance de votre aide.
J'ai beau lire les tutoriaux sur Developpez.com.
Mais je n'arrive pas à résoudre ce simple probléme.

J'ai trois DIV

DIVA, DIVB et DIVC

DIVB à une largeure fixe de 1020px et doit être centrer par rapport au navigateur.

DIVA et DIV sont les DIV latéraux gauche et droit et j'aimerais qu'il remplisse l'espace vide laisse sur les coté par DIVB.

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
<style type="text/css">
<!--
#A {
	background-color: #F00;
	float: left;
}
 
#B {
	background-color: #00F;
	width: 1020px;
	float: left;
	margin-right: auto;
	margin-left: auto;
}
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	text-align: center;
}
 
#C {
	background-color: #0F0;
	float: left;
}
-->
</style>

J'ai réussi à faire cela sur une page de test simple.
Et voici le site, pour avoir une idée de quoi je parle. Merci à vous.
http://www.delightfactory.eu/

Merci encore.
J'aurais encore une petite question et je la poserais aprés si ça dérange pas.

**Macmillenium** · 01/05/2009, 15h01

Bonjour,

Selon le code CSS, les deux divs A et C ont un la même couleur du background #F00 ... autant la mettre directement sur le body !
Attention à la taille de ton conteneur 1020px c'est un peu trop et provoque l'apparition d'une scrollbar horizontale dans le cas des résolutions 1024 par exemple.

**Rifton007** · 01/05/2009, 15h07

Merci de la réponse, mais DIVA et DIVB ont deux couleurs distinct.
Et pour la largeur de DIVC je vais revoir ça.

Mais le probléme se pose pas là, c'est juste une page de test pour la mise en page. Ce que je veux c'est remplir à l'aide de mes Div A et B les espaces latéraux vide laisser par la DIV 1020 avec largeur fixe de 1020px.

Merci

**Macmillenium** · 01/05/2009, 15h25

Une solution ...

Code css :

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
 
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	text-align: center;
}
 
#A {
	background-color: #F00;
	position:absolute;
	width:50%;
	left:0;
	z-index:1;
	top:0;
	height:100%;
}
 
#C {
	background-color: #0F0;
	position:absolute;
	width:50%;
	right:0;
	z-index:1;
	top:0;
	height:100%;
}
 
#B {
	background-color: #00F;
	width: 900px;
	position:relative;
	z-index:2;
	margin-right: auto;
	margin-left: auto;
}

**Rifton007** · 01/05/2009, 16h47

Mille fois merci de ta précieuse aide.
Je suis arrivé à un résultat assez convainquant.
Juste petit bémole que je n'arrive pas à résoudre.

Mes DIV latéraux A et C n'occupe pas toute la hateur disponible.
Tu peux voir à ta droite que la DIV C s'arrête, malgré sont height:100%;

http://www.delightfactory.eu/

Encore merci

**Macmillenium** · 02/05/2009, 12h58

Envoyé par Rifton007

Tu peux voir à ta droite que la DIV C s'arrête, malgré sont height:100%;

Oui, les deux blocs se limitent à la hauteur du viewport, je n'avais pas fais attention à ce point.
Cependant, comme l'objectif est seulement décoratif, tu peux tenter le positionnement fixed avec le correctif IE6-

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Sans nom</title>
	<style type="text/css">
                html, body {
                        margin: 0px;
                        padding: 0px;
                        height: 100%;
                        text-align: center;
                }
                 
                #a {
                        background-color: #F00;
                        position:fixed;
                        width:50%;
                        left:0;
                        z-index:1;
                        top:0;
                        height:100%;
                }
                
                #b {
                        background-color: #00F;
                        width: 900px;
                        position:relative;
                        min-height:100%;
                        z-index:2;
                        margin-right: auto;
                        margin-left: auto;
                }
                 
                #c {
                        background-color: #0F0;
                        position:fixed;
                        width:50%;
                        right:0;
                        z-index:1;
                        top:0;
                        height:100%;
                }
        </style>
 
	<!--[if lte IE 6]>
	<style type="text/css">
		#a, #c {
			position: absolute;
			top :expression(CorrectIE6 = - this.offsetHeight + document.documentElement.clientHeight + document.documentElement.scrollTop + "px" );
		}
	</style>
	<![endif]-->
 
</head>
 
<body>
 
 
<div id="a">&nbsp;</div>
<div id="b">
	bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla <br />bal bla
</div>
<div id="c">&nbsp;</div>
 
</body>
</html>

Il reste encore une solution qui consiste à retirer le conteneur du flux soit avec position:absolute soit position:fixed mais fortement déconseillé pour des risques d'inaccessibilité visuelle.

**Rifton007** · 02/05/2009, 13h37

Merci de ton aide elle me cera surement trés utile et me permettra de terminer le projet.

Encore merci, chokran ;-)

Mise en page DIV CSS

CSS

Discussions similaires

Partager

Partager