Fenêtre fluide

Bonjour à tous.

Avant toute chose, je voulais vous remercier, parce que le site et le forum m'ont déjà vraiment aidé. Mais j'arrive maintenant à un point où j'ai plus besoin d'une aide personnalisée.

Je vais aussi donner mon niveau avant de commencer : jusqu'a il y a peut de temps, je ne connaissais que les mises en forme de texte par les css. Depuis que j'ai commencé un nouveau site, comme j'ai décidé de passer à quelque chose de propre, j'ai du apprendre beaucoup.

J'essaye donc de faire quelque chose de propre en xhtml+css en évitant au maximum les javascripts et bien sur les frames/iframes.

Je suis donc partis à la base de quelque chose qui devait ressembler à cette image pour arriver à une page (vide) qui est celle ci.

Pour la mise en page du cadre central, deux choix s'ouvrent à moi :
- Soit quelque chose qui ressemble un peu à une iframe (avec la scrollbar en interne etc., comme visible là) mais cette solution pose un problème majeur qui est que l'overflow est mal rendu dans IE. Ce qui fait que ma belle iframe (pardonnez ce raccourci) fonctionne sous opera, firefox, mais sous IE, le texte continue en dehors de la page.
- Ce qui amène la deuxième solution possible, qui est que si le texte dépasse de la page, autant faire continuer la page en bas. En plus clair, j'aurais aimé quelque chose qui soit au minimum de la taille de l'écran (comme sur les exemples donné au dessus), et au maximum de la taille de la page (la scrollbar serait celle du navigateur uniquement). Malheureusement, je n'ai pas trouvé le moindre début de solution pour ce deuxième cas, et ce n'est pas faute d'avoir essayé...

Je sais que ni la source ni les images ne sont totalement optimisés, mais ce qui m'importe pour l'instant, c'est que ça fonctionne. C'est à dire que normalement, ce site aurait déjà du être en ligne, donc dans le pire des cas, je me rabattrais sur une solution pas propre, mais qui fonctionne, en attendant LA solution.


J'ai d'autres problèmes à la con, que j'arrive pas à résoudre facilement, mais à dire vrai, je me suis pas tellement penché dessus vu le problème majeur pour l'instant (le cache du menu pas fait sous opera, décaler un menu comme sur l'image de base, enfin que des broutilles comme ça).

Alors si vous pouviez me donner des indices (ou des solutions ) ce serait vraiment génial, parce que j'essaye de faire le mieux possible (d'ailleurs, au passage, pour l'instant, c'est valide aussi bien le xhtml que le css).

D'avance merci

Cqoicebordel a écrit :
- Ce qui amène la deuxième solution possible, qui est que si le texte dépasse de la page, autant faire continuer la page en bas. En plus clair, j'aurais aimé quelque chose qui soit au minimum de la taille de l'écran (comme sur les exemples donné au dessus), et au maximum de la taille de la page (la scrollbar serait celle du navigateur uniquement). Malheureusement, je n'ai pas trouvé le moindre début de solution pour ce deuxième cas, et ce n'est pas faute d'avoir essayé...

Pour faire court, ce cas n'est pas vraiment gérable en CSS.
Au mieux, on peut faire une page extensible en hauteur (barre de défilement sur la fenêtre du navigateur si jamais le contenu dépasse l'espace disponible dans un écran), en lui donnant également une hauteur minimale (genre 450 pixels) pour éviter d'avoir quelque chose de trop ramassé lorsque le contenu est très court.

Il faudra alors utiliser min-height, compris par la plupart des navigateurs... mais pas IE... donc il faudra aussi :
- soit accepter une dégradation esthétique dans IE (le contenu restant parfaitement accessible)
- soit utiliser une feuille de style conditionnelle pour IE, en lui passant la propriété height: 450px; rien que pour lui (IE considère la propriété height comme une indication de hauteur minimale, tant que l'on n'utilise pas de propriété overflow pour la même boite.

Sinon, un tableau unique peut peut-être donner un résultat satisfaisant. Les fanatiques diront que les tableaux pour la mise en page c'est très mal, mais c'est une critique qu'il faut relativiser. Un unique tableau pour la structure générale de la page n'est pas forcément une hérésie. Tant que l'on n'utilise pas de cellules vides, et surtout pas de tableaux imbriqués (un tableau dans une cellule d'un tableau lui-même dans une cellule de tableau !), ça peut aller. Et ça devrait rester accessible.

Un tableau global semble effectivement être une solution envisageable, et qui fonctionnerait.
J'essayais en effet, d'éviter les tableaux au maximum, mais s'il n'y a que ça qui fonctionne, autant les utiliser.

Je vais essayer ça et je vous tiens au courant.

Mais sinon personne n'a d'idées pour faire une sorte de iframe ? (c'est juste pour voir après esthétiqement quelle est la meilleur solution)

En tout cas, merci à toi mpop

Bloc de type iframe :

N'importe quel élément de type bloc (par exemple une div) avec :

height: [i]n[/i]px;
overflow: auto;

mpop a écrit :
Bloc de type iframe :

N'importe quel élément de type bloc (par exemple une div) avec :

height: [i]n[/i]px;
overflow: auto;

Oui, je sais bien ça, le problème étant que le n est variable, et ne correspond pas non plus à un pourcentage. Donc je ne peux rien faire sous IE.
Le overflow était mis pour la page que j'ai donné en exemple.