[résolu] Colonnes redimensionnables entre elles

Bonjour tout le monde
Oui je sais que c'est un problème classique avec pas mal de réponses sur ce site ou dans la FAQ mais elles ne correspondent généralement pas tout à fait au comportement que je souhaite...

Lorsqu'on parle de mise en page avec 3 colonnes, on définit généralement une colonne qui s'adaptera aux autres. Or j'aimerai avoir une mise en page telle que chaque colonne s'adapte aux autres. C'est-à-dire que http://css.alsacreations.com/xmedia/exemples/cellules/cellules3.htm ne convient pas car si le menu de gauche devient plus grand (en hauteur) que le bloc central, le bloc central ne s'adapte pas à la hauteur du menu de gauche.

Il y a cette solution (trouvée dans la FAQ ) : http://www.pixy.cz/blogg/clanky/css-3col-layout/ (équivalente à http://pompage.net/pompe/colonnesfactices/) mais elle utilise des images de couleurs qui sont répétées grâce aux css... Je trouvais pas ca ,peut-être à tord, très "élégant" (oui je suis chiant) mais s'il n'y a pas d'autres solutions je m'en contenterai... En fait ce qui m'énèrve c'est d'utiliser des trucs aussi tordus pour arriver à un truc faisable en 10 secondes si IE se comportait correctement. Enfin bon, on y peut rien c'est vrai.

Voila j'ai cherché dans le forum mais j'ai rien trouvé à ce sujet (les 3 colonnes adaptables et non pas une seule), si quelqu'un pouvait m'apporter sa science ou à défaut, son avis éclairé !

Je précise que je recherche ce comportement car simplement je ne peux pas prévoir, selon les pages, quelle colonne sera la plus grande...
Modifié par RoroCSS (26 Jul 2005 - 00:04)

Salut et bienvenue sur le forum,

En fait, s'il existait une solution miracle, elle se trouverait dans la FAQ, comme tu t'en doutes un peu.

La solution que tu recherches est très simple à obtenir en CSS, il s'agit d'employer "display : table-cell", comme l'explique Laurent Denis sur son blog.
C'est la solution recommandée, simple et facile à mettre en oeuvre en CSS.

Le seul hic, c'est que cette propriété n'est pas comprise par Internet Explorer, ce qui en soi n'est pas une lacune des CSS mais de ce navigateur dinosauresque

Pour ce qui est de l'élégance, il y en a autant, ou aussi peu :
- à simuler des hauteurs identiques en jouant sur les arrière-plans et d'éventuelles images (voir FAQ)
- qu'à utiliser des hacks pour rattraper la solution du display:table CSS dans les navigateurs qui ne l'implémentent pas (voir lien de la FAQ)

Personnellement, ce qui m'amuse, c'est de voir qu'il faut proposer aux gens des trucs aussi tordus pour arriver à un truc faisable en 10 secondes s'ils voulaient bien admettre les limitations actuelles de CSS2 et, au choix :
- utiliser un tableau de présentation,
- ou mieux, renoncer à obtenir le même effet de détail de présentation dans tous les navigateurs

A tester, mais je vois pas de raison que ça soit impossible, tu pourrais mettre 2 conteneurs directement imbriqués.

L'un contient la colonne factice de gauche et disons environ 500 pixels de colonne factice du contenu, l'autre contient la colonne factice de droite et 500 pixels de colonne factice du contenu vers la gauche cette fois ci.

Le tout mis en semble donne l'illusion de même hauteur, le tout en mise en page fluide pouvant atteindre une page d'une largeur de plus de 1000 pixels (2 fois 500 + les 2 menus) sans avoir des images trop impossantes puisqu'elles sont répétées verticalement.

Olivier a écrit :
L'un contient la colonne factice de gauche et disons environ 500 pixels de colonne factice du contenu, l'autre contient la colonne factice de droite et 500 pixels de colonne factice du contenu vers la gauche cette fois ci.

Le tout mis en semble donne l'illusion de même hauteur, le tout en mise en page fluide pouvant atteindre une page d'une largeur de plus de 1000 pixels (2 fois 500 + les 2 menus) sans avoir des images trop impossantes puisqu'elles sont répétées verticalement.

Un exemple ! Un exemple !
Modifié par Laurent Denis (25 Jul 2005 - 12:57)

Merci pour vos réponses si rapides

Raphael a écrit :
Le seul hic, c'est que cette propriété n'est pas comprise par Internet Explorer, ce qui en soi n'est pas une lacune des CSS mais de ce navigateur dinosauresque

Ca m'empêche donc de retenir cette solution mais c'est dommage car ca correspondait bien avec ce que je voulais

Laurent Denis a écrit :
- ou mieux, renoncer à obtenir le même effet de détail de présentation dans tous les navigateurs cligne

C'est pas forcémment un impératif mais dans mon cas, ca devient moche dans IE par exemple. Et ça, c'est à exclure

Olivier, j'ai pas trop compris ton post

