Bonjour,
J'ai fait la mise en page suivante :
<!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 :
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.
