[CSS] Problème de marges

**sylsau** · 17/01/2006, 13h26

Bonjour,

J'ai fait la mise en page suivante :

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
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 :

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
 
 
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.

**sylsau** · 17/01/2006, 18h13

personne n'a d'idées ?

**Nesmontou** · 17/01/2006, 20h13

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

:

**marsupix** · 19/01/2006, 02h10

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 :

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

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

**nicolas.pied** · 20/01/2006, 21h43

Deux solutions trouvées :

La 1ere

Code :

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

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 :

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

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

Voilou voilou.

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

[CSS] Problème de marges

CSS

Discussions similaires

Partager

Partager