Discussion :

[php_de_travers]

Bonjour,

j'ai plusieurs zones dans ma page

1 header (tout en haut !) à 100%

1 conteneur placé en position:absolute pour le centrer

1 footer que j'aimerais bien voir s'afficher après le conteneur, c'est à dire tout en bas de page et éventuellement sur 100% de la largeur comme le header.

Comment et où dois-je déclarer mon footer ?
Actuellement, si place son DIV juste après le conteneur, il s'affiche juste après le header...

[Bisûnûrs]

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="footer" style="clear:both">
   ...
</div>

[php_de_travers]

Cela ne doit pas être la bonne solution dans mon cas et je crois que le pb vient du #conteneur

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#CONTENEUR
	{
		width:828px;
		position:absolute;
		left:50%;
		top:250px;
		margin-left:-414px;
	}

Même si je déclare le DIV du footer après la fermeture du DIV conteneur, le footer s'affiche juste après le header.
La solution que tu me proposes ne semble pas fonctionner car je n'ai introduit aucun flottement dans le header et le conteneur.

[Bisûnûrs]

En effet.

Mais si ton footer est juste en dessous du header et non du conteneur c'est parce que ce dernier sort du flux avec ton position:absolute.

Rajoute position:relative à ton header et change ton position:absolute en relative à ton conteneur pour qu'il ne sorte pas du flux, supprime le top et ça devrait être bon.

[balu]

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#CONTENEUR
	{
		width:828px;
		position:absolute;
		left:50%;
		top:250px;
		margin-left:-414px;
	}

Pour centrer un bloc, mieux vaut éviter les marges négatives car cela peut causer un rognage de la page lorsque le visiteur réduit la taille de la fenêtre de son navigateur. Ce rognage fait disparaître la partie gauche de la page.

Voir la pièce jointe pour un exemple sans marges négatives.