Calage de div

Version imprimable

15/01/2009, 13h58
Kerweb

Calage de div

Hello,

J'aurais une petite question, j'essaye de faire un calage un peu spécifique :
http://kerweb.olympe-network.com/test/

J'ai un conteneur principal qui prend toute la hauteur de la page, un footer qui vient automatiquement en pied de page, un menu gauche qui prend toute la hauteur moins la hauteur du footer et une partie centrale qui réagit comme le menu de gauche avec en plus la spécificité de faire apparaitre un scroll quand le contenu est trop grand.
J'ai plus ou moins réussi à faire ce que je voulais, sauf que le menu et la partie centrale passe en dessous du footer et ne s'arrête pas au niveau de celui-ci.
A quel niveau est-ce que j'ai merdé ?
Si quelqu'un voit des améliorations à donner sur ce code, je suis preneur.
A noter que dans le footer, il y aura un menu déroulant vers le haut (qui sera donc amené à passer par dessus le cadre central.

Merci d'avance :P
15/01/2009, 14h58
Macmillenium

Bonjour,

Quel est l'intérêt de ta mise en page avec des blocs en position absolute ?

Tes 3 blocs sont retirés du flux naturel, Les éléments passent l'un au dessus de l'autre (comme tu n'as pas de z-index, l'ordre est le même que dans le code).
Tu as un height:100% (c-à-d 100% du conteneur) sur menu_gauche et menu_gauche, ils passent alors (comportement normal) au dessus de ton footer.

Je te conseille de faire une mise en page classique avec float-left c'est plus facile à maintenir.
15/01/2009, 16h09
Kerweb

Avec ça je peux faire en sorte que les 2 colonnes centrales prennent toutes la hauteur, moins la hauteur du footer ?
15/01/2009, 16h23
Macmillenium

Oui.

Bonjour,

Avant de tout bouleverser, essaye d'ajouter

Code:

1
2
3
.menu_gauche, .frame {
  margin-bottom : hauteur_du_footer_px;
  }

Code:

1
2
3
.menu_gauche, .frame {
  padding-bottom : au_moins_la_hauteur_du_footer_px;
  }

16/01/2009, 00h10
devyan
Citation:
Envoyé par GihefBey

Bonjour,

Avant de tout bouleverser, essaye d'ajouter

Code:

1 2 3 .menu_gauche, .frame { margin-bottom : hauteur_du_footer_px; }

ou

Code:

1 2 3 .menu_gauche, .frame { padding-bottom : au_moins_la_hauteur_du_footer_px; }

-
Salut,

Je penche plutôt pour la première solution (margin) pour que la barre de défilement vertical soit bien positionnéeau dessu du footer également.
16/01/2009, 00h25
Kerweb

J'ai testé, mais ça ne change rien :?
16/01/2009, 09h35
Macmillenium

Citation:

Envoyé par devyan

Je penche plutôt pour la première solution (margin) pour que la barre de défilement vertical soit bien positionnéeau dessu du footer également.

Le bloc est en absolute et prend 100% de son conteneur ni padding/margin bottom peut fonctionner dans ce cas.
16/01/2009, 10h01
Kerweb

J'ai tenté d'avancer un peu mais c'est pas super concluant :
http://kerweb.olympe-network.com/test2/

Sur FF ça marche pas trop mal, mais IE ça part en freestyle :?

Macmillenium, est-ce que tu peut m'éclairer pour le float:left, qui puisse prendre 100% de la hauteur moins le footer stp ?