Site 3 colonnes fluides : problème taille iframe centrale

Bonjour à tous

j'essaye de faire un site fluide en 3 colonnes comme celui du tutorial, mais j'ai un soucis avec la zone centrale.
Mes colonnes gauche et droite doivent pouvoir être masquées, donc j'étais parti dans l'optique "pas de taille fixe pour la zone centrale", ce qui marche plutôt bien jusqu'à ce que j'utilise une iframe

Donc mon problème est que comme tout ceux qui veulent faire une appli, je souhaterais que la zone centrale fasse 100% de l'espace "libre" (comprendre de l'espace disponible en dessous de l'en-tête du site).
Et dans cet espace, je souhaite afficher une iframe qui remplisse tout l'espace libre.

J'ai beau faire ce que je veux, pas moyen !

J'ai mis un zip ici avec les sources :
prototype

le problème sous firefox est assez flagrant, là
Si une âme charitable peut m'aider, merci

Je sais que c'est un sujet assez "commun" mais je n'ai pas réussi à m'en sortir avec les tutoriaux d'alsa et les autres sites/forums que j'ai pu lire :'(

Bonjour,

Pour avoir une colonne centrale adaptable (qui vient remplir l'espace libéré par une colonne latérale qui serait absente dans tel ou tel contexte), il y a plusieurs solutions:
- prévoir l'adaptation au niveau de la programmation côté serveur (lorsqu'une colonne latérale est masquée, le bloc central est redimensionné);
- utiliser un tableau (adaptation automatique);
- utiliser deux flottants et un troisième bloc avec un contexte de formatage (adaptation automatique).

La troisième solution est décrite dans le tutoriel suivant:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

Une fois que tu as la structure à trois colonnes souhaitée (la colonne centrale étant une div ou une cellule de tableau), il suffit il me semble de donner une largeur de 100% à l'iframe pour qu'elle s'adapte à la largeur de la colonne centrale.

Je m'étais bien sûr basé sur ce tutoriel, à la base, mais mon problème tient aussi (je pense) au fait que je souhaite avoir mes styles dans un fichier css séparé.

Si je le prend est que je rajoute :

div#centre iframe {
	width:100%;
	height:inherit;
}	

et que je remplace le contenu de colonne3 par

<iframe src="http://www.alsacreations.com"></iframe>

j'ai plusieurs soucis :

- si je ne met pas les tests conditionnels dans mon fichier css, l'affichage IE6 est foireux (l'iframe passe en bas des deux flottants) et firefox est ok

- si je met les tests conditionnels dans le fichier css, IE6 est nickel mais firefox devient foireux (même symptôme, iframe en bas)

image en pièce-jointe


Dans tous les cas, ce système parvient à faire du width 100%, mais rien à faire pour la hauteur, je ne trouve pas de moyen de lui faire utiliser l'espace libre (j'ai essayé height:inherit, height:100%...)

Donc si quelqu'un sait m'en dire un peu plus sur la possibilité de "tricher" dans le fichier css pour que chaque navigateur retrouve ses petits, ça fera déjà au moins le 100% en largeur, et si quelqu'un d'autre sait me répondre pour la hauteur, merci beaucoup

Et bien sûr merci Florent pour la rapidité de ta réponse !

ytse a écrit :
- si je ne met pas les tests conditionnels dans mon fichier css, l'affichage IE6 est foireux (l'iframe passe en bas des deux flottants) et firefox est ok
- si je met les tests conditionnels dans le fichier css, IE6 est nickel mais firefox devient foireux (même symptôme, iframe en bas)

Pas normal, ça. Tu as dû te louper dans l'application du tutoriel.
Une page en ligne?

ytse a écrit :
mais rien à faire pour la hauteur, je ne trouve pas de moyen de lui faire utiliser l'espace libre (j'ai essayé height:inherit, height:100%...)

