28173 sujets

CSS et mise en forme, CSS3

Pb avec les floats et height

Bonjour,

J essai de mettre en place un design en css pour apprendre ^^
voila ma page !

mais j ai 2 pbs :
1er : A cause du float: left du menu #gauche le text du #centre est decalé au haut de 2 ou 3 px que sous IE
2eme : Je n'arrive pas a faire que le bas du div #center aille jusqu au pied de page

Le code : 

<!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" lang="fr"><head><title>Largeur fluide, header/menu gauche/contenu/footer.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* CSS issu des tutoriels css.alsacreations.com */
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Verdana;
	font-size: 0.95em;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}
html, body {height:100%;margin:0px;padding:0px;}
#header {
	height: 100px;
	background-color: #99CCCC;
}
#conteneur {
	min-height:100%;
	height:auto!important;
	margin:auto;
	height:100%;
	width: 90%;
	background-color:#CCCCFF;
}
#gauche {
	margin: 0px;
	padding: 0px;
	width: 150px;
	float: left;
	background-color: red;
}

#droite {
	margin: 0px;
	padding: 0px;
	width: 150px;
	float: right;
	background-color: red;
}
#centre {
	margin: 0px 150px 0px 150px ;
	padding: 3px;
	background-color:#9999CC;
}
#pied {
	width:90%;
	clear:both;/* facultatif */
	margin:auto;
	text-align:center;
	background-color:#99CC99;
	margin-top:-21px;
	height:20px;
}
</style>
</head>

<body>
<div id="conteneur">
	<div id="header">header</div>
	
	<div id="gauche">
		<p>menu<br /><br /><br /><br /><br /><br /><br /></p>
	</div>

	<div id="droite">
		<p>menu<br /><br /><br /><br /><br /><br /><br /></p>
	</div>

	<div id="centre">
		<p>
		partie avec du contenu occupant le reste de la largeur partie avec du contenu occupant le reste de la largeur partie avecdu contenu occupant le reste de la largeur<br>partie avec du contenu occupant le reste de la largeur<br>partie avec du contenu occupant le reste de la largeur<br></p>
	</div>

</div>

<div id="pied">- © 2005 2007 Pied de page -</div>

</body>
</html>


J'espere que vous aurez une petite soluce ^^
Merci bcp a ce site qui m'aide vraiment BCP :o)

See you !
Modifié par boobha (05 Mar 2006 - 17:50)
Pour ton second problème, il est normal que ton pied de page ne touche pas le reste, puisque tu as fixé la hauteur du bloc #conteneur à 100%, donc si le texte de #centre n'est pas assez long, il fera moins de 100% de la page et par conséquant n'ira pas jusqu'en bas toucher le pied de page.

Donc il suffit de supprimmer toutes les propriétés de hauteur de #conteneur (et de virer la marge négative du pied par la même occasion) :

#conteneur {
margin:auto;
width: 90%;
background-color:#CCCCFF;
}

#pied {
width:90%;
clear:both;/* pas facultatif du tout */
margin:auto;
text-align:center;
background-color:#99CC99;
height:20px;
}
Sujet clos
Aller à