Webmaster Hub > Pb avec un pied de page

Version complète: sur le forum Webmaster Hub : Pb avec un pied de page

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

YvesTan

mercredi 27 octobre 2004 à 10:53

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

mercredi 27 octobre 2004 à 20:01

exemple trouvé sur le site de Laurent Denis

CODE

<!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

CODE

/* 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

mercredi 27 octobre 2004 à 20:36

CITATION(Sylvain Trovalet @ 27 Oct 2004, 21:01)

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

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

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

mercredi 27 octobre 2004 à 20:42

CITATION(YvesTan @ 27 Oct 2004, 11:53)

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

mercredi 27 octobre 2004 à 20:55

Je suis un âne :down:

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

CODE

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

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

YvesTan

jeudi 28 octobre 2004 à 09:10

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

jeudi 28 octobre 2004 à 10:14

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

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

jeudi 28 octobre 2004 à 10:33

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.