28172 sujets

CSS et mise en forme, CSS3

[Résolu] Un footer qui se prend pour un header...

Bonjour à tous,

Cela fait plusieurs jours que je cherche une solution à ce problème : mon footer apparaît dans mon header. Pour mieux comprendre : aperçu

J'ai volontairement épuré la page, et mis des couleurs pour chercher l'erreur. La zone en question est le footer vert : il démarre juste sous le header, alors que je le voudrais logiquement sous le milieu (menu + contenu).

Edit 05/08 : résolu, il faut enlever les float quand les float inutiles pour certains blocs

Voilà le code :

XHTML
<!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">
<head>
	<title>Test2</title>
	<link href="./templates/default/styles/test2.css" rel="stylesheet" type="text/css" media="screen" />	
</head>

<body>

	<div id="page">		
		<div id="header">
			<p>header</p>
		</div>
		<div id="milieu">
			<p>milieu</p>
			<div id="menu">
				<p>> menu</p>
				<p>> menu</p>
				<p>> menu</p>
			</div>
			<div id="contenu">
				<p>contenu</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>&nbsp;</p>
				<p>contenu</p>
			</div> 
		</div>
		<div id="footer">			
			<p>footer</p>			
		</div>		
	</div>
	
</body>
</html>


CSS

body {
	width : 50%;
	margin-left : auto;
	margin-right : auto;
	padding : 0;
	font-size : 75%;
	font-family : verdana, arial, helvetica, sans-serif;
	color : rgb(255, 255, 255);
	background-color : black;
}

body div#page {
	width : 98%;
	float : top;
	margin-left : auto;
	margin-right : auto;
	padding : 0;
	border : #696969 2px solid;
	background-color : purple;
}
	
body #page #header {
	width : 100%;
	height : 150px;
	float : left;
	margin : 0%;
	padding-bottom : 1em;
	border-bottom : #696969 2px solid;
	color : rgb(150, 150, 150);
	background-color : ;
}

body #page #milieu {
	width : 100%;
	float : left;
	margin : auto;
	color : rgb(255, 255, 255);
	background-color : orange;
}

body #page #milieu #menu {
	width : 15%;
	float : left;
	padding : 1% 1% 1% 0%;
	font-weight : bold;
	font-size : 1em;
	color : #000000;
	background-color : grey;
}
	
body #page #milieu #contenu {
	margin-left : 16%;
	padding : 1% 5px 1% 5px; /* HDBG */
	color : rgb(255, 255, 255);
	background-color : red;
}

body #page #footer {
	width : 98%;
	float : top;
	/*height : 180px;*/
	border-top : #000000 1px solid;
	margin : 1% 1% 0% 1%; /* HDBG */
	color : rgb(255, 255, 255);
	background-color : green;
}


J'espère que vous aurez l'oeil plus aguerri que moi Smiley smile Merci d'avance pour votre aide.

Jarodd
Modifié par Jarodd (05 Aug 2008 - 08:37)
Merci pour le tuyau, je l'ai souvent utilisé, je n'avais jamais vu que le top n'existait pas. Bizarrement cela passe le validateur, en CSS1, 2, 2.1 et 3, cela ne devrait-il pas renvoyer un avertissement ?

Sinon le problème n'est pas résolu : retirer le float : top; ne règle pas mon problème de footer qui monte jusqu'au header... Smiley ohwell

Edit : j'ai aussi remarqué qu'en ajoutant un <p>&nbsp;</p> juste avant le div du footer, celui-ci s'alignait sous les autres div. Mais je ne comprend pas ce comportement, et pourquoi sans le paragraphe, il démarre en haut de la page !
Modifié par Jarodd (04 Aug 2008 - 22:58)
EN fait le problème est l'utilisation générale des float, ils ne sont apparemment pas nécessaire, puisque les blocs sont sensé êtres les uns en dessous des autres (comportement normal) et non à côté des autres (que l'on génère grace à float left/right en général).

La raison pour laquel le footer remonte est que comme lui est placé dans le flux (et non les éléments flottant), il faudrait lui ajouter la propriété clear: both;

Mais dans le cas présent je conseillerais plutôt de supprimer les float à hearder et milieu. Seul milieu a réellement besoin d'être flottant.
Bonjour,

Effectivement cela fonctionne, merci Yasahii ! Je ne connaissais pas la propriété clear, je vais aller potasser la doc. Si j'ai bien compris tes explications, les float sont inutiles tant que les blocs sont les uns en dessous des autres, il les faut juste pour menu puis contenu est à sa droite !

J'édite en résolu Smiley smile
Sujet clos
Aller à