Je viens de tester un hack (?) pour IE trouvé sur le forum. Il fonctionne dans IE 6 (Win), Opera et Firefox :

	height: auto !important;
	height: 250px;
	min-height: 250px;

Ca résoud mon problème, je peux ainsi donner une hauteur minimale à une colonne (qui correspond à la hauteur d'une colonne statique), et plus de problèmes lorsque cette colonne ne contient pas assez d'éléments pour s'étirer... Enfin, j'me comprends

Encore merci pour votre aide, si jamais vous voyez un quelconque problème à utiliser ce hack, merci de m'en faire part
Modifié par RoroCSS (25 Jul 2005 - 13:23)

Bon, ça reste légérement buggé sous IE et sous firefox au redimenssionement, mais rien de bien dramatique en principe, faudrait juste modifier une ou 2 choses.

J'approfondirais eventuellement.

http://elmoustikoblog.net/aide/3colfactices/

<edit> ca serait l'image à adapter un peu au niveau du header, faire celle de droite moins large</edit>
Modifié par Olivier (25 Jul 2005 - 13:49)

Ah, d'accord. Vu comme ça, c'est plus simple

(Je n'avais pas compris que tu parlais des colonnes factices Ala Pompage)

Voilà, j'ai modifié les images pour que ça colle mieux.

Il y a juste sous IE, vu que min-width n'est pas compris, si on réduit trop, ça fait le boxon, mais là j'y peu rien.

<edit>Laurent, toi qui a l'art de déceler les trucs qui merdent , as tu des infos à me donner sur la méthode ?
bugs, problèmes, etc
Si c'est pas trop demander.
Modifié par Olivier (25 Jul 2005 - 13:57)

Rien de dramatique.

Tu me fais le même, mais avec le contenu de la colonne centrale en premier dans l'ordre du code HTML, stp ?

Laurent Denis a écrit :
Rien de dramatique.

Tu me fais le même, mais avec le contenu de la colonne centrale en premier dans l'ordre du code HTML, stp ?

Pas possible ça par contre
C'est la contrainte de l'utilisation des float

Encore plus en largeur fluide avec les marges à gauche et à droite.

Olivier a écrit :


Pas possible ça par contre
C'est la contrainte de l'utilisation des float

Il n'y a pas d'incompatibilité entre les flottants et le contenu central en premier, le tout en largeur fluide

Un exemple : J'ai ça qui traîne dans un coin. ça pourrait t'inspirer pour y ajouter l'astuce des hauteurs
http://test.blog-and-blues.org/3_colonnes_float/

(je n'ai jamais pris le temps d'écrire l'article annoncé dans l'exemple. Sorry)

(<edit>
- jamais testé sur Safari et IEMac
- en prime, 3 flottants centrés, tiens
Modifié par Laurent Denis (25 Jul 2005 - 15:30)

Oui, mais là tu utilise une largeur fluide sur les colonnes et le contenu.

J'ai mal expliqué ce que je sous entendais, ici les colonnes sont fixes et là ça devient plus complexe je crois.

Enfin, je regarderais ton truc qui pour vérifier que c'est faisable

Olivier a écrit :

Enfin, je regarderais ton truc qui pour vérifier que c'est faisable

C'est ben gentil

Je voulais dire, "vérifier si c'est faisable" avec colones en largeur fixe

La petite correction qui change le sens de la phrase.

En tout cas, étant donné que ta méthode est basée sur le positionement relatif avec left: XX; je suis pas certain que ça soit possible au niveau de la "marge" à droite.

Je ferais les tests

J'ai maintenant un autre problème, une boite (div) n'a pas la même hauteur dans Firefox ou IE. Ca ne semble pas être le problème de modèle de boite Microsoft... Dans ma source HTML je met uniquement un

<p class="pied"></div>

Ma feuille de style est celle ci :

.pied {
	width: 10px;
	height: 7px;
	background-color: #FFFF00;
	border: 1px solid green;
}

Dans Firefox pas de problème, mais dans IE6 la boite ne veut pas prendre la hauteur de 7px. Elle fait environ 20px et en fait j'ai remarqué que pour toutes les valeurs inférieures à 20px, les dimensions sous IE ne variaient pas

Ais-je laissé passer un truc tout con ? Car je bute sur cettre broutille depuis 1h
Modifié par RoroCSS (25 Jul 2005 - 21:07)

line-height: 7px;

Mais qu'est-ce que c'est que ce machin t'ouvre un <p> et tu fermes un <div> c'est n'importe quoi
Et les éléments vides sont très déconseillés.

Oui excuse moi j'ai tapé à la va-vite, c'est bien un <div> fermé par un </div>, j'ai pas fais l'erreur dans ma source. J'avais laissé un élément vide car ca ne changeait justement rien à mon problème. Merci du conseil

Sinon c'est bien le line-height qui me manquait, merci pour ton aide
Modifié par RoroCSS (25 Jul 2005 - 23:48)

Manque plus que le [résolu] non ?
http://forum.alsacreations.com/faq/#item22

Oui très juste