[CSS] Problème de footer sous un div avec du contenu fixe/variable

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Problème de footer sous un div avec du contenu fixe/variable

PacoDL

Bonjour,

J'ai un site dont le contenu est dans un div avec une hauteur en auto.

Ce que je veux :

Code :

+---------------------------+
| | <- Header + Menu du haut en position absolue
+---------------------------+
| | |
| | |
| | |
| | | <- Contenu Principal en position absolue mais hauteur : auto
| | | <-(à gauche : menu en position absolue)
| | |
| | |
| | |
+---------------------------+
| | <- Footer / Pied de Page
+---------------------------+

Ce que j'ai :

Code :

+---------------------------+
| | <- Header + Menu du haut en position absolue + Footer par dessus le tout
+---------------------------+
| | |
| | |
| | |
| | | <- Contenu Principal en position absolue mais hauteur : auto
| | | <-(à gauche : menu en position absolue)
| | |
| | |
| | |
+---------------------------+

Les éléments récurrents (bannière du haut + menu du haut + menu sur le côté gauche) sont placés en position:absolute; dans ce div

le contenu principal est aussi placé en position absolute mais avec une hauteur variable (il est décalé vers le bas et la droite pour se placer en dessous des menu du dessus et de la gauche).

Le pied de page vient en dessous du div principal en position:relative; mais j'ai l'impression que la hauteur du grand div n'est pas modifiée en fonction de la hauteur du contenu principal.

Résultat : le pied de page est placé tout en haut (il couvre la bannière). Si je met une hauteur fixe (height:1600px) sur le div principal (all), le pied de page se retrouve en dessous de cette taille mais ça ne m'arrange pas du tout.

Voilà en gros le CSS :

Code :

#all {
position:relative;
text-align:center;
margin-left:auto;
margin-right:auto;
width:1024px;
height:auto;
}
#contenu-principal {
color: #000;
position:absolute;
left:148px;
top:150px;
width:858px;
height:auto;
padding:6px;
}
#footer {
position:relative;
text-align:center;
margin-left:auto;
margin-right:auto;
width:1024px;
height:auto;
}

Message édité par PacoDL le 13-07-2008 à 23:40:12

Publicité

bricocoman

j'aime les modos

essaie en mettant un div en bas de ton bloc principal genre

dans ton CSS :

Code :

#spacer {
clear:both;
}

et en bas de ton bloc principal

Code :

<div id="spacer"> </div>

PacoDL

Ca ne marche pas, le problème semble venir du fait que la hauteur de mon bloc principal ne change pas si je met des éléments positionné en absolute à l'intérieur.

Ils le sont tous et il y a seulement le contenu principal dont la hauteur peut changer en fonction de la longueur du texte. Le bloc principal doit donc avoir comme hauteur minimale celle du menu gauche en dessous de la banniere et en maximale celle du bloc de contenu principal.

Vu le positionnement (relatif) de mon pied de page, je dirais que la hauteur de mon div est de 0 à cause du positionnement absolu des blocs à l'intérieur, comment remédier à ça ? Est-ce que je dois changer le positionnement absolu en relatif ?

EDIT Info supplémentaire : il n'y a pas d'éléments float dans ma page, c'est surement pour cela que le space ne fonctionne pas, si ?

Message édité par PacoDL le 13-07-2008 à 23:20:32

Lactique

Caraïbe et huile de coco

nononoono....
Absolute = pas de flux.
Reprend ta structure en utilisant le flux, pour ce que tu veux faire en plus c'est tout a fait convenable.
div.header
div.content
..div.menu (float:left)
..div.page (float:left)
div.footer

---------------
Studio CréeAll

mIRROR

Chevreuillobolchévik

euh les float sortent du flux aussi hein :whistle:

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

PacoDL

Pour la solution de Lactique, apparement, en faisant ce que bricocoman proposait (le spacer), ça devrait marcher.

Mais cela me ferait tout refaire en float (j'ai 150 éléments à redéfinir...), je vais y réfléchir.

Pour le moment, j'ai trouver une solution peut-être pas très sexy : je met mon contenu principal en relative, des padding-left et padding top pour le placer et un height en auto. Ca force le div principal à se redimensionner (il est aussi en height:auto).

Pour éviter que le pied de page se retrouve sur le menu de gauche (si le contenu principal n'est pas plus grand que lui), j'applique un min-height sur le div principal.

Que pensez-vous de cette méthode ? ça me donne le résultat voulu mais j'ai le sentiment d'avoir salopé mon affaire

mIRROR

Chevreuillobolchévik

bah j en pense que c est degueu, la solution de lactique etant sans conteste la meilleure
je le rectifiais juste sur la question du flux

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Problème de footer sous un div avec du contenu fixe/variable

Sujets relatifs
probleme formulaire/mysql	[DOTNET] Probleme improbable de Random
key listener et récupération de variable	Problème caractères spéciaux et CuteNews (é, à, ç...)
gros probleme avec gettext sous fedora	Petit conseil CSS SVP
[PHP-MySQL] Problème récupération dernier ID d'une table.	Probleme d'automatisation en VBA sous Excel
[Xlib] Problème de focus de fenêtre	Problème avec visual basic .net, usercontrol, validating/enter event
Plus de sujets relatifs à : [CSS] Problème de footer sous un div avec du contenu fixe/variable

Page générée en 0.056 secondes