height: inherit ne fonctionne pas (la hauteur ne s'hérite pas), et height: 100% ne fonctionne... que dans les cas où une hauteur en pourcentage fonctionne. Voir la FAQ du forum sur ce dernier point pour en savoir plus.
Modifié par Florent V. (15 Oct 2007 - 18:10)

Florent V. a écrit :

Pas normal, ça. Tu as dû te louper dans l'application du tutoriel.
Une page en ligne?

http://ytse.free.free.fr/alsa/exemple-3.html
c'est la version avec les conditions (la css est ici http://ytse.free.free.fr/alsa/exemple-3.css )

Florent V. a écrit :

height: inherit ne fonctionne pas (la hauteur ne s'hérite pas), et height: 100% ne fonctionne... que dans les cas où une hauteur en pourcentage fonctionne. Voir la FAQ du forum sur ce dernier point pour en savoir plus.

je vais aller voir ça, mais a priori je n'ai jamais réussi à adapter ce genre d'exemples
Modifié par ytse (15 Oct 2007 - 18:30)

bon j'ai essayé de contourner mon problème pour la largeur 100%
j'ai essayé d'utiliser la gruge qui consiste à mettre "//" devant les styles que je veux faire passer sous IE (firefox ignore la ligne mais IE l'interprète), ça marche bien du coup sous IE et sous firefox.
En revanche, ça marche pas du tout sous Opera (même avant avec les balises conditionnelles), donc pas glop.

Quant au 100%, j'ai essayé d'adapter le code de covertprestige (en mettant donc toujours une iframe dans le contenu) mais ça ne marche pas du tout (j'ai encore la bonne largeur 100% mairs rien à faire pour la hauteur).

Alors il est possible que je sois un énorme boulet, mais là je vois pas bien quoi faire, si une âme charitable veut bien essayer de parcourir le chemin avec moi

ytse a écrit :
Alors il est possible que je sois un énorme boulet

Il y a un peu de ça, en effet. Ou plutôt: un certain manque de rigueur, et du bricolage en aveugle.

Tu pars d'un exemple tout à fait fonctionnel qui se trouve ici:
http://css.alsacreations.com/xmedia/exemples/3colonnes/exemple-3.html

Puis tu prends un bout du code HTML, le suivant:

<!--[if lte IE 6]><style type="text/css">
		div#colonne1 {
			margin-right: 7px;
		}
		div#colonne2 {
			margin-left: 7px;
		}		
		div#centre {
			overflow: visible;
			height: 1%;
		}
	</style><![endif]-->

Tu le coupes, et tu le colles dans ton fichier CSS.

Alors forcément, ça ne marche pas. Niet. Pas du tout.

Pourtant, je pense que l'item de la FAQ du forum qui traite des commentaires conditionnels est assez clair sur leur utilisation. Je cite:

a écrit :
Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer.

De plus, une simple connaissance de base de la syntaxe HTML et de la syntaxe CSS aurait permis de savoir que copier des commentaires en syntaxe HTML dans du code CSS est exclu.

Bref, mon diagnostic final est le suivant:
- manque de rigueur, peut-être dû à un...
- manque de connaissances de bases.

Pour les bases, ça se passe par là:
http://css.alsacreations.com/Comment-debuter-et-trouver-l-information

Bonne continuation.

Ben c'est ce que je te disais dans mon premier message, il me semble, je ne sais pas comment on peut faire du conditionnel dans un CSS (donc apparamment, on peut pas )
Du coup ça me force à maintenir deux fichiers css (ou +, parce que j'ai pas forcément tout dans le même selon la partie du site où je veux aller ) et à inclure les deux dans ma page avec le conditionnel

Bon je vais déjà essayer ça, même si c'est contraignant.

Faut pas croire, hein, je viens pas pour vous embêter, je me suis vraiment tapper une grosse partie des tuto d'alsa depuis plusieurs années (alors après c'est vrai qu'avec le temps j'oublie des choses ), et si c'était qu'alsa, non, j'ai essayé avec le zengarden et encore d'autres sites et forums, j'ai vraiment cherché avant de demander. Je ne rencontre pas de soucis tant que je n'utilise pas d'iframe, en fait, or là c'est ce qu'il me faut (c'est même ma principale source de soucis, car j'ai un autre problème avec les scrollbars dans mes outils sur la droite, elles se positionnent tantôt dedand tantôt en dehors du div, selon les navigateurs...)

Bon en mettant dans deux css séparés j'arrive bien à faire marcher l'exemple sous IE6/Firefox2/Opera9.23, ça me règle la width 100%

Ca va me gaver de devoir maintenir ça, mais si c'est le prix pour avoir une iframe à 100% au centre, je le paierai

Des indices pour le 100% en hauteur ? je vais aller voir si j'arrive à faire quelquechose avec les sites que tu avais mentionné précédemment, à partir de cette "nouvelle" base.

ytse a écrit :
Ca va me gaver de devoir maintenir ça (...)

Bah, ce ne sont pas deux feuilles de style complètes, mais:
- une feuille de style normale (appliquée pour tous les navigateurs);
- une feuille de style avec uniquement des correctifs pour IE6 et inférieurs (maximum dix lignes...).

Si tu as fait deux feuilles de styles complètes et redondantes, il y a gourage dans la méthode.

non non rassure toi je suis pas neuneu à ce point

c'est juste que par définition, deux feuilles de style au lieu d'une = deux fois plus de chances d'en oublier une dans les pages (que je ne suis pas seul à écrire)

Mais bon c'est pas grave, si ça m'évite de devoir maintenir du code JS pour garantir les tailles
Bon sinon je viens d'appliquer ça avec un fond sur mon container principal et je viens de voir que sous IE j'ai un espace entre les blocs (pas sous Firefox ni sous Opera), alors que j'ai bien padding/margin à 0px sur chacune de mes 3 colonnes.
Ca semble venir du "hack", c'est assze bizarre.

Une petite capture :


Pas eu le temps d'essayer autre chose sur le 100% en hauteur.
Modifié par ytse (16 Oct 2007 - 14:48)

Peut-être un peu de Three Pixel Jog?
Dans le tutoriel que tu as pris pour base, il y a un titre qui dit: «Encore un bug d'IE : le Three Pixel Jog». Un peu de lecture s'impose.

Ou alors c'est autre chose, mais sans la page en ligne, ou même à la rigueur deux captures d'écran (pour avoir une idée du rendu attendu...), c'est impossible à dire.

Alors alors
la maquette est visible ici :
http://ytse.free.free.fr/alsa/proto.html

Voici une capture avec IE puis Firefox puis Opera (désolé pour les gros pâtés, j'ai été obligé de masquer certains raccourcis et noms de répertoire pour un peu de confidentialité)


Le résultat attendu en largeur est ce qu'on voit dans Firefox et Opera (les deux du bas), et le but du jeu est que l'iframe centrale (le blanc) descende jusqu'au bas de page.

Je vais aller voir le three pixel jog, le nom paraît correspondre

edit : raaaaaaah mais si je l'avais vu, sauf que je n'avais pas pensé à mettre des margin négatives !! (dans l'exemple il passe de 10 à 7, ce qui laissait de toute manière un espace qui ne me convenait pas)

Bon ben ça c'est réglé

Reste plus qu'à ce que je comprenne le 100% pour l'iframe centrale, et à ce que j'arrive à gérer les scrollbars des iframes dans mes outils

Si ça marche je rajoute un logo alsacreations dans mon appli, c'est mon patron qui sera content

edit 2 : bon au fait je te le redis, MERCI parce que dans tous les cas , aide ou pas aide, ça me fait un soutien
Modifié par ytse (16 Oct 2007 - 16:55)

Pour le height: 100%, déjà il me semble très peu probable qu'on arrive à faire quelque chose de «parfait», par exemple avec l'iframe qui vient se coller pile sur le bord inférieur du viewport (zone de visualisation du navigateur).

Ou alors il faudra faire un peu de dégradation gracieuse pour IE6.

Tiens, on pourrait faire ceci:

div#MonAppliBody {
position: absolute;
top: 80px;
left: 0;
bottom: 10px;
}
#Main, #Main iframe {
height: 100%;
}

Mais comme IE6 ne comprendra pas le top: 80px; bottom: 0;, il va falloir utiliser height pour ce navigateur. Ce qui implique d'avoir une hauteur déterminée pour le parent de div#main, et pour le parent de celui-ci, et ainsi de suite:

html, body, div#container {
height: 100%;
margin: 0;
padding: 0;
}
div#MonAppliBody {
height: 80%;
}

