5607 sujets

Sémantique web et HTML

[Résolu] Frames

Bonjour à tous
J'ai besoin de pouvoir diviser l'écran entre
- un bandeau horizontal fixe
- deux bandeaux verticaux côte à côte dont la limite peut être changée à la souris
Dans ma jeunesse, ça se faisait en utilisant des <frame>, mais je n'ose imaginer la volée de bois vert si je reprenais cette technique ! Smiley confused
Quelle solution standard utilise-t-on de nos jours?
Merci de m'aider à moderniser mes pratiques Smiley biggrin
Modifié par PapyJP (23 Aug 2017 - 08:52)
Modérateur
Bonjour PapyJP,

Et bien il y a moultes solutions comme les grid (https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html) les float (https://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html) le flexbox (https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html) ou juste un bon vieux inline-block des familles.

Du coté html tu peux regarder du coté des balise HTML5 (header, main, aside, footer) https://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html

Et si t'es en panne d'inspiration tu as plein de générateurs de layout dont Schnaps fait par les kiwi d'Alsa https://schnaps.it/

Bonne journée
Meilleure solution
Bonjour,

Effectivement, l'utilisation de frames n'est pas recommandée. Cette page en cite les principales raisons : https://www.tutorialspoint.com/html/html_frames.htm
Pour une approche moderne, je conseille l'utilisation de flexbox pour du positionnement adaptatif natif, ou de bootstrap ( http://getbootstrap.com/) pour de l'adaptatif plus poussé si besoin est.

Si tu as besoin de détail du code, je peux en fournir rapidement je pense. J'aurais juste besoin de savoir ce que tu appelles "bandeau", "fixe" et "limite" (un croquis serait le bienvenu Smiley cligne ).

mistiru
Modérateur
hahaha j'avais loupé le "dont la limite peut être changée à la souris" (la partie la plus importante quoi) #malréveillé
Voici comment on faisait quand j'étais jeune, en 1999.
Il m'a fallu un peu de temps pour retrouver le truc dans mes archives:
https://tests.osirisnet.net/migration/tests/framset.html

<html>
	<head>
		<title>Cadres</title>
	</head>
	<frameset framespacing="0" border="1" frameborder="1" rows="10%,*">
		<frame name="bandeau" src="bandeau.html" noresize="noresize">
		<frameset framespacing="0" border="1" frameborder="1" cols="10%,*">
			<frame name="gauche" src="gauche.html" scrolling="auto">
			<frame name="droite" src="droite.html" scrolling="auto">
	</frameset>
</html>

Modifié par PapyJP (23 Aug 2017 - 10:47)
Complément d'info:
les "src" sur des pages distinctes sont inutiles, de bêtes <div> présentant la même apparence et le même comportement à l'écran seraient tout à fait satisfaisantes.
En d'autre terme, je chercher à styler

<body>
    <div id="ribbon"><h1>...</h1></div>
    <div id="pagebody">
        <div id="left-panel">....</div>
        <div id="right-panel">....</div>
    </div>
</body>

et changer la frontière entre left-pannel et right-pannel par JS me conviendrait parfaitement.
Modifié par PapyJP (23 Aug 2017 - 17:53)
Bonsoir
J'ai passé la journée à essayer de faire fonctionner ce bazar, sans succès.
Quels que soient les paramètres CSS que j'affecte = ces <div>, je ne parviens pas à faire en sorte que left-panel et right-panel prennent toute la hauteur de la fenêtre et se dotent d'une barre de défilement verticale quand le contenu est trop grand.
Tout ce qui se passe quand on scrolle, c'est que l'ensemble de la page se déplace, et pas chaque "panel" séparément.
Voici le dernier état du chantier voir https://tests.osirisnet.net/migration/tests/cadres.html</i>

<body>
		<header><h1>En-tête</h1></header>
		<main>
			<div id="leftPanel">
				<div class="panel">
					<h2>Panneau de gauche</h2>
					<p>Lorem ipsum .......</p>
				</div>
			</div>
			<div id="rightPanel">
				<div class="panel">
					<h2>Panneau de droite</h2>
					<p>Lorem ipsum .......</p>
				</div>
			</div>
		</main>
    </body>



html, body{width:100%;height:100%;font-size:11px;font:caption;}
/* unwanted default values */
*, *:before, *:after {box-sizing: border-box;margin:0;padding:0;}
q:before, q:after, cite:before, cite:after{content:none;}
table, tr, td, th, tbody, thead{border: 0;}
h1,h2,h3,h4,h5,h6 {
	display:block;
	font-size:1.0em;
	font-weight:bold;
}

body {display:table;position:relative;}
header {
	position:fixed;
	top:0;
	left:0;
	z-index:2000;
	height:6em;
	border-bottom:1px solid blue;
	text-align:center;
	width:100%;
	padding:2em;
	background-color:white;
}
h1 {line-height:100%;font-size:2em;}
h1, h2 {text-align:center;}
main { 
	display:table-row;
	position:relative;
}
#leftPanel {
	display:table-cell;
	width:20%;
	border-right:1px solid red;
	padding-top:6em;
}
#rightPanel {
	display:table-cell;
	width:20%;
	width:80%;
	padding-top:6em;
	border:1px solid green;
}
.panel {
	padding:1em;
	height:100%;
	overflow-y:auto;
	text-align:justify;
}


