Je me casse les dents depuis un bon moment sur un problème de mise en page CSS. J’ai bien regardé les solutions proposées à droite et à gauche et je n’ai rien trouvé d’équivalent à cet exemple tout bête fait à coup de tableaux : http://xinfe.free.fr/maquette.html (Vous pouvez jouer avec la taille de la fenêtre)
En gros, je veux un header fixe, un footer en bas de la fenêtre du navigateur, et un body qui prend la place restante au milieu. Je n’ai donc pas de scrolling vertical : tout tient d’un coup.
Enfin, dans le body, trois colonnes qui prennent chacune 1/3 de la largeur totale de la fenêtre (je verrait après pour les marges). Le problème, c’est que j’ai rien de satisfaisant en jouant avec des float, puisque ca doit être relatif à la largeur totale.
Donc si vous pouvez m’aider à résoudre ce double problème, ca serait cool.
(Pour info, mon site est fait pour tenir aussi bien dans moins de 800x600 que sur un joli 24" à 120ppp)
Le pied de page n’est pas collé en bas de la fenêtre du navigateur ( position:absolute; bottom:0; ), et le body ne fait pas “100%” de ce qu’il reste. Ce qui est présent sur le site, je sais le faire sans trop de problèmes.
Pour ce qui est des colonnes, elles ne font pas la même taille. Le float avec une largeur relative, ca fait pas ce que je veux (quoiqu’avec magouille et cie, ca pourrait éventuellement passer, mais j’aime pas les magouilles).
EDIT:Merci pour le site tout de même, je le garde sous le coude !
Effectivement, c’est bien ce genre de layout que je cherche…
Va falloir que je regarde la CSS attentivement, mais je pense que ca sera pas trop compliqué à importer.
J’ai l’impression que c’est du float:left avec un décalage depuis left en relatif :
De ce que j’ai compris, il a encore compliqué un peu la css en utilisant son tricks pour avoir des background de colonne qui prenne toute la hauteur quelle que soit le texte dedans.
Check l’article lié pour voir si tu veux conserver aussi ca. http://matthewjamestaylor.com/blog/equal-h…er-css-no-hacks
En effet, ca va l’aider. Maintenant, plus qu’à régler le problème de la hauteur :
Tout le contenu (header fixe, footer fixe, corps utilisant l’espace restant) doit s’inscrire strictement dans la fenêtre du navigateur. Je veux pas voir de scrollbar !
IE6 ? Damned, IE6 ! Soit le support IE6 passe a la trappe, soit ca attendra…
Sinon, merci pour le concentré de réponses
Par contre, je viens de tester, et les colonnes ne vont pas du header au footer. Quand je met height:100%; ca dépasse sous le footer…et je tourne en rond…
EDIT:C’est bête de pas pouvoir faire des trucs du genre height:100%-54px-12px;