C'est clair que c'est dommage qu'IE 6 et moins ne sachent pas gérer l'élargissement automatique sur top et bottom
Parce que bon si c'est pour mettre un taille en dur autant que je la gère pour tous les navigateurs

J'ai essayé de mettre le applibody en absolu avec un padding-top de 80px mais j'ai pas réussi à faire quelquechose de joli.
Je continue de creuser, en attendant je met un script js "moche" qui calcule la taille de mon applibody en fonction de la taille de la fenêtre moins la taille du div applihead, mais c'est pas très jojo.

Si tu avais aussi une astuce pour les scrollbars de mes iframes dans les outils (le google sur le côté), ce serait top. Sous Opera et IE c'est bon tel quel mais pas sous Firefox, qui rajoute ses propres scrollbars.
Sinon j'avais essayé de ne pas gérer l'overflow sur le "outilbody", mais dans ce cas je me retrouve avec les scrollbars qui sont comptées "à l'intérieur" pour IE et Opera mais "à l'extérieur" pour Firefox.

Qu'estc-e que c'est chiant de gérer cette compatibilité... et encore je parle pas de Safari ou des vieux navigateurs type Netscape

ytse a écrit :
Parce que bon si c'est pour mettre un taille en dur autant que je la gère pour tous les navigateurs

