28221 sujets

CSS et mise en forme, CSS3

Position du Footer selon contenu

Bonjour,

J'ai cherché sur ce forum et suivi les liens indiqué afin de me documenter, mais rien n'y fait.

j'aimerai pouvoir placer le Footer en fin de page quelque soit le contenu.
Cela fonctionne sous IE6, la balise div, relative au Footer se place directement à la suite et ce, quelque soit le contenu de la page.

Mais sous Firefox, la balise Div Footer se place quoiqu'il arrive après la balise Div Menu, et se retrouve superposé sur le contenu.

Quelqu'un pourrait-il m'éclairer ?

voici un extrait de la feuille de styles :
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
	background-image: url('images/bg_fond_bleue.jpg');
	color: #003366;
	height: 100%;
}

#general {
	position: relative;
	width: 750px;
	min-height: 100%;

}

#header {
	left: 0px;
	top: 0px;
	width: 755px;
	height: 150px;
	background-image: url('images/bandeau_haut.jpg');
	
}

#gauche {
	position: absolute;
	left: 0px;
	top: 110px;
	width: 200px;
	height: 310px;
	font-size: 11px;
	background-image: url('images/menu_gauche.jpg');
}

#frame {
	margin-left: 200px;
	width: 550px;
	height: 300px;
}

#footer {
  	float: left;
	width: 755px;
	height: 80px;
	background-image: url('images/bandeau_bas.jpg');
	margin-bottom: 10px;
}

Pour tester avec un contenu suffisament long, la page web se trouve à cette adresse : http://danny.robert.free.fr/saa/general/index.php?r=pedagogie&p=cycles

Cordialement, Khyor
Modifié le 07 Nov 2004 - 03:13
Enlève la hauteur height:300 px que tu as défini dans #frame.

Eric.
Modifié le 07 Nov 2004 - 05:09
Tu dois remplacer "float: left;" par "clear: both;"

#footer {
  	[#red]float: left;[/#]
	width: 755px;
	height: 80px;
	background-image: url('images/bandeau_bas.jpg');
	margin-bottom: 10px;
}


À coup sûr, il te manque quelques notions de CSS-P (cascading style sheet positionning).

Pourquoi ne pas prendre quelques minutes pour lire le tutoriel Savoir utiliser et positionner les éléments en CSS?

Bienvenue sur le Forum Alsacréations! Smiley smile
Modifié le 07 Nov 2004 - 06:41
Merci pour vos conseils, ca fonctionne parfaitement, désormais :) !
Etant donné que le Footer se place en suivant le contenu, si ce dernier est petit ou inexistant, il s'avère que le Footer chevauche le menu à gauche. j'ai donc essayé différement ce que vous m'aviez dit de retirer :

#frame {
	margin-left: 200px;
	width: 550px;
	[#red]min-height: 300px;[/#]
}


Tout à l'air Ok sous FireFox, mais pas sous IE6, j'continu a chercher :p

A bientôt,
Khyor :)
Modifié le 07 Nov 2004 - 10:51
Et Voilà, It's Ok :)
Voilà ce que j'ai mis (trouvé sur cette page):

#frame {
margin-left: 200px;
width: 550px;
[#red]min-height: 260px;
overflow:hidden;
height:expression(
this.scrollHeight < 280? "260px" : "auto" );[/#]
}


Merci pour tout :)
Modifié le 07 Nov 2004 - 11:22
Pourquoi compliquer commme ça, tu es dans un flux normal, header, frame et footer, logiquement les divs vont se placer l'une sous l'autre.
Tu définis une hauteur au header, donc le bloc div suivant se place fonction de la hauteur du header, et normalement ainsi de suite. Logiquement; tu devrais avoir :
header (height 150px)-> frame (height non défini)-> footer(height 80px) tout simplement.


body {
	margin:0;padding:0;
	font-family: "Trebuchet MS", Tahoma, Geneva, Arial, Helvetica, sans-serif;
}
p {margin:0 6px;padding:0}
#header {height:150px;background:#ccc}
#content {margin-left:200px;background:#eaeaea}
#footer {height:80px;background:#ccc;}
#menu {position:absolute;top:150px;width:200px;background:#d7d7d7}
-->
</style>
</head>

<body>
<div id="header"><p>Le header</p></div>
<div id="menu"><ul><li>Item 1</li><li>Item 2</li></ul></div>
<div id="content">
	<p>Ici les paragraphes</p>
	<p>Ici les paragraphes</p>
	<p>Ici les paragraphes</p>
	<p>Ici les paragraphes</p>
	</div>
<div id="footer"><p>Le footer</p></div>

Modifié le 07 Nov 2004 - 12:20
Sujet clos
Aller à