1

Bonjour à vous,

Débutant en HTML, je cherche à faire ceci :

exempleu.png

C'est à dire, avoir une page en 2 parties (frames ou non) avec un ascenseur horizontal seulement pour la partie de droite et un ascenseur vertical qui agit pour les 2 parties

Est-ce possible?
merci
Andy
Si l'envie de travailler te prend, assieds-toi et attends qu'elle te passe!

2

Tu peux très bien avoir des ascenseurs dans des divs (avec le style overflow:scroll; ou overflow:autowink. Ensuite, tu peux choisir ne n'afficher qu'un des deux ascenseurs avec overflow-x:hidden; ou overflow-y:hidden;.
Après, en fonction des divs (ou des iframes, le concept est le même, les styles sont adaptables à ces deux contenants) que tu vas choisir de styler, ça va faire exactement ce que tu veux.
avatar

3

1) Merci de ta réponse

2) Pas taper, comme je l'ai dit, je débute de chez débute (et j'ai du mal avec les div/style etc... :/)

J'ai écrit déjà ca (wwahhoouu) (sans les overflow car en fait j'ai déjà d'autres soucis grin)

<div>
<IFRAME src="testnom.html" width=380></IFRAME>
<IFRAME src="testbod.html"></IFRAME>
</div>

en gros, la "iframe" qui est en orange a une largeur fixe de 380px. J'aimerais bien que la 2ème (vert/orange) s'adapte à la largeur qui reste de la page. Est-ce possible?

Ensuite, est-il possible d'avoir les iframes qui s'adaptent en hauteur au contenu? Comme ca je pourrais profiter de l'ascenseur vertical du browser.
Si l'envie de travailler te prend, assieds-toi et attends qu'elle te passe!

4

andysapo81 (./3) :
en gros, la "iframe" qui est en orange a une largeur fixe de 380px. J'aimerais bien que la 2ème (vert/orange) s'adapte à la largeur qui reste de la page. Est-ce possible?

Alors en gros, après m'être emmerdé avec les CSS pour ce genre de disposition, je suis revenu aux tables classiques en HTML (qui permettent exactement ce type de comportement de façon très simple). Certains vont dire que c'est sale, mais au moins ça marche grin
andysapo81 (./3) :
Ensuite, est-il possible d'avoir les iframes qui s'adaptent en hauteur au contenu? Comme ca je pourrais profiter de l'ascenseur vertical du browser.

Je ne sais plus comment se comportent les iframes au niveau du contenu, donc je suis bien en mal de te répondre, désolé.

Sinon, petits détails :
- En xhtml, le nom des balises est en minuscule.
- width=380, on ne l'utilise plus trop (sauf si tu veux vraiment faire du HTML) ; on lui préfère style="width:380px;"
avatar

5

Nil > pareil que toi pour les table. S'ils avaient voulu qu'on se serve des div et du css, ils n'avaient qu'à fournir un truc utilisable plutôt que d'obliger à se servir de hacks immondes.
avatar
<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

6

Savez-vous comment je pourrais faire ça avec des tables?

Car j'ai aussi essayé et je n'arrive pas à avoir une lageur fixe pour la première colonne et une largeur qui s'adapte pour la seconde avec sa barre de défilement horizontale dessous
Si l'envie de travailler te prend, assieds-toi et attends qu'elle te passe!

7