Tu peux faire un truc correct sur un navigateur ancien, et tip-top sur les navigateurs récents, mais tu préfères que ça soit juste correct sur tous les navigateurs?
Je saisis pas la logique, là...

ytse a écrit :
en attendant je met un script js "moche" qui calcule la taille de mon applibody en fonction de la taille de la fenêtre moins la taille du div applihead, mais c'est pas très jojo.

Même chose, tu pourrais passer par CSS pour les navigateurs modernes, et utiliser ta rustine Javascript uniquement pour IE6.

T'inquiète, c'est vraissemblablement ce que je vais faire, si ce n'est que ça me fait encore un bout de code conditionnel

J'ai commencé à l'appliquer à mon prototype hier soir, je le récupère et je le met sur le web pour faire avancer le schmilblik.

Restera la question des petites iframes dans mes outils.

ooooooook

Bon, alors, j'ai fait mes devoirs

Vosu trouverez ici la dernière version de mon prototype
http://ytse.free.free.fr/alsa/php/proto.php?width=1024px&height=768px&iframe_height=95%

vous remarquerez que pour faire mumuse j'ai ajouté la possibilité de définir la largeur et la hauteur du container principal, ainsi que la taille de l'iframe centrale.
Attention je me suis pas amusé à faire 50 tests, il faut que la valeur contienne le type (px ou %) et il faut au moins définir height

J'ai utilisé le CSS2 avec position absolu pour les navigateurs autres qu'IE6 et inférieur, et du JS pour ces derniers. Ca laisse d'ailleurs un effet pas joli sur la frame centrale, faudra que je m'amuse peut-être à charger le contenu de façon "non visible" et que je l'affiche ensuite, mais ça c'est pas bien grave (surtout que là c'est flagrant avec ce faux 1024x768, mais en plein écran on s'en rend moins compte).

Il reste deux problèmes :

j'ai été obligé de mettre un pas beau 95% sur l'iframe centrale, sinon la scrollbar de déplacement horizontale se trouve en dehors de la zone et ça fait un effet très moche si vous procédez comme suit :
1- ouvrez http://ytse.free.free.fr/alsa/php/proto.php (donc container en largeur=hauteur=99.5% - pour éviter un petit pixel de déclage sous Firefox - et iuframe centrale à 100%)
2- remarquerez que la scrollbar verticale dépasse, on ne voit pas la flèche du bas. Scrollez et vous verrez le problème, un effet de rémanensce particulièrement moche (y'a le même sous Opera, je n'ai pas IE7 pour tester).

toujours le problème de l'iframe dans mes outils sur le côté, sous Opera et IE6 pas de soucis mais sous Firefox les scrollbars de l'iframe apparaissent à l'intérieur. Le but du jeu est bien sûr que ce soit le container (l'outil) qui scrolle, pas l'iframe elle-même, puisque certains outils ne contiennent que du "innerhtml".

A votre disposition pour des essais ou commentaires, merci à tous ceux qui prendront la peine de jetter un oeil
Modifié par ytse (18 Oct 2007 - 12:06)