Probleme de pied de page.

Salut à toutes et à tous.

Je viens sur ce forum car je rencontre un probleme lors de la mise en page d'un pied de page pour mon site.
J'ai suivi ce tutoriel mais il me reste un probleme. en effet quand je rajoute du contenu important (dépassant la hauteur de la page) celui ci passe en dessous de mon pied de page. Le pied de page lui ne reste pas en bas.

Voici mon css :

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	
}

#page 
{
	width: 100%;
	margin: 0 auto;
	min-height: 100%;
	position:relative;
}

#top 
{
	margin-top: 0;
	background:url(img/index2/top2.jpg) repeat-x;
	height:144px;
	
}

#footer
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background:url(img/index2/bottom.jpg) repeat-x;
	height:93px;
	
	
	
}

Pour le html faites afficher la source sous le navigateur. C'est ICI pour la page avec le contenu important et pour voir le pied de page qui marche vous pouvez cliquer sur les autres menus.

Ce serait super sympa de m'aider

Merci beaucoup !
Modifié par ceetix (14 Apr 2008 - 12:43)

Bonjour,

Le pied de page est bien en bas de mon côté (Firefox 3), par contre il recouvre le bas du contenu car tu as oublié de donner un padding-bottom suffisant à div#content.

Ensuite, div#ssaccueil recouvre une partie du haut du contenu car il est mal positionné: soit il devrait être positionné en absolu ailleurs dans la page (plus haut, par exemple), soit il ne devrait pas être positionné en absolu.

Merci de ton aide Florent. Pour le padding-bottom ca marche mais je ne sais pas quoi mettre comme valeur dans mon css, en pixel? pourcentage?
Par contre pour le div#ssaccueil vu qu'a chaque menu il change (div#ssmail par exemple) je ne peux pas faire grand chose pour ce soucis . Si ?

Merci beaucoup en tout cas !

ceetix a écrit :
Merci de ton aide Florent. Pour le padding-bottom ca marche mais je ne sais pas quoi mettre comme valeur dans mon css, en pixel? pourcentage?

A: div#footer fait 93px de haut.
B: le contenu de div#content passe sous div#footer, qui est en dehors du flux.
Je te laisse faire A plus B.

ceetix a écrit :
Par contre pour le div#ssaccueil vu qu'a chaque menu il change (div#ssmail par exemple) je ne peux pas faire grand chose pour ce soucis . Si ?

Ben euh c'est ton site hein, je vais pas décider pour toi si quelque chose est problématique ou non.
Si tu veux avoir un bloc contenant une image, avec ce bloc toujours positionné au même endroit, garde le même identifiant dans le code HTML!

Sur la page accueil:

<h1 id="page-title">
	<img alt="Accueil" src="img/index2/ssaccueil.jpg" />
</h1>

sur la page mail:

<h1 id="page-title">
	<img alt="Mail" src="img/index2/ssmail.jpg" />
</h1>

(En passant, le format PNG -- ou éventuellement GIF -- serait plus adapté à ce type d'images.)

Merci Florent ces deux problemes ont l'air résolu ( si tu pouvais confirmer ^^). Par contre un autre vient d'aparaitre a cause de mes modifications. En effet, le content qui n'est pas en position absolue à une grosse marge par rapport au header. Tu peux le voir sur la page accueil et voter. Je sais je suis lourd mais là je vois pas comment faire :s

Alors en vrac:

1. Pourquoi div#content contient-il tous les autres éléments de la page ou du moins la plupart, et pas juste le contenu propre à la page?

2. Pourquoi div#content n'a-t-il pas de styles, même pas le padding-bottom que je suggérais? Le padding-bottom: 5em sur div#page est une erreur...

3. Pourquoi as-tu donné une hauteur de 251px au h1?