HTML : faire une "pseudo-frame" avec des <DIV> : fouyaya !

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : HTML : faire une "pseudo-frame" avec des <DIV> : fouyaya !

Profil supprimé

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...

Publicité

Profil supprimé

Joyeux anniv une fois, Ant. P.

(up :cry: )

gm_superstar

Appelez-moi Super

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)

Profil supprimé

:sweat: :sweat: :sweat:

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 !

gizmo

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.

deliriumtremens

sic transit intestinal...

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

Profil supprimé

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...

Profil supprimé

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...

gm_superstar

Appelez-moi Super

Testé rapidement avec Mozilla et IE 6 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conforming XHTML 1.1 Template</title>
<style type="text/css">

body {
margin: 0px;
height: 100%
}

div#haut {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 20%;
background-color: silver;
}

div#gauche {
position: absolute;
top: 20%;
left: 0px;
width: 15%;
height: 80%;
background-color: #eeeeee;
}

div#principale {
position: absolute;
top: 20%;
left: 15%;
width: 85%;
height: 80%;
background-color: gray;
overflow: auto;
}

</style>
</head>

<body>

<div id="haut">Frame du haut</div>
<div id="gauche">Frame de gauche</div>
<div id="principale">
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale<br />
Frame principale
</div>
</body>

</html>

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 :ange: Mais si on met overflow: hidden; ça change rien avec IE, on garde la double barre...

Message cité 1 fois
Message édité par gm_superstar le 19-08-2002 à 12:43:13

Profil supprimé

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 :pt1cable:

:sweat:

Publicité

gizmo

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.

Profil supprimé

[:totoz]

Profil supprimé

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]

gizmo

tu enlèbe le bout d'url jusqu' à "k/"

gm_superstar

Appelez-moi Super

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.

gizmo

conclusion: IE c'est de la merde [:turk182]

Profil supprimé

Perso j'ai trouvé une soluce mais c très "moche" et ca scrolle pas dans Mozilla :heink: [:mlc]

Schimz

Bouge pas, meurs, ressuscite !

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

frenzy

thank god I'm.....

question conne peut être, mais pourquoi tu veux pas utiliser de iframe?

Schimz

Bouge pas, meurs, ressuscite !

frenzy a écrit a écrit :

question conne peut être, mais pourquoi tu veux pas utiliser de iframe?

:lol: :lol: monomaniak

---------------
çà s'est HFR | Music for the Galaxy

Profil supprimé

iframe stinks

gm_superstar

Appelez-moi Super

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>

deliriumtremens

sic transit intestinal...

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 ?

Profil supprimé

Eureka ! [: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...

L'URL : http://pikas.net.free.fr/testnoframes.html

Message édité par Profil supprimé le 19-08-2002 à 17:13:34

gm_superstar

Appelez-moi Super

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

gm_superstar

Appelez-moi Super

W3C Compliant a écrit a écrit :

Eureka ! [: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...

L'URL : http://pikas.net.free.fr/testnoframes.html

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 :jap:

Profil supprimé

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 :sweat:

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 :benetton: Merci

Message édité par Profil supprimé le 19-08-2002 à 17:24:58

deliriumtremens

sic transit intestinal...

NS 6 OK

Profil supprimé

deliriumtremens a écrit a écrit :

NS 6 OK

Huh ? T'as le scrolling du "texte" à la con, sous NS 6 ?

(et pkoi ce " :heink: " dans ton message)

deliriumtremens

sic transit intestinal...

W3C Compliant a écrit a écrit :

Huh ? T'as le scrolling du "texte" à la con, sous NS 6 ?

(et pkoi ce " :heink:

" 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 :heink: 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

Profil supprimé

Ok, merci l'ami :hello:

frenzy

thank god I'm.....

Schimz a écrit a écrit :

:lol:

monomaniak

W3C Compliant a écrit a écrit :

iframe stinks

ça c'est de la bonne réponse pu
[:t3xla]

en même temps les iframes stinkz peut être mais ils marchent bien sous opera, ie et netscape(?) eux [: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

antp

Super Administrateur
Champion des excuses bidons

ç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

antp

Super Administrateur
Champion des excuses bidons

frenzy a écrit a écrit :

en même temps les iframes stinkz peut être mais ils marchent bien sous opera, ie et netscape(?) eux [:nofret]

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

frenzy

thank god I'm.....

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 [:nofret]

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

Profil supprimé

:lol:

mfranq

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 #

antac

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

HTML : faire une "pseudo-frame" avec des <DIV> : fouyaya !

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...
Plus de sujets relatifs à : HTML : faire une "pseudo-frame" avec des <DIV> : fouyaya !

Page générée en 0.095 secondes