5568 sujets

Sémantique web et HTML

[Résolu] Iframes, 100%, ...

Bonjour à tous !

Je bute maintenant depuis quelques heures sur un problème, et mes recherches n'ont pas été fructueuses... Du coup j'en profite pour m'inscrire ici, et de venir régulièrement Smiley smile

Je m'explique :

Je travail sur un applicatif métier basé sur le xsl et du html. Pour des raisons d'évolutions mineures, je dois transformer les frames en iframes... (ouai on a du retard). Bref je suis bloqué sur un soucis de mise en page.

J'ai 4 iframes : une pour la bannière à hauteur fixe, et 3 pour les colonnes dont 2 à largeur fixe.

Mon problème est que lorsque je défini la hauteur et la largeur à 100%, cela rajoute les valeurs fixes et me sort donc une ScrollBar que je ne veux pas.

Voici mon code :


			<body style="margin:0; padding:0;">
					<iframe width="100%" height="{$BandeauWidth}" src="header.html" frameborder="NO" scrolling="NO" noresize="noresize" marginwidth="0" marginheight="0" name="header" />
					
					<div style="width:100%; height:100%">
						<iframe height="100%" id="menu" style="float:left;" width="{$MenuWidth}" frameborder="NO" name="menu" scrolling="no" src="menu.html" />
						<iframe height="100%" id="Splitter" style="float:left" width="10"  border="0" frameborder="NO" name="Splitter" scrolling="no" noresize="noresize" src="MenuSplitter"/>
						<iframe height="100%" id="body" style="display:block; width:100%" border="100%" frameborder="NO" name="body" noresize="" src="body.html" scrolling="AUTO" />
					</div>

					
			</body>


Je n'utilises jamais les iframes (c'est la première fois d'ailleurs)... Et je cherche à éviter le Javascript, mais si je n'ai pas le choix, tant pis, et donc d'avoir une solution 100% Html + CSS...

Alors est-ce une erreur de débutant, et dans ce cas là je me reconverti dans la couture ? Ou alors je m'y prends mal ? Smiley sweatdrop
Modifié par div1n (26 Jul 2010 - 08:24)
Bonjour,
le scrollbar viens du fait des 100% ?
je pensé que cela dépendait de la taille de ce qu'on mettait dedans enfaite .. mais j'y connais pas grand chose je m'en sers jamais ..
Salut,

Concernant la hauteur, il faut aussi appliquer height:100% à html et body...
html, body {height:100%}

Concernant la largeur, il y a effectivement deux iframe à 100%... Une seule avec cette largeur, c'est déjà une de trop.
mathieu1004 a écrit :
Bonjour,
le scrollbar viens du fait des 100% ?

Je parle de scrollbar correspondant à tout le document, car s'il y a une scrollbar à l'intérieur de l'iframe, ce n'est pas un problème.

Je souhaites surtout que le 100% prenne bien tout l'espace libre, et non la taille du conteneur parent (ce qui est ici le cas vu qu'il prend l'espace libre, + la taille des autres iframes)

Eric2A a écrit :
Concernant la hauteur, il faut aussi appliquer height:100% à html et body...


Je viens d'y mettre, et rien y fait...

Eric2A a écrit :
Concernant la largeur, il y a effectivement deux iframe à 100%... Une seule avec cette largeur, c'est déjà une de trop.


Je ne te suis pas... C'est bien ce que je veux, que la 1ere frame (bannière) soit à 100%, et que la dernière (contenu) le soit également...

Mais un bon schéma vaut mieux qu'un long discours... Voila ce que j'ai actuellement, et je ne veux pas des parties rouge et marron :

upload/31272-alsa-schem.gif
Bonjour,

Ce qui est marrant, c'est qu'à chaque fois que tu fixes une largeur ou une hauteur à "100%", cela signifie (pour toi) «100% de la hauteur ou largeur que JE VEUX que ça prenne». Or, tu te doutes bien que le navigateur ne peut pas deviner tes intentions.

C'est le piège des dimensions en pourcentages, surtout les hauteurs.

Concrètement, quand tu mets un height="100%" à tes iframes (en HTML, mais tu peux déclarer la même chose en CSS et ça sera le même effet), tu veux dire par là «100% de l'espace visuellement libre». Tu as alors deux problèmes:
- cette notion d'espace «libre» n'existe pas dans le navigateur;
- une hauteur en pourcentages sur un élément fera référence à tout autre chose, à savoir la hauteur du parent, pour peu que cette dernière soit spécifiée (pas de height:auto).

Bref, c'est une mauvaise piste.

Les pistes intéressantes (en supposant une hauteur du header de 150px):
- height:calc(100% - 150px) en CSS3 (support dans le futur Firefox 4, donc c'est pas pour tout de suite);
- height:auto; position:absolute; top:150px; bottom:0; (tous navigateurs, dont IE à partir de la version 7).

À moins que la couture ne soit la passion de ta vie, je te conseille donc la technique de positionnement absolu esquissée ci-dessus.
Si par malheur tu as besoin d'assurer le support d'IE6, il faudra passer par JavaScript pour ce dernier (script réservé à IE6 qui calcule une hauteur explicite pour les iframes).

Pour finir: je ne vois vraiment pas l'intérêt d'utiliser des iframes ici, plutôt que des frames. Quelle est la motivation de ce changement?
Modifié par Florent V. (23 Jul 2010 - 14:35)
Merci de ta réponse Florent V.

Je vais explorer tes pistes, mais je sens que je vais devoir me tourner vers une solution en Javascript. Et comme c'est un applicatif métier, et que je ne peux pas imposer un navigateur, je vais devoir supporter IE6.

Florent V. a écrit :

Pour finir: je ne vois vraiment pas l'intérêt d'utiliser des iframes ici, plutôt que des frames. Quelle est la motivation de ce changement?


Tout simplement car je n'ai pas spécifié que je fait tout ce grabuge pour mettre en place un composant de menu fonctionnant comme une application "fenêtre" (Fichier, Edition, ...), que je ne peux mettre en place qu'avec des iframes car cela lui permet d'être "par-dessus" le contenu lorsque je cliques sur une entrée...
OK, intéressant la motivation du passage aux iframes.

div1n a écrit :
je sens que je vais devoir me tourner vers une solution en Javascript

Comme je le suggérais: CSS pour tout le monde, JavaScript uniquement pour IE6 (via commentaire conditionnel).
Modifié par Florent V. (23 Jul 2010 - 18:58)
Sujet clos
Aller à