Je peux te fournir le layout que j'ai fait pour mon truc, je t'envoie ça demain (si j'y pense grin)
avatar

8

J'veux bien wink
Si l'envie de travailler te prend, assieds-toi et attends qu'elle te passe!

9

Bon, j'ai vérifié et je ne colle pas vraiment à ce que tu cherches (toutes mes dimensions sont fixées)... j'essaye de redéfinir un layout plus proche de ce que tu cherches pour toi ^^
avatar

10

Flanker (./5) :
Nil > pareil que toi pour les table. S'ils avaient voulu qu'on se serve des div et du css, ils n'avaient qu'à fournir un truc utilisable plutôt que d'obliger à se servir de hacks immondes.

guitar

11

J'ai réussi à adapter à quelque chose d'approchant, mais ça n'est pas exactement ce que tu veux... (en particulier, le scroll n'est pas pour toute la page, mais juste pour le cadre de droite).
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <style type="text/css"> body { padding:0px; margin:0px; } table { table-layout:fixed; position:absolute; height:100%; } .cadre_infosIndividus { padding:0px; border-collapse:collapse; height:100%; } .cadre_listes { border: 0px none; width:380px; height:100%; border-collapse:collapse; } .cadre_listes_inside { border: 0px none; width:380px; border-collapse:collapse; height:100%; overflow:hidden; } .cadre_infosIndividu { width:100%; height:100%; border: 0px none; border-collapse:collapse; } .cadre_infosIndividu_inside { width:100%; height:100%; border: 0px none; border-collapse:collapse; overflow-x:auto; overflow-y:auto; } ul { padding-left:10px; margin-left:10px; } </style> </head> <body> <table id='cadre_infosIndividus' class='cadre_infosIndividus'> <tr> <td id='cadre_listes' class='cadre_listes'> <iframe src="testnom.html" class='cadre_listes_inside' id='cadre_listes_inside'> </iframe> </td> <td class='cadre_infosIndividu'> <iframe src="array_view.php" id='cadre_infosIndividu_inside' class='cadre_infosIndividu_inside'> </iframe> </td> </tr> </table> </body> </html>
avatar

12

Y'a plein de façons de faire ça: <!DOCTYPE html> <html> <head> <style type="text/css">/* <![CDATA[ */ /* ]]> */</style> </head> <body> <div class="left"> <div id="menu"> Gauche </div> </div> <div class="right"> <div id="contents">Droite</div> </div> </body> </html>round-color: #0f0; /* Pour visualiser */ }Avec des variantes sur le CSS, par exemple:body { position: relative; padding: 0 0 0 250px; margin: 0; } .left { position: absolute; margin: 0 0 0 -250px; padding: 0; width: 250px; overflow: hidden; } .right { margin: 0; padding: 0; width: 100%; overflow: hidden; } #menu { margin: 0; padding: 5px 10px; overflow: hidden; background-color: #f00; /* Pour visualiser */ } #contents { margin: 0; padding: 5px 10px; overflow: auto; white-space: pre; /* Pour tester l'overflow */ backgbody { position: relative; margin: 0; padding: 0; } .left { position: absolute; margin: 0; padding: 0; width: 250px; overflow: hidden; } .right { position: absolute; margin: 0; padding: 0; left: 250px; right: 0; overflow: hidden; } #menu { margin: 0; padding: 5px 10px; overflow: hidden; background-color: #f00; /* Pour visualiser */ } #contents { margin: 0; padding: 5px 10px; overflow: auto; white-space: pre; /* Pour tester l'overflow */ background-color: #0f0; /* Pour visualiser */ }body { margin: 0; padding: 0 0 0 250px; } .left { float: left; margin: 0 0 0 -250px; padding: 0; width: 250px; overflow: hidden; } .right { margin: 0; padding: 0; width: 100%; overflow: hidden; } #menu { margin: 0; padding: 5px 10px; overflow: hidden; background-color: #f00; /* Pour visualiser */ } #contents { margin: 0; padding: 5px 10px; overflow: auto; white-space: pre; /* Pour tester l'overflow */ background-color: #0f0; /* Pour visualiser */ }
avatar
Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

13

Merci à vous, je vais tester ca
Si l'envie de travailler te prend, assieds-toi et attends qu'elle te passe!

14

Ca marche nickel en effet! Je n'arrivais pas à le faire fonctionner au boulot et je ne savais pas pourquoi... puis j'ai utiliser firefox smile En fait n est sur IE6 ici et ca ne semble pas tres bien compatible.

Je te remercie pour ton aide !!! wink

Andy
Si l'envie de travailler te prend, assieds-toi et attends qu'elle te passe!

15

pour IE6, lil faut utiliser le bon doctype switching pour que ca marche
Ancien pseudo : lolo