[CSS] Problème de marges

Bonjour,

J'ai fait la mise en page suivante :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
<title>Titre a definir</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Classic" href="style1.css" />
</head>
 
<body>
 
	<div id="principal">
 
		<div id="header">
		</div>
 
		<div id="menu">
 
			<ul>
				<a href="">Menu1</a>
				<a href="">Menu2</a>
				<a href="">Menu 3</a>
				<a href="">Menu 4</a>
				<a href="">Menu 5</a>
			</ul>
 
		</div>
 
			<div id="gauche">
 
				<div id="gauche_menu1">
					<h4>Infos</h4>
					<ul>
						<li> - Info 1 </li>
						<li> - Info 2 </li>
					</ul>
				</div>
 
				<div id="gauche_menu2">
					<h4>Articles</h4>
					<ul>
						<li> - Article 1 </li>
						<li> - Article 2 </li>
					</ul>
				</div>
 
			</div>
 
			<div id="droite">
 
				<div id="droite_edito">
					<h4>Droite</h4>Msg droite
				</div>
 
			</div>
 
			<div id="corps">Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />
			</div>
 
 
		<div id="footer">
		</div>
 
	</div>
 
</body>
 
</html>

Et voici le CSS de cette page :

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
44
45
46
47
48
49
50
51
52
53
 
 
body
{
	background-image : url("./fond.png");
}
 
#principal
{
	position : absolute;
	width : 750px;
	left : 50%;
	margin-left : -375px;
	margin-top : 20px;
	margin-bottom : 20px;
	background-color : #eeeeee;
}
 
#menu
{
	text-align : center;
}
 
#menu a
{
	margin-left : 15px;
}
 
#corps
{
	margin-left: 150px;
	margin-right: 150px;	
}
 
#gauche
{
	position: absolute;
	left:0;
	width: 150px;
}
 
#gauche ul
{
	list-style : none;
	padding : 0;
}
 
#droite
{
	position: absolute;
	right:0;
	width: 150px;
}

Cette page est visible ici : http://www.webmaitrise.com/sylsau/test1.htm

Voici mon problème :
Dans le div principal, je mets un margin-bottom de 20px, et en bas de la page il n'y a pas de décalage de 20px qui apparait pour séparer le div principal du bas de la page.

Je ne comprends pas trop pourquoi le décalage ne se fait pas.
Est-ce que quelqu'un pourrait me dire comment je pourrais créer ce décalage ?

Merci d'avance de votre aide.

Sylvain.

personne n'a d'idées ?

Salut, ça ne serait pas padding-bottom plutôt que margin-bottom :?:

normalement un margin-bottom devrait marcher...
Le choix entre margin et padding dépend de où tu veut placer la limite (si l'espace libre doit etre inclu ou non)

essai plutot un padding sur le body dans ce cas.
Sinon j'ai noté quelques détails...
- Tu n'as pas mis de <li></li> dans le <ul></ul> de ton menu.
- beaucoup de position "absolute".. quel intéret?
(pour centrer horizontalement, il suffit de spécifier la width et de mettre margin:auto.

edit je viens de comprendre ton utilisation des position absolute.
Si c'est pour mettre en ligne horizontalement tes 3 colonnes:
Code:

1 2 3 4 5 6 #gauche, #centre{ float:left; } #droite{ float:right; }

Deux solutions trouvées :

La 1ere
Code:

1 2 3 4 5 6 7 8 9 #principal { //position : absolute; width : 750px; left : 50%; margin-left : -375px; margin-top : 20px; margin-bottom : 20px; background-color : #eeaeee; }
Mais la toute la structure de la page est modifiée. La balise position:absolute ne doit pas être très compatible avec le margin-bottom.

La 2nd
Code:

1 2 3 4 #footer { background-color : #ffffff; height: 20px; }
Voilou voilou.

Pour rappel padding = intérieur et margin = extérieur