Pb avec un pied de page

YvesTan · 27 Octobre 2004

Salut à tous,

je suis entrain de boucler un site en XHTML/CSS mais j'ai une petite difficulté avec le pied de page.

En effet, celui ci se retrouve par fois au milieu ou à un autre endroit incongru de la page ?!

Je dis "parfois" car souvent un simple "refresh" suffit pour que le pied de page se retrouve en à la bonne place

Ce problème se pose sous Mozilla mais apparement pas sous IE

Voici une page ou se (foutu!) pied (trait gris et copyright) ne veut pas prendre sa place

http://www.lacrossetechnology.fr/fr/dealers.html

J'ai essayé les spacer (clear: both) mais ca n'a rien changé... Bref je bloque !

Merci d'avance pour vos idées

@+

YvesTan

Sylvain Trovalet · 27 Octobre 2004

exemple trouvé sur le site de Laurent Denis


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>menu 3 colonnes en float</title>
	<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-15">
	<style type="text/css">
	<!--
	body
		{
			margin: 0;
			padding: 0;
		}

	#gauche,#droite,#centre
		{
			margin: 1em 0;
		}

	#gauche
		{
			float: left;
			width: 25%;
			background-color: yellow;
			position: relative;
			right: 45%;
		}

	#droite
		{
			width: 25%;
			background-color: yellow;
			float: right;
		}

	#centre
		{
			float: left;
			width: 45%;
			height: 90%;
			background-color: red;
			position: relative;
			left: 27.5%;
		}

	#pied
		{
			clear: both;
			background-color: yellow;
		}
	-->
	</style>
</head>
<body>
<div id="centre">centre </div>
<div id="gauche">gauche</div>
<div id="droite">droite</div>
<div id="pied">pied</div>
</body>
</html>

Dans ton site je trouve

/* bas de page 
--------------------------------------------------------------*/
#footer {
	width: 98%;
	float:left;
	font-size: 10px;
	color:#999;
	padding: 10px;
	border-top: 1px solid #ccc;
	margin-top: 20px;
}
#footer a {
	color:#999;
}

Et j'avoue ne pas comprendre le float : left;

Que se passe t'il si tu l'enlèves ?

LaurentDenis · 27 Octobre 2004

exemple trouvé sur le site de Laurent Denis
...

Ouïe ! ça m'apprendras à oublier de faire le ménage ! :whistling:

Ce code n'est qu'un test assez infâme en prévision d'un article en cours de rédaction, sur une solution 3 colonnes float+pied de page avec un ordre des <div> privilégiant la div centrale.

Pour une exemple un peu plus propre, mais truffé de questions, et toujours sans article explicatif, voir plutôt http://blog-and-blues.org/test/3_colonnes_float/

PS: ça doit être évident, à tout les coups... mais comment es-tu tombé là-dessus, Sylvain ?

LaurentDenis · 27 Octobre 2004

Je suis entrain de boucler un site en XHTML/CSS mais j'ai une petite difficulté avec le pied de page.

J'ai regardé le code de ta page, et j'avoue, faute de temps, avoir eu un peu de mal à me retrouver dans cette CSS bien organisée, mais étendue apparemment à beaucoup de selecteurs non concernés par la page en question.

Je compte y retourner demain matin, avec un oeil frais, mais il me semble a priori que le problème devrait être lié à l'utilisation peut-être inutile de la position absolue pour une de tes div précédant le contenu. Ton pied de page en flux n'est pas en fait précédé par la somme de div que tu supposes, les div en absolue étant retirée du flux...

LaurentDenis · 27 Octobre 2004

Je suis un âne :down:

Le problème vient du height: 400px dans :

.contenu_prod {
	padding: 15px;
	width: 745px;
	height: 400px;
	background-color:#FFFFFF;
}

Si tu peux le supprimer sans casser autre-chose, ce sera bon.

YvesTan · 28 Octobre 2004

Salut à vous,

Merci pour ces réponses.

Bon, le float: left; c'était un essai de je ne sais plus trop quoi...

L'organisation de ma feuille de style... C'est pas forcément le top mais je me soigne

Le problème venait bien de la hauteur fixe que j'avais mise sur contenu_prod.

Par contre, je suis bien embété sur la page d'accueil ou j'ai mis une hauteur fixe pour la mise ne page avec l'image de fond et le bandeau flash...

Mais, en fait, je me souviens maintenant pourquoi j'avais mis le float: left; sur le bas de page ; c'était justement pour forcer le "flux" vers le bas.

Est-ce que c'est jouable comme ça à votre avis ?

En tout cas ca à l'air de marcher même si pas trop conventionnel

Merci @+

YvesTan

Sylvain Trovalet · 28 Octobre 2004

_AT_Laurent

Pour la mise en page 3 colonnes, j'avoue que je n'avais pas réussi à retrouver l'url :blink:

Mais comme j'avais fait des tests à partir de cet exemple j'ai voulu le ressortir (tout en mettant ma source d'inspiration).

C'est vrai que j'ai du mal à créer par moi-même, surtout si d'autres plus compétents que moi ont déjà cherché. Mais malgré tout si je l'avais mis de côté c'est que je cherchais tout de même un peu. <_<

LaurentDenis · 28 Octobre 2004

Il n'y aucun mal, Sylvain ! Ma remarque ci-dessus était humoristique. Ce que je mets en ligne est à la disposition de tout le monde, évidemment

C'est juste que c'est plus pratique avec les explications, c'est à dire l'article qui devrait aller avec... et que j'ai la flemme de terminer :blush:

Connexion

Pb avec un pied de page

Sujets conseillés

YvesTan

Sylvain Trovalet

LaurentDenis

LaurentDenis

LaurentDenis

YvesTan

Sylvain Trovalet

LaurentDenis

Veuillez vous connecter pour commenter

Parcourir

Activité