HTML : faire une "pseudo-frame" avec des <DIV> : fouyaya !
HTML : faire une "pseudo-frame" avec des <DIV> : fouyaya ! - HTML/CSS - Programmation
)
Marsh Posté le 19-08-2002 à 01:43:18
C'est une bonne question que tu poses-là.
Je vais y réfléchir... mais pas maintenant parce qu'il serait déraisonnable de faire ça à une heure pareille.
(j'étais sûr que ce lien donnerait des sueurs froides à certains)
Marsh Posté le 19-08-2002 à 03:05:03
Yep ce foutu lien est en train de pousser mon petit cerveau dans ses derniers retranchements... viiiiiiite il va bientôt gicler par les oreilles !
Marsh Posté le 19-08-2002 à 11:03:20
bon, y a moyen de faire à peu près ce que tu veux, mais le scroll ne sera jamais comme tu le désires, il prendra toujours la totalité de la hauteur.
Si tu veux, je te montre un exemple.
Marsh Posté le 19-08-2002 à 11:12:09
Teste ça :
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
background: #cce;
font: 11px/1.5em verdana, sans-serif;
}
#container {
z-index: 0;
height: 90%;
width: 100%;
overflow: auto;
position:absolute;
top:80px;
margin:0px 0px 0px 0px;
}
#content {
margin: 0px 40px 40px 250px;
border: 1px solid white;
background: #779;
color: #eee;
padding: 20px;
}
#fixed {
z-index: 3;
border: 1px solid white;
background: #55a;
color: white;
font-weight: bold;
position: absolute;
top: 80px;
left: 40px;
width: 180px;
padding: 10px;
}
#top
{position:absolute;
left:0px;
top:0px;
background:gray;
height:40px;
scrollbar:no;
overflow:hidden;
width:100%;
}
h3 {
font-size: 16px;
line-height: 1.2em;
}
</style>
</head>
<body>
<div id="fixed">
<h3>look, ma, no frames!</h3>
test test<br />
test test<br />
test test<br />
test test<br />
test test<br />
</div>
<div id="top">
asfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</div>
<div id="container">
<div id="content">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</div>
en gras les changements.
Note : overflow ne passe pas sous Opera, aucun espoir de pseudo-frames qui fonctionnent.
Note 2 : c'est plus que laid sous NN6 (double scroll).
EDIT : en mettant la hauteur du #container à 87%, avec les autres données que j'ai mises, on arrive à éviter le double scroll sous NS6 en 1024X768 . Autant dire que c'est une méthode de goret 
Mais ce n'est qu'un premier essai
Par contre le scroll ne prend pas toute la hauteur, bref, ça joue pas mal pour IE !
Message édité par deliriumtremens le 19-08-2002 à 11:40:13
Marsh Posté le 19-08-2002 à 12:22:19
Merci pour la soluce. En effet je me doutais que ces "pseudo-frames" étaient inefficaces sous certains browsers (j'ai testé sur Opera 5.12 -> tout le contenu scrolle... bah, c pas la cata....)
Vais essayer de peaufiner tout ça. Si d'autres ont des améliorations à apporter...
Marsh Posté le 19-08-2002 à 12:40:00
Argh j'ai le même problème qu'avant : la barre de défilement est plus ou moins masquée suivant la hauteur qu'on donne à la page 
Je crains que ca reste impossible en somme...
Marsh Posté le 19-08-2002 à 12:40:28
Testé rapidement avec Mozilla et IE 6 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
Les problèmes :
- toutes les frames sont en pourcentage (pas trouvé d'autres solutions avec IE...). S'il y'en a qui savent leur donner des tailles fixes en pixel et faire en sorte qu'elles s'adaptent à la taille de la fenêtre, je suis preneur.
- Sous IE, il y a une double barre de défilement. Si je mets overflow: hidden; à BODY, tout part en *ouilles.
Bon je continue à chercher...
Edit: on oublie le deuxième problème, erreur de frappe de ma part 
Mais si on met overflow: hidden; ça change rien avec IE, on garde la double barre...
Message édité par gm_superstar le 19-08-2002 à 12:43:13
Marsh Posté le 19-08-2002 à 12:49:20
J'avais pensé à une technique, sauf que j'en chie pour mettre en pratique :
créer un <div> qui prend toute la page, avec le contenu à scroller ; (et un attribut "padding-top" égal à la hauteur de ce qui suit : )
au dessus, foutre un <div> immobile (la barre de menu p.ex.) qui reste fixe quand on scrolle 
Marsh Posté le 19-08-2002 à 13:09:49
euh... je ne sais pas si tu as regardé la page index2.html sur le même site, parce qu'elle fait ce que tu veux, du moins pour IE et Mozilla.
Le problème, c'est de choisir entre la compatibilité avec Opéra ou celle avec IE, parce que le CSS, tel qu'il est présenté, même si il est correct dans la syntaxe, ne l'est pas dans la philosophie du CSS. Il utilise une position absolue pour que ca passe sous IE, alors que l'attribut consacré pour cette fonction est fixed, reconnu par Opéra et Mozilla, mais pas par IE.
![[:totoz]](https://forum-images.hardware.fr/images/perso/totoz.gif "[:totoz]")
Marsh Posté le 19-08-2002 à 13:14:15
Gizmo : mille mercis 
c pile ce que je cherchais
Sinon, je me doutais que ca marcherait pas. Encore sous Opera, l'apparence est bonne même si tout scrolle... mais NS... fouyaya va falloir bidouiller pour que ça soit présentable !
Merci à tous =)
PS. Comment on accède à toutes les pages de "test" de ce merveilleux site ? ![[:xx_xx]](https://forum-images.hardware.fr/images/perso/xx_xx.gif "[:xx_xx]")
Marsh Posté le 19-08-2002 à 13:17:17
| gizmo a écrit a écrit : euh... je ne sais pas si tu as regardé la page index2.html sur le même site, parce qu'elle fait ce que tu veux, du moins pour IE et Mozilla. |
Il a d'ailleurs le même problème que moi : il est obligé d'utiliser des pourcentages (20% pour la frame du haut bleu foncé et 80% pour celle de bas). Je ne pense pas qu'il soit possible d'avoir des hauteurs fixes si on veut garder la compatibilité avec IE.
| gizmo a écrit a écrit : Le problème, c'est de choisir entre la compatibilité avec Opéra ou celle avec IE, parce que le CSS, tel qu'il est présenté, même si il est correct dans la syntaxe, ne l'est pas dans la philosophie du CSS. Il utilise une position absolue pour que ca passe sous IE, alors que l'attribut consacré pour cette fonction est fixed, reconnu par Opéra et Mozilla, mais pas par IE. |
C'est clair, tout ça est un infâme bidouillage.
![[:turk182]](https://forum-images.hardware.fr/images/perso/turk182.gif "[:turk182]")
Marsh Posté le 19-08-2002 à 13:49:21
Perso j'ai trouvé une soluce mais c très "moche" et ca scrolle pas dans Mozilla 
![[:mlc]](https://forum-images.hardware.fr/images/perso/mlc.gif "[:mlc]")
Marsh Posté le 19-08-2002 à 14:00:38
j'ai remplacé les % par des px. ça passe sous IE5 (mais ça scrolle pas avec la molette.
---------------
çà s'est HFR | Music for the Galaxy
Marsh Posté le 19-08-2002 à 14:39:09
question conne peut être, mais pourquoi tu veux pas utiliser de iframe?
Marsh Posté le 19-08-2002 à 14:54:09
| frenzy a écrit a écrit : question conne peut être, mais pourquoi tu veux pas utiliser de iframe? |
monomaniak
---------------
çà s'est HFR | Music for the Galaxy
Marsh Posté le 19-08-2002 à 16:09:49
| frenzy a écrit a écrit : question conne peut être, mais pourquoi tu veux pas utiliser de iframe? |
Par ce que le sujet est : faire une "pseudo-frame" avec des <DIV>
Marsh Posté le 19-08-2002 à 16:45:09
Par contre, moi, les iframes qui puent, ça pourrait m'intéresser, mais une question me turlupine.
N'étant pas un roi du print(), j'aimerais savoir comment qu'on fait pour lancer l'impression en n'imprimant que le DIV #content.
Hein ?
Comment ?
Serais-je con ?
Marsh Posté le 19-08-2002 à 17:13:09
Eureka ! ![[:sunn]](https://forum-images.hardware.fr/images/perso/sunn.gif "[:sunn]")
J'ai trouvé comment faire marcher le système... Pour l'instant :
- c'est nickel (avec scrolling "façon frames" ) sous MSIE 5.5 + Mozilla 1.0 ;
- ça passe potablement (avec scrolling de la totalité) sous Opera 5.12 ;
- c'est à chier sous NS 4.7 (la gestion des DIV a pas l'air de lui plaire) -> je pense faire une détection du browser afin d'envoyer la "bonne" feuille de style avec des DIVs revus et corrigés pour Netscape...
- SVP, pourriez-vous tester avec d'autres browsers ? Genre MSIE 6, Netscape 6, ou autre...
![[:super chinois]](https://forum-images.hardware.fr/images/perso/super chinois.gif "[:super chinois]")
- L'URL : http://pikas.net.free.fr/testnoframes.html
Message édité par Profil supprimé le 19-08-2002 à 17:13:34
Marsh Posté le 19-08-2002 à 17:15:42
| deliriumtremens a écrit a écrit : Par contre, moi, les iframes qui puent, ça pourrait m'intéresser, mais une question me turlupine. N'étant pas un roi du print(), j'aimerais savoir comment qu'on fait pour lancer l'impression en n'imprimant que le DIV #content. Hein ? Comment ? Serais-je con ? |
L'idée est de faire 2 feuilles de style et d'utiliser l'attribut media http://www.w3.org/TR/html4/types.h [...] escriptors
<link rel="stylesheet" type="text/css" href="ecran.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Dans la feuille de style destinée à l'impression (print.css) tu définis tes div autre que #content avec display: hidden pour qu'il ne soit pas afffiché.
Eventuellement tu peux rajouter une troisième feuille de style pour mettre tout ce qui serait commun entre ecran.css et print.css
<link rel="stylesheet" type="text/css" href="commun.css" media="all" />
Message édité par gm_superstar le 19-08-2002 à 17:36:57
Marsh Posté le 19-08-2002 à 17:20:38
| W3C Compliant a écrit a écrit : Eureka ! J'ai trouvé comment faire marcher le système... Pour l'instant : - c'est nickel (avec scrolling "façon frames" ) sous MSIE 5.5 + Mozilla 1.0 ; - ça passe potablement (avec scrolling de la totalité) sous Opera 5.12 ; - c'est à chier sous NS 4.7 (la gestion des DIV a pas l'air de lui plaire) -> je pense faire une détection du browser afin d'envoyer la "bonne" feuille de style avec des DIVs revus et corrigés pour Netscape...
|
C'est OK avec IE6. Et effectivement ça marche bien. Tu as utilisé z-index et les padding de chaque bloc c'est ça ?
Enfin tu as été plus persévérant que moi 
Marsh Posté le 19-08-2002 à 17:24:31
| gm_superstar a écrit a écrit : C'est OK avec IE6. Et effectivement ça marche bien. Tu as utilisé z-index et les padding de chaque bloc c'est ça ? Enfin tu as été plus persévérant que moi |
Bah en fait c simple, superposer des div, mais faut pas se mélanger dans toutes les propriétés et trouver les "valeurs qui vont bien" pour les browsers
Bon, Netscape fait sa petite tête de mule, mais enfin... un petit coup de SSI pour "choisir" la feuille de style ad hoc pendant le chargement, et c réglé...
En tout cas heureux que ça passe sous IE6 
Merci
Message édité par Profil supprimé le 19-08-2002 à 17:24:58
Marsh Posté le 19-08-2002 à 17:32:15
| deliriumtremens a écrit a écrit : NS 6 OK |
Huh ? T'as le scrolling du "texte" à la con, sous NS 6 ?
(et pkoi ce " " dans ton message)
Marsh Posté le 19-08-2002 à 17:43:47
| W3C Compliant a écrit a écrit : Huh ? T'as le scrolling du "texte" à la con, sous NS 6 ? (et pkoi ce " " dans ton message) |
Alors : l'affichage sous NS 6 étant équivalent point pour point à celui sous IE 5.5, je me suis permis de résumer cet état de fait par un simple OK
sinon, le est un réflexe pris il y a longtemps de cela... rien de significatif, donc.
>gm_superstar : c'est juste, j'avais vu quelques petites choses au sujet des media, vais devoir m'y intéresser de plus près, merci !
edit : ah ben t'as tout espliqué, en fait. donc merchi bis.
Message édité par deliriumtremens le 19-08-2002 à 17:45:37
Marsh Posté le 20-08-2002 à 10:23:16
| Schimz a écrit a écrit : monomaniak |
| W3C Compliant a écrit a écrit : iframe stinks  |
ça c'est de la bonne réponse pu
![[:t3xla]](https://forum-images.hardware.fr/images/perso/t3xla.gif "[:t3xla]")
en même temps les iframes stinkz peut être mais ils marchent bien sous opera, ie et netscape(?) eux ![[:nofret]](https://forum-images.hardware.fr/images/perso/nofret.gif "[:nofret]")
Là tu te fais chier pour faire un truc qui ne marche correctement que sous ie
Message édité par frenzy le 20-08-2002 à 10:30:09
Marsh Posté le 20-08-2002 à 10:30:03
ça a l'air de marcher dans Opera 6 mais c'est toute la page qui scrolle
dans Mozilla 0.9.9 la frame principale (où y a tt le blabla) n'apparaît pas
Message édité par antp le 20-08-2002 à 10:31:05
---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Marsh Posté le 20-08-2002 à 10:32:00
| frenzy a écrit a écrit : en même temps les iframes stinkz peut être mais ils marchent bien sous opera, ie et netscape(?) eux Là tu te fais chier pour faire un truc qui ne marche correctement que sous ie |
iframe t'as au moins deux pages, ici y en a qu'une
---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Marsh Posté le 20-08-2002 à 10:51:55
| antp a écrit a écrit : iframe t'as au moins deux pages, ici y en a qu'une |
c'est sur, mais ça marche au moins
non mais en fait, j'ai trouvé leur réponse a ma question "naîve" tellement ellitistement conne, que je ne peux que répondre en bourin d'en bas
Marsh Posté le 18-07-2017 à 14:52:46
| gm_superstar a écrit : Testé rapidement avec Mozilla et IE 6 :
|
Bonjour,
Voilà enfin ce que je cherchais pour remplacer les frames qui me cause un bug avec la version 54 de firefox.
Maintenant que je suis retraité, bien que très très peu expérimenté je voudrai créer ma homepage personnelle
En fait, dans mon cas, je souhaite garder le "Haut" pour faire mon menu et la "Page principale" pour envoyer mes pages.
Mon souci est le suivant :
- Dans mon menu, comment dois-je mettre mes lien au niveau de la fonction "Target" ?
D'avance merci de votre aide et bonne fin de journée
---------------
# MOCHE ET PAUVRE #
Marsh Posté le 18-07-2017 à 16:02:07
15 ans tout de même
Plus sérieusement, n'utilise pas des FRAMESET pour ton site... ça ne se fait plus depuis... au moins 15 ans justement...
Sinon pour répondre à ta question, TARGET doit correspondre au nom de la frame concernée (mais vraiment... n'utilise pas ça s'il te plait... ou alors seulement si tu mets de GIF animés et de la musique en MIDI)
http://www.snv.jussieu.fr/archamba [...] rames.html
Message édité par antac le 18-07-2017 à 16:07:48
Sujets relatifs:
- validator.w3.com html 4.01 transitionnal / html 4.01 strict
- [HTML / JS] Pb avec div pour afficher/masquer.
- problème avec une map en HTML
- [HTML]question simple sur le texte
- [HTML, JS] Pourkoi cette fonction ne marche pas bien ??
- HTML: lien a clické qui en ouvre plusieurs autres
- [HTML ou Javascript] Prechargement d'images?
- redefinir la proportion d'une frame une fois le frameset lu
- [HTML CSS] select et style [resolu]
- [html] je comprends pas comment ils font...
Marsh Posté le 19-08-2002 à 00:02:44
Voila, j'ai déjà vu le site http://www.v2studio.com/k/lab/fixed/index.html
où on fait une espèce de pseudo-frame sans frame, uniquement en DIVs.
Seulement voila. Leur exemple est un peu simple même si très logique. Perso, j'aimerais faire un truc du genre - si possible qui fonctionne sous tous OS/browsers, tant pis si jamais ça scrolle l'ensemble...
Je me suis inspiré des propriétés CSS des DIVs, de la page citée ci-dessus, mais j'arrive pas à trouver une méthode "efficace" (autre que spécifier des valeurs en pixels, des placements aléatoires, trente-six divs indentés)...
Qqn a une idée de la technique ? Je demande pas un exemple de code, juste une piste, j'ai l'impression de m'acharner sur une mauvaise voie...