28172 sujets

CSS et mise en forme, CSS3

Parents et enfants

Bonjour,
j'ai un probleme pour inclure un enfant dans un bloc parent. Ma feuille de style

* {
padding : 0;
margin : 0;
outline : none;
}
body {
text-align: center; 
background-color: #6CF;
}
div#container {
margin:auto; 
padding:auto;
width : 1152px;
height: 600px;
font : 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color : #A81A1C;
background-image:url(/images/fond.jpg);
background-position :0px 30px;
background-repeat: no-repeat ;
border:2px solid #FFF;
}

div#pied_page {
	background-color:#A81A1C;
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	}

et mon code html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/stylesNew.css" rel="stylesheet" type="text/css" />
<title>Ma page</title>
</head>
<body>
	<div id="container">
		<div id="pied_page">
        	      Ceci est le pied de page
                </div>
    </div>
</body>
</html>


Je suis obligé de définir des positions sinon mon enfants n'est pas dans "container".

Merci de votre aide
Bonjour,

Si tu positionnes ton pied de page en absolu, il est tout à fait normal qu'il «sorte» de son conteneur (c'est à dire que le conteneur va agir comme si cet enfant n'était plus là, en particulier pour le calcul de sa propre hauteur).

Si tu veux placer ton pied de page en absolu par rapport aux limites de son conteneur, il faut que le conteneur soit lui-même positionné. Il peut être positionné en absolu (pas intéressant ici à priori) ou en relatif (un simple position:relative sans chercher à déclarer l'élément avec des top, left, etc.).
Sujet clos
Aller à