Il me semble invraisemblable, après plus de 10 années de polémique "anti-frame", qu'il n'y ait pas de solution simple à un problème aussi simple.
Quand on clame que quelque chose est obsolète, le moins qu'on puisse faire c'est de dire par quoi on peut le remplacer!
La nuit portant conseil:

html, body{width:100%;height:100%;font-size:11px;font:caption;}
/* unwanted default values */
*, *:before, *:after {box-sizing: border-box;margin:0;padding:0;}
q:before, q:after, cite:before, cite:after{content:none;}
table, tr, td, th, tbody, thead{border: 0;}
h1,h2,h3,h4,h5,h6 {
	display:block;
	font-size:1.0em;
	font-weight:bold;
}

body {display:table;position:relative;overflow:hide;}
header {
	position:fixed;
	top:0;
	left:0;
	z-index:2000;
	border-bottom:1px solid blue;
	text-align:center;
	width:100%;
	padding:2em;
	background-color:white;
}
h1 {font-size:2em;}
h1, h2 {text-align:center;}
main { 
	display:table-row;
	position:relative;
}
.panel {
	display:table-cell;
	padding-top:6vh;
}
#leftPanel {
	width:20%;
	border-right:1px solid red;
}
#rightPanel {
	width:80%;
	border:1px solid green;
}
.panel > div {
	padding:1em;
	height:92vh;
	overflow-y:auto;
	text-align:justify;
}

En exprimant les hauteurs en vh, on a de "vraies" hauteurs.
Il doit exister une façon de mettre les hauteurs en %, puisqu'on a défini 
html, body{width:100%;height:100%;}

mais je n'ai pas trouvé comment faire ça correctement. Je suppose qu'il doit y avoir une rupture dans la suite de height:100% que j'ai mises dans le code.
voir https://tests.osirisnet.net/migration/tests/cadres.html
Je vais maintenant m'attaquer au problème de "resize".
Modifié par PapyJP (24 Aug 2017 - 09:47)
Après beaucoup d'efforts, je suis finalement arrivé à obtenir ce que je désirais. Smiley sweatdrop
https://tests.osirisnet.net/migration/tests/cadres2.html
Cette solution, à base de HTML, CSS et JS, est lourde et complexe, alors qu'elle tenait en quelques lignes de HTML il y a 18 ans.
J'ai du mal à croire qu'il n'existe pas de solution plus simple.
Je suis toujours désireux de recevoir vos propositions de solution.
Bonjour,

Le code ci-dessous te convient-il ?
Effectivement, c'est un peu plus long qu'avec des frames, mais c'est beaucoup moins sale Smiley cligne
Je suis à l'écoute si besoin de plus de renseignements, ou même de critiques =)

mistiru


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Avec Flexbox</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        .container-full-vertical {
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
        }
        #bandeau-horizontal {
            flex: 0 0 auto;
            background-color: green;
        }
        #titre {
            text-align: center;
        }
        #corps-page {
            flex: 1 0 0;
        }
        .container-full-horizontal {
            display: flex;
            flex-flow: row nowrap;
        }
        #colonne-gauche {
            flex: 0 0 200px;
            background-color: red;
            overflow-y: auto;
        }
        #colonne-droite {
            flex: 1 1 auto;
            background-color: yellow;
            overflow-y: auto;
        }
    </style>
