28220 sujets

CSS et mise en forme, CSS3

Problème de marge

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

avec padding-bottom tu vas peut-être avoir plus de chance Smiley cligne
sinon, tu peux mettre le margin-bottom sur l'élément body...
Modifié par SuD (17 Jan 2006 - 15:07)
J'ai testé en mettant les marges dans les propriétés du body mais ça ne change rien, ça ne veut pas faire le décalage en bas de page.
J'ai essayé de même avec padding et ça ne veut pas quand même, je comprends vraiment pas pourquoi ça marche pas.
J'avais pas vu, le problème vient du fait que tu as défini le div principal en potition relative. Je pense pas que ce soit très utile dans ton cas.

remplace : 
position : absolute;

par : 
position : relative;


tu verras que ça résoud le problème, mais il te faudra faire des petits changements ailleurs pour que le rendu soit le même.
Modifié par SuD (17 Jan 2006 - 17:27)
Même en changeant le type de positionnement du div principal en relative, cela ne change rien tout reste positionné de la même manière.

Sinon, pourquoi le fait de définir le div principal en absolute empêche le bon fonctionnement de la marge en bas ?
En fait, tu avais raison j'avais un petit problème de MAJ entre le fichier sur le serveur et celui sur mon ordinateur.
En mettant plaçant le div principal en relative, ça marche et ça ne change pas le reste du placement.

Sinon, tu pourrais me dire pourquoi le margin-bottom ne fonctionnait pas en absolute ?
Sujet clos
Aller à