"Fluid" layout

Bonjour tout le monde,

J'essayait récemment d'obtenir une mise en page type "app" (excusez-moi ce raccourci). Une mise en page avec des blocs dont certains s'étendent en fonction de leur contenu et d'autres, se contractent pour compenser, engendrant au besoin l'apparition de scroll bars.
Évidemment, pour que ça soit amusant il fallait mettre JavaScript de côté au profit d'une solution en pure CSS.

Je suis arrivé à une solution fonctionnant sous :
+ Firefox 3+
+ Chrome
+ IE 8
+ Opera (11 ou 10, je ne m'en souviens plus)

Le gros hic c'est que si ça fonctionne sous IE 8, ça ne fonctionne pas avec le 9 . Après avoir retourné le problème dans tous les sens (enfin j'espère pas sinon c'est qu'il n'y a pas de solution) je m'en remet à la communauté en espérant que vous serez plus efficace que je ne l'ai été.

Voilà où j'en suis resté :
http://cahnory.fr/css/notFinished/fluid-view3.html

Alors il n'y a aucune urgence dans ce post, je veux dire par là que c'est plus une idée que j'aimerai voir concrétisée q'une réel besoin. Je pense simplement que ce genre de "challenge" (pas réellement le bon mot mais j'ai rien de mieux qui me vient) pourra en amuser certains comme ça m'amuse moi même et, qu'on pourra peut-être en tirer un layout sympa et utile à tous .

Ce type de squelette existe déjà: http://www.dynamicdrive.com/style/layouts/category/C13/

A mon avis, tu as du faire une erreur dans ta css

PS: certains appellent ca un squelette fluide, d'autres un squelette "liquide", mais au final c'est la même chose !

Et même sur Alsa

http://www.alsacreations.com/static/gabarits/liste.html

Hmm soit je suis bigleux car je ne trouve pas d'équivalent à mon layout dans les liens ci-dessus, soit vous ne l'avez pas bien regardé.

Dans mon layout, aucune partie n'est fixe. Elles s'adaptent au contenu, pour s'en rendre compte tous les block sont editables (contenteditable) et on remarquera que le bloc supérieur et la sidebar s'adaptent à leur contenu et que la partie centrale/principale elle, s'adapte aux autres blocs.

Encore une fois, je n'ai peut-être pas bien vu dans les liens que vous me donnez mais il ne semble pas qu'il s'agisse du même type de layout.

Après, je t'ai montré juste un exemple, il va de soit que si tu le veux à ta sauce, il faudra adapter le code, mais pour ce que tu souhaite faire, perso je partirai de cette base: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/

Sauf que ce layout n'a absolument rien à voir. Il ne s'agit pas ici d'avoir simplement un header et une sidebar.

Dans ton exemple, on voit bien que tu as des zones fluides et des zones fixes. Sur ma page, on a :
+ une zone fluide, la principale qui, si elle devient trop petite se munie d'une barre de scroll.
+ des zones aux dimensions non définies (pour être précis, height non défini pour le header et width non défini pour la sidebar) qui s'adaptent au contenu.

Je t'invite à revisiter ma page avec l'un des navigateurs supportés.
Pour que l'effet soit bien visible j'ai défini l'attribut contenteditable="true" pour que l'on puisse facilement modifier le contenu de chaque bloc et observer ce qui se passe. Ajoute des lignes au header, des mots insécables (type aaaaaaaaa…) à la sidebar et tu verras bien la différence de comportement entre le layout dont tu me parles et le mien.

En tout cas, merci de t'intéresser à ma question

Effectivement ton squelette est fort différent (et fort chargé à mon gout), perso je peine à comprendre l'utilité d'une telle mise en page

Bref, n'ayant pas réussi à cibler ton problème, au pire, tu peux toujours forcer IE9 à interpreter la page comme IE8 ou une version antérieure: http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx#SetMode

Le squelette est clairement chargé mais malgré tout il ne comporte que le strict minimum pour arriver à parfaire cet effet.
Si quelqu'un a plus concis, sans perte de compatibilité, je suis évidemment preneur mais j'ai tout de même bien retourné le problème dans tous les sens.

Pour ce qui est de l'utilité j'y vois plein d'applications. Alors déjà il faut se dire que si je met ici une sidebar et un header c'est seulement pour "prouver" que ça fonctionne sur les deux axes.

Alors prenons seulement le header, une application serait de l'imaginer composer de divers barre de menu/onglet/breadcrumb/…
Par exemple on peut penser à une application qui aurait n niveau de menu. On commence avec une première barre, on clique sur un bouton et là on se retrouve dans une section qui a sa proper barre de menu s'ajoutant sous la précédente, on clique sur l'un de ses bouton et l'on atterrit dans une nouvelle sous section avec une nouvelle barre de menu et ainsi de suite.
L'avantage de cette mise en page c'est que l'on a pas à s'occuper du nombre de barres (et donc de la taille totale de ces barres). Le header s'adaptant à son contenu il aura toujours strictement la taille nécessaire à l'affichage de toutes ces barres. Le contener du contenu principal lui, se réduit d'autant, ne sortant jamais de la fenêtre et apportant une barre de scroll au besoin.
Le coté "app" c'est justement ce header toujours visible et ce scroll appliqué au contenu d'une box et non de la page toute entière (à la manière du navigateur que tu utilises en ce moment qui peut surement afficher au besoin onglet, favoris,… et une page web scrollable au besoin).

Ça peut être plusieurs barres de menus mais ça pourrait très bien être une unique barre de menu dont les boutons passeraient sur 1, 2, n lignes si l'espace horizontal se restreint.

Ça plus l'exemple je ne pense pas pouvoir mieux l'expliquer si ce n'est avec un cas concret mais je réserve ça pour le jour où je trouve une solution à IE9 .

La solution de forcer IE9 à interpréter comme IE8 m'avait traversé l'esprit mais j'ai l'impression que ça serait plus un moyen de "prouver" que j'ai réussi plutôt qu'une vraie réussite. Je vois ça comme de la triche ^^, ça va marcher mais finalement ça n'appel pas d'évolution, c'est voué à être désuet… mais maintenant ne m'étant que peu intéressé à cette pratique je fait peut-être fausse route (et je vais m'empresser de suivre le lien que tu me fourni une fois ce com posté )

Encore merci à toi !

Effectivement, vu sous cet angle, je comprend un peu mieux l'utilité d'un tel menu avec sous menus additionnels et donc la structure de ta page même si je ne suis pas fan de la structure.

Concernant la solution de forcer IE9 à interpréter la page comme IE8, effectivement ca ne met qu'une rustine sur le problème sans vraiment le résoudre.

L'idéal serait de pouvoir cibler où se situe le problème pour éventuellement pouvoir le corriger.

Mais si IE8 le gère, il doit bien être possible de rendre le tout fonctionnel avec IE9.

"utilisateur faché" a écrit :
Non de non, Microsoft, c'est pénible de travailler avec toi

Modifié par LuciferX (28 Sep 2012 - 00:48)

IE9 semble avoir un problème avec position:absolute et overflow:auto sur ton .wrapper

Je ne dis pas que la solution est là, mais ça peut expliquer la source du problème...

En effet, c'est assez bête mais pour IE9 ta div.wrapper n'a pas de hauteur. Ça se vérifie facilement : si tu ajoutes un min-height ( en pixel ), IE9 l'applique.
C'est la logique d'IE, ça me surprend qu'IE8 ne l'applique pas !

La seule solution que je voie est de récupérer la hauteur de la fenêtre... en js