</head>
<body>

<div class="container-full-vertical">
    <div id="bandeau-horizontal">
        <h1 id="titre">Titre de la page</h1>
    </div>
    <div id="corps-page" class="container-full-horizontal">
        <div id="colonne-gauche">
            Insérer ici beaucoup de texte pour voir le défilement.
        </div>
        <div id="colonne-droite">
            Insérer ici beaucoup de texte pour voir le défilement.
        </div>
    </div>
</div>

</body>
</html>
Merci de ta réponse
Comme je l'ai déjà dit sur ce forum, j'ai fini par laisser tomber les flex et autres nouveautés qui ne sont pas supportées de façon homogène par tous les navigateurs, mais il se trouve que dans ce cas précis je n'ai pas besoin que ce soit supporté par autre choses que la version courante de Chrome et de Firefox. En effet il s'agit d'un outil d'administration du site, auquel j'ai l'intention de donner un aspect aussi semblable que possible aux outils qui tournent sur PC, donc pas de problème de support des anciennes versions de IE, responsiveness ni touch device.

Plein d'espoir, j'ai reporté ton code dans cette page
Dans l'état actuel, cela ne correspond pas à mes besoins, car le défilement a lieu sur toute la page, y compris le titre qui disparait dans les nues, et non à la seule colonne qui déborde.
D'autre part il reste à coder en JS la modification de la limite à la souris, mais ça j'ai déjà fait dans cette autre page
Mais peut être pourrais tu modifier le code pour que cela se rapproche de mes besoins?
Modifié par PapyJP (25 Aug 2017 - 12:20)
Modérateur
Hello Papy,

Un petit codepen Smiley smile
Est-ce que c'est ça qu'il te faut ?

sorry je vois des réponses qui sont arrivées entre temps. J'ai commencé mon message ce matin et j'ai oublié de le posté...
Modifié par Yordi (25 Aug 2017 - 13:45)
Merci Yordi
Ton codepen est encore très loin de ce que je désire faire... et que j'ai fait dans cette page
Je cherche simplement s'il existe un moyen plus simple de faire la même chose, et qu'on faisait comme ça il y a longtemps.
Les arguments contre les <frame> et <frameset> sont inappropriés en ce qui concerne mon cas précis, donc je pourrais théoriquement reprendre cette approche, sauf que j'ai besoin d'utiliser d'autres fonctionnalités qui n'existaient pas à cette époque.
Il s'agit de faire une application administrative sur le site, donc beaucoup de CSS, JS, AJAX, ... je ne vais pas commencer par une structure de page prohibée en HTML5, même si les navigateurs la supportent toujours par compatibilité.
PapyJP a écrit :
Dans l'état actuel, cela ne correspond pas à mes besoins, car le défilement a lieu sur toute la page, y compris le titre qui disparait dans les nues, et non à la seule colonne qui déborde.
Je ne suis pas sûr de bien comprendre.
Tu dis que tu veux que ça défile sur toute la page, ou que la version que j'ai donné le fait (et que ce n'est pas ce que tu veux) ?
Si c'est le second cas, je n'ai pas testé avec d'autres explorateurs que chromium, et j'obtiens alors cela : https://mega.nz/#!zUQTXIaA!1h1vLfE-RypIaICo56Lp4eg4o0tGlzQT4wrl6_XE9Os
Je ne peux scroller que si le texte est trop grand, et cela que dans la colonne concernée.
Est-ce le cas pour toi aussi ? Est-ce ce que tu veux ?

Désolé de l'incompréhension
Merci de ta réponse
Ce que je veux obtenir, c'est ce que fait la page https://tests.osirisnet.net/migration/tests/cadres2.html et que faisait aussi bien la page https://tests.osirisnet.net/migration/tests/framset.html qui fait appel à des fonctionnalités en principe plus supportées en HTML5 et qui étaient si simples à utiliser
Ce qui devrait donner à réfléchir, c'est que l'ensemble de la communauté Internet a apparemment accepté de telles restrictions de fonctionnalités sans broncher...
Pour clore le débat, j'ai bien la réponse à ma question : il n'y a pas de solution simple à ce problème simple et ça n'a pas l'air de préoccuper grand monde! Smiley biggrin
Sujet clos