css - 3 colonnes de même hauteur

[Monique]

Bonjour,

Une mise en page sans tableau, avec un haut de page, un pied de page et 3 colonnes de même hauteur... la bête noire pour beaucoup !

Je viens de trouver cette solution, particulièrement simple et efficace (j'ai testé) : 3-col layout via CSS

L'auteur, Petr Stanicek, annonce ceci (traduction) :

Pas de tableaux, pas de position absolue (pas de position du tout), pas de hacks, même hauteur de toutes les colonnes. Les colonnes gauche et droite ont une largeur fixe, celle du milieu est élastique. On ne doit pas utiliser de margin (zéro ou non-zéro) pour le body. Cela fonctionne avec tous les navigateurs récents - j'ai testé avec IE5/Win95, IE6/WinXP, Opera7/WinXP, IE5/Mac, Mozilla, Safari et Camino. Cela ne fonctionne pas avec les vieux navigateurs supportant mal les CSS (comme NN4, IE4...)

Pour NN4, comme j'ai définitivement choisi de lui proposer le contenu sans feuilles de style...

avec une déclaration comme celle-ci

<STYLE type="text/css" media=all>@import url("style.css");</STYLE>

[Guest exabs]

Any (zero or non-zero) margin of the body may be used

Cela se traduit par

N'importe quelles marges (nulles ou non) peuvent être utilisées dans le corps de la page

et non

On ne doit pas utiliser de margin (zéro ou non-zéro) pour le body

[Beatnykk]

monique :

on peut aussi le faire en layer (<div>) par include php, et c'est aussi payant en terme de possibilités de mise en page. question compatibilité je teste le tout sous 2 plateformes et 7 explorateurs (allant de version 4.5 à 7) et je n'ai aucun problème.

maintenant c'est sûr le css c'est bien mais est-ce que l'affichage dans un éditeur classique (dreamweave ou autre) est aussi clair pour travailler qu'avec des calques ??

[Monique]

Cela se traduit par et non

Oups... j'ai lu trop vite

[Monique]

maintenant c'est sûr le css c'est bien mais est-ce que l'affichage dans un éditeur classique (dreamweave ou autre) est aussi clair pour travailler qu'avec des calques ??

Bonjour beatnykk,

Je ne comprends pas ce que tu veux dire, je n'utilise pas d'éditeur WYSIWYG.

Qu'appelles-tu calques dans ce cas ?

[Raphael]

As-tu essayé ceci ? http://www.positioniseverything.net/thr.col.stretch.html

Ou ceci ? http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

[Monique]

As-tu essayé ceci ?

Oui, ils font partie de ma collection

Mais celle de Petr Stanicek me semble la plus simple à mettre en place, et surtout à comprendre et à exploiter, même par un débutant en CSS.

Le problème avec beaucoup de modèles un peu complexes, c'est que, pour celui qui manque d'expérience, il y a toujours quelque chose qui cloche quand il essaie de les adapter à ses propres besoins.

[Beatnykk]

la première des deux url pose problème dès qu'on réduit la largeur de l'écran.

quant à la deuxième c'est super sympa, ça, on pourrait même proposer à un visiteur de choisir son layout préféré en fonction d'un cookie qui réaffiche à chaque visite. mais il n'y a pas forcèment besoin de css. en layer ça doit marcher aussi !? non ?

par contre, language dynamique obligé (php ici) ...

[Guest exabs]

la première des deux url pose problème dès qu'on réduit la largeur de l'écran.

quant à la deuxième c'est super sympa, ça, on pourrait même proposer à un visiteur de choisir son layout préféré en fonction d'un cookie qui réaffiche à chaque visite. mais il n'y a pas forcèment besoin de css. en layer ça doit marcher aussi !? non ?

par contre, language dynamique obligé (php ici) ...

Bonjour,

Quelle différence fais tu entre un layer (<div>) et une feuille de style ?

Pour moi une balise <div> n'est rien d'autre qu'un conteneur, elle ne s'utilise jamais seulle... Explique nous ton utilisation de ces "layer"...

[Monique]

Pour moi une balise <div> n'est rien d'autre qu'un conteneur, elle ne s'utilise jamais seulle... Explique nous ton utilisation de ces "layer"...

Effectivement...

Pour ma part, je n'utilise jamais les termes calque, layer ou layout parce que, selon le contexte (et surtout selon le logiciel employé...) ces mots n'ont pas le même sens. Ce qui provoque bien des incompréhensions !

[Beatnykk]

mon utlisation des layers est un peu celle des calques de photoshop (je suis avant tout graphiste).

ils me permettent de délimiter une zone (rectangulaire uniquement), de fixer ses attributs taille et position en absolu (px) ou relatif (%), et donc d'avoir une mise en page précise et souple à la fois.

la différence avec l'utilisation d'un tableau dit "graphique" est :

1/ que les tableaux graphiques c'est quand même hypra lourd à mettre en place (et à modifer par bloc par la suite).

2/ que ces "zones" css n'ont pas la paramétrabilité d'un layer (scroll, plan ou profondeur 'z-buffer', définition de visibilité et de dépassement, etc.).

mais surtout :

----début

3/ qu'une image donnée en pourcentage à l'intérieur d'une cellule de tableau se referrera selon le browser, sa version et sa plateforme (et l'humeur de l'ingé réseau voire l'âge du capitaine surcouf) soit à la cellule elle même (ex: mie6 pc), soit à la taille du tableau (ex: nscap5 pc), à la taille totale de la page (mie5 mac)ou pire, à la taille originale de l'image (nscape 4.5 mac).

étant donné que par ex. sur mac les mises à jour des browsers sont faites pour mac os X users seulement (les autres pouvant la plupart du temps aller crever dans leur ghetto élitiste), et tout le monde n'utilisant pas forcément internet explorer, ça pose des sacrés problèmes de compat'.

comme j'ai décidé de faire des pages visibles par tous et partout après version 4.0, et extensibles d'un 640*480 à 1600*1200 (j'ai testé, c'est sans soucis) je trouve les layers pratiques.

----fin

et que comme je ne sais pas si toute cette "science" acquise bonnant mallant de façon empirique s'avérerait toujours applicable au css, je continue en layer.

le css offre donc sûrement d'autres possibilités (sinon vous ne bosseriez pas avec), mais est d'autre part bloqué face à certaines fonctionnalité des layers.

il me semble qu'une fois de plus la fusion (sans mélange des genres) permet le meilleur compromis. dès que j'ai le temps j'essaie d'introduire du css dans mes layers. le résultat sera peut être détonnant, qui sais ?