Remplacer des frames *avec liens* par des <div>, Comment faire ?

[SbM]

Salut à tous,

J'ai fait quelques recherches, mais sans grand succès. Voici mon problème:

Si vous allez voir mon site http://tradintosh.free.fr, vous verrez qu'il est composé de deux frames verticaux. Un à gauche sert de menu et contient des liens vers une page "afficher.php?num=x" qui s'affiche dans le frame de droite.

Pour me passer des frames, je comptais les remplacer par des <div>, mais voilà: dans un <div>, comment insérer des liens qui s'afficheront dans un autre <div> ? (en clair, il faudrait un équivalent de l'argument "target")

Merci de votre aide, parce que je ne vois vraiment pas comment faire...

[Auréance]

Salut.
Je ne voudrais pas t'induire en erreur ( horreur ) mais il me semble que ce mode de fonctionnement se fait avec des affichages cachés avec css <div style= "display: hidden;"><a>blabla</a></div> qui se rendent visibles avec "a:hover {display: block;}" indication pas encore comprise en son entier par ( suivez mon IE regard ) tous navigateurs; c'est pourquoi certain utilisent une action javascript de quelques lignes. Ce javascript est un peu construit comme un "StyleSwitcher" qui sert à changer de feuille de style. Je ne l'ai pas sous la main.
Cette manière de procéder je crois, est nommée "les pseudos frames" pour la différencier des "frames et framesets" purs et durs (et obsolètes).
Le principe est de placer au même endroit plusieurs "div" superposées, toutes en affichage "non visibles" et de les rendre tour à tour "visibles". C'est avec ce même principe qu'on peut afficher des bulles d'aides ou commentaires sophistiqués.
Toutes les "div" et leur contenu sont mises en cache dès l'ouverture car elle ne font qu'un seul code (sauf peut être les images qu'il faudrait prévoir de pré-charger, à vérifier). Tu fais le bon choix; affichage plus rapide, pas de risque d'ouvrir une frame toute seule dans une page, meilleure indexation, accessibilité accrue, etc...
Il y a un (des) article super à ce sujet chez http://www.alsacreations.com
A+

[SbM]

Le principe est de placer au même endroit plusieurs "div" superposées, toutes en affichage "non visibles" et de les rendre tour à tour "visibles". C'est avec ce même principe qu'on peut afficher des bulles d'aides ou commentaires sophistiqués.

OK, j'ai compris. Reste plus qu'à trouver comment programmer ça. Un petit coup de Google avec "pseudo-frames" devrait me renseigner. Merci !

Il y a un (des) article super à ce sujet chez http://www.alsacreations.com

J'avais vaguement repéré ça il y a quelque temps, mais j'ai l'impression qu'ils ont complément modifié leur site et que cet article n'est plus accessible. En tout cas je ne l'ai pas retrouvé :-(((

[Auréance]

En attendant qu'un bon en javascript passe dans le coin, je te colles ici une petite fonction choppée je ne sais ou ( il y a longtemps ), Alsacréations peut être encore... je crois.
Elle sert à afficher / désafficher les sous menus. Un peu bricolé, il devrait faire l'affaire. Il faut que tu nommes les "id" de tes <div id"divmask1"> "divmask2" "divmask3" etc.. tu as droit à 10 div mais tu peux augmenter en modifiant " i<=10 "quelque part dans le code.

CODE

window.onload=Xdivmask;
function Xdivmask(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('divmask'+i)){document.getElementById('divmask'+i).style.display='none';}}
if (d) {d.style.display='block';}}

Ensuite dans le html > body tes liens : <a onclick="javascript:Xdivmask('divmask2');">blabla</a>
Tu remarques que je n'ai pas mis href dans le lien, c'est parce que pour la validation les liens href="#" créeent un échec à la validation d'accéssibilité, et rechargent la page quand on clique. Tu peux, si tu veux, cibler le lien vers lui même :
<a id="lien1" href="#lien1" onclick="javascript:Xdivmask('divmask2');">blabla</a>.

Mais la balise <a> semble bien pouvoir s'en passer à condition d'ajouter dans la css "cursor: pointer;" pour la classe de ces liens afin que le visiteur voit bien "qu'un truc se passe".
J'ai retrouvé un lien pour Alsacréations : afficher / masquer des calques sans javascript. Mais pas celui que je pensais, il semble avoir disparu, ce tuto n'est valable qu'en cas de survol du lien ( et meeeeeed ! j'ai pas sauvegardé ce truc. )
Dans la css tes div seront " display: bloc; " elles seront toutes masquées dès l'ouverture et ne réaparaitront que quand on aura cliqué sur le lien. Enfin, je n'ai pas essayé mais en tout cas le script n'est pas beaucoup plus épais que ça...

Ah ! Dernière chose j'avais vérifié une fois qu'on pouvait remplacer dans ce cas <a> par <p><h><span> etc..; avec javascript du moment que tu survolles et que ton pointeur t'indique que tu peux cliquer là.... c'est bon.
A+

Ce message a été modifié par Auréance - 21 May 2005, 03:23.

[SbM]

Personne d'autre qu'Auréance ? Des idées, les autres ? Merci !

[pecos]

ben moi, tes pseudoframes, je chercherai même pas à les faire uniquement en css avec des divs cachés, à moins que tu n'aie prévu au départ qu'un nombre très réduit de pages, peu fournies en textes et images, car ça va devenir vite très lourd à charger dans le cas contraire.

non, pour faire ça, PHP est vraiment parfait, avec la plus élémentaire des fonctions : include() qui te permet effectivement d'inclure à gauche un menu, et à droite la page demandée en fonction du lien, comme avec des frames.

en plus, free gère très bien le php. pourquoi s'en priver ?

[pecos]

j'y pense aussi : vous ne croyez pas que gérer uniquement par javascript l'affichage d'élément de page et les actions sur des liens est particulièrement scabreux?

compte tenu que bien des internautes (paranos) désactivent purement et simplement javascript dans leur navigateur... sans compter les vieux navigateurs qui ne géreront pas correctement javascript et/ou ta css...

[Ifmy]

Pourquoi ne pas faire tout simplement un div comme tu le souhaites avec un if et une variable. en fonction de la variable (du lien qu'on a cliqué) tu affiches un truc diffèrent et basta.

[SbM]

Un grand merci à pecos et Ifmy pour leurs suggestions, mais depuis le temps que j'utilise les frames, je dois être un peu bloqué mentalement: que ce soit l'une ou l'autre méthode, je ne vois absolument pas comment coder tout ça.

Oserais-je abuser de votre gentillesse et vous demander de me fournir de petits exemples? Merci d'avance, en tout cas !

[Ifmy]

<En ce que je me dit c'est que le mieux pour toi ce serait dotclear ou autre
d'une part tu part sur une base moderne (xhtml et css) c'est entièrement customisable (faut pas croire par ce que tu es sous dotclear, ça doit resembler à n'importe quel blog) tu peux tout à fait lui donner un aspect relativement proche du tradintosh d'origine.
CA peut être pour toi le moyen justement d'évoluer dans ta manière de coder. et surtout c'est d'une simplicité enfantine pour rajouter des informations

si t'as des doutes hésite pas je te dirais si tel ou tel chose est possible ou non mais bon c'est customisble à 100% donc…

[pecos]

bon, alors pour faire le plus simple possible :

tu crée toutes tes pages "xxxxx.php" qui correspondent à tes anciennes pages (sans le menu) AVEC L'EXTENSION ".php" surtout.
mais dans chaque page, tu rajoute ceci à l'endroit ou doit apparaitre le menu (suivant ta mise en page) :


<?php
include("menu.php");
?>

(on peut pas faire plus simple...)

et tu crée d'autre part une page "menu.php", comme une sorte de "frame" virtuelle dans laquelle les liens sont simplement dirigés vers toutes les pages que tu a créées.
tu mets cette page "menu.php" avec les autres pages pour pouvoir y accéder.

lorsque le serveur va rencontrer de telles pages, il va les afficher en y rajoutant la page "menu.php" au bon endroit, et voilà.

et comme avec les frames, lorsque tu veux modifier les liens, tu ne modifie que la page "menu.php", pas les autres.

PS : si tu ne t'es jamais servi de php, n'oublie pas qu'il faut sur ton mac activer le partage web, configurer php, etc, tout ça très bien décrit sur des articles présents dans les articles de macbidouille, ici et ici.
tu ne pourras pas vérifier ton travail en local tant que cette étape ne sera pas effectuée. toutefois, rien ne t'empêche de vérifier si ça fonctionne en envoyant tes pages sur le serveur de free, car lui, est configuré pour cela. (à condition d'activer php si je me souviens, voir sur le site free...)

[SbM]

bon, alors pour faire le plus simple possible :
<snip>

OK, je comprends mieux. Merci pour les explications. En fait, la différence avec les frames, c'est que si ma pseudo-frame de droite devient trop longue et doit être scrollée par l'utilisateur, le menu situé à gauche va scroller également, non? Dommage...

et comme avec les frames, lorsque tu veux modifier les liens, tu ne modifie que la page "menu.php", pas les autres.

En fait, mon "menu.php" génère automatiquement le menu en puisant dans la base MySQL. Comme ça j'ai jamais besoin de le modifier. J'aime bien quand mon ordi fait les trucs chiants à ma place ;-)

PS : si tu ne t'es jamais servi de php,

Si, si, mon site est en php, alimenté par une base MySQL. Tout est activé chez moi, donc je peux tester en local avant de balancer sur Free (ce qui m'a d'ailleurs valu une petite frayeur la première fois, vu que j'utilisais une fonction php4 et que Free est en php3!).

Je vais essayer d'implémenter ce que tu m'as indiqué et je vous tiendrai au courant. En attendant, merci beaucoup pour ton aide (et merci aux autres aussi!)

[pecos]

oui, le seul problème avec ce modèle de page, c'est que le menu n'est pas fixe.

toutefois, si tu te sens, tu peux implémenter à l'aide d'un positionement "fixed", en css, un div contenant ta page "menu" qui restera fixe, par exemple dans une grande colonne vide à gauche. tu trouveras sur www.alistapart.com ou sur alsacreations les renseignements pour le faire.

cela-dit, si j'étais toi , je ne chercherais même pas, car les positionements "fixed", "absolute", etc... génèrent tellement de soucis avec un navigateur que je ne nommerai pas que je préfère m'en passer pour l'instant.

et tant pis pour le défilement du menu...

...je trouve que l'évolution actuelle du developpement web conduit certes à une étonnante simplification du code, (ce qui est bien) mais aussi à un apauvrissement (pour certaines choses) du design ET de la facilité de surf (frames).

au fait... free est en PHP4, ou alors, aucun de mes (nombreux) sites ne fonctionnerait.

Ce message a été modifié par pecos - 25 May 2005, 13:47.

[SbM]

oui, le seul problème avec ce modèle de page, c'est que le menu n'est pas fixe.

dommage...

cela-dit, si j'étais toi  , je ne chercherais même pas, car les positionements "fixed", "absolute", etc... génèrent tellement de soucis avec un navigateur que je ne nommerai pas que je préfère m'en passer pour l'instant.

C'est clair... En même temps, vu que Tradintosh s'adresse aux personnes sous Mac OS X, faudrait voir quel est le pourcentage de ceux qui utilisent encore ce navigateur que tu ne nommes pas... doivent pas être beaucoup, je pense (j'espère !). Du coup, je me tâte...

...je trouve que l'évolution actuelle du developpement web conduit certes à une étonnante simplification du code, (ce qui est bien) mais aussi à un apauvrissement (pour certaines choses) du design ET de la facilité de surf (frames).

Tout à fait d'accord, et je trouve ça bien dommage moi aussi.

au fait... free est en PHP4, ou alors, aucun de mes (nombreux) sites ne fonctionnerait.

Alors je me trompe peut-être... J'ai peut-être eu ce problème quand Tradintosh était encore à la Poste. Mea culpa!

[Val1984]

Tom's hardware utilise une technique ultra laide à base de javascript qui marche avec IE.
Pour creuser un peu plus : http://www.howtocreate.co.uk/wrongWithIE/?...tion%3Afixed%3B

[Ifmy]

...je trouve que l'évolution actuelle du développement web conduit certes à une étonnante simplification du code, (ce qui est bien) mais aussi à un appauvrissement (pour certaines choses) du design ET de la facilité de surf (frames).
[right][snapback]1163083[/snapback][/right]

Oula je suis pas franchement d'accord là, tu peux m'expliquer en quoi le design est appauvrit et en quoi les frames apportent quelque chose?

sinon, vu la structure de tom's hardware autant passer à dotclear non? on dirait franchement un blog mais tou pourrit

comme je le disais plus haut mais ca n'a pas l'air d'etre retenu avec dotclear word press ou autre tu fais ce que tu veux même au niveau du design (rien n'oblige à conserver la structure en colonne classique des blogs)

[SbM]

Oula je suis pas franchement d'accord là, tu peux m'expliquer en quoi le design est appauvrit et en quoi les frames apportent quelque chose?

Ben, déjà, le fait que mon menu va défiler en même temps que la pseudo-frame de droite, sauf au prix d'une incompatibilité avec le navigateur-dont-on-ne-dit-pas-le-nom. Avec les frames, ça marchait partout. Mais ceci étant, je suis tout à fait d'accord pour dire qu'on gagne énormément de temps avec les CSS et la séparation contenu/présentation, au niveau de la mise à jour.

comme je le disais plus haut mais ca n'a pas l'air d'etre retenu avec dotclear word press ou autre

Vi, mais c'est que j'aime bien mettre les mains dans le cambouis... ;-)

[pecos]

...je trouve que l'évolution actuelle du développement web conduit certes à une étonnante simplification du code, (ce qui est bien) mais aussi à un appauvrissement (pour certaines choses) du design ET de la facilité de surf (frames).
[right][snapback]1163083[/snapback][/right]

Oula je suis pas franchement d'accord là, tu peux m'expliquer en quoi le design est appauvrit et en quoi les frames apportent quelque chose?

sinon, vu la structure de tom's hardware autant passer à dotclear non? on dirait franchement un blog mais tou pourrit

comme je le disais plus haut mais ca n'a pas l'air d'etre retenu avec dotclear word press ou autre tu fais ce que tu veux même au niveau du design (rien n'oblige à conserver la structure en colonne classique des blogs)
[right][snapback]1165090[/snapback][/right]

Si tu me lis correctement, ifmy, tu remarqueras que j'ai dit "pour certaines choses". ce qui veut dire que pour D'AUTRES choses, les CSS apportent un plus non négligeable.
Je croyais pourtant avoir été suffisament diplomate avec les "ayatollahs du tableless" sans avoir besoin de me justifier : il te suffit de lire avec attention tout le sujet pour trouver des exemples de cas ou les frames sont bien pratiques et très dures à remplacer de manière SURE par autre chose.

J'ai UN SEUL principe depuis toujours en développement web : plus le code est simple, clair et lisible, mieux c'est.

Par là même, dans cette optique, si le fait d'utiliser des tableaux et/ou des frames me simplifie le travail et le code, je ne m'en priverai jamais juste pour avoir le petit plaisir malsain de n'utiliser QUE des CSS (ou autre chose quand la MODE changera... ce qui est rapide en général en informatique)

[Ifmy]

t'aurais de quoi faire déjà

pour les frame c'est vrai que ca facilite la vie pour ca mais tu peux le faire relativement rapidement en js par exemple et normalement (à part sur un site du type blog) on ne devrait jamais avoir à scroller, politique d'accessibilité oblige

tien regarde en fesant une recherche à css et frame

http://www.stunicholls.myby.co.uk/layouts/frame.html

je sur qu'il y a des truc bien abouti sur le sujet et relativmeent bien comaptible

chez alsa il font pas que des gateaux http://tutorials.alsacreations.com/frames/

Ce message a été modifié par Ifmy - 26 May 2005, 18:08.

[Ifmy]

...je trouve que l'évolution actuelle du développement web conduit certes à une étonnante simplification du code, (ce qui est bien) mais aussi à un appauvrissement (pour certaines choses) du design ET de la facilité de surf (frames).
[right][snapback]1163083[/snapback][/right]

Oula je suis pas franchement d'accord là, tu peux m'expliquer en quoi le design est appauvrit et en quoi les frames apportent quelque chose?

sinon, vu la structure de tom's hardware autant passer à dotclear non? on dirait franchement un blog mais tou pourrit

comme je le disais plus haut mais ca n'a pas l'air d'etre retenu avec dotclear word press ou autre tu fais ce que tu veux même au niveau du design (rien n'oblige à conserver la structure en colonne classique des blogs)
[right][snapback]1165090[/snapback][/right]

Si tu me lis correctement, ifmy, tu remarqueras que j'ai dit "pour certaines choses". ce qui veut dire que pour D'AUTRES choses, les CSS apportent un plus non négligeable.
Je croyais pourtant avoir été suffisament diplomate avec les "ayatollahs du tableless" sans avoir besoin de me justifier : il te suffit de lire avec attention tout le sujet pour trouver des exemples de cas ou les frames sont bien pratiques et très dures à remplacer de manière SURE par autre chose.

J'ai UN SEUL principe depuis toujours en développement web : plus le code est simple, clair et lisible, mieux c'est.

Par là même, dans cette optique, si le fait d'utiliser des tableaux et/ou des frames me simplifie le travail et le code, je ne m'en priverai jamais juste pour avoir le petit plaisir malsain de n'utiliser QUE des CSS (ou autre chose quand la MODE changera... ce qui est rapide en général en informatique)
[right][snapback]1165126[/snapback][/right]

je n'ia jamais ete aussi loins non plus mauvaise comprhesion donc

[SbM]

pour les frame c'est vrai que ca facilite la vie pour ca mais tu peux le faire relativement rapidement en js par exemple

Déjà, je souhaite éviter le js au maximum, vu que d'après ce que j'ai lu, pas mal d'utilisateurs le désactivent.

[Ifmy]

bah regarde la solution en css

[Val1984]

J'ai rien dit...

Ce message a été modifié par Val1984 - 27 May 2005, 08:34.

[Ifmy]

He val quand on marque xhtml valid sur son blog, c'est qu'il doit l'etre non?

[Val1984]

He val quand on marque xhtml valid sur son blog, c'est qu'il doit l'etre non?
[right][snapback]1165792[/snapback][/right]

C'est à cause du faux mail d'eBay que j'ai cité en blockquote

[Auréance]

j'y pense aussi : vous ne croyez pas que gérer uniquement par javascript l'affichage d'élément de page et les actions sur des liens est particulièrement scabreux?

NON !
Et avec tout mon respect, javascript n'est pas le Diable.

Déjà, je souhaite éviter le js au maximum, vu que d'après ce que j'ai lu, pas mal d'utilisateurs le désactivent.

Pourquoi ne pas s'emputer d'une jambe avant de gravir une montagne ?

Ce message a été modifié par Auréance - 28 May 2005, 02:54.

[SbM]

Déjà, je souhaite éviter le js au maximum, vu que d'après ce que j'ai lu, pas mal d'utilisateurs le désactivent.

Pourquoi ne pas s'emputer d'une jambe avant de gravir une montagne ?

Ben justement: j'estime qu'en utilisant du js lorsqu'il n'est pas indispensable (et c'est quand même rare qu'il le soit, en ce qui me concerne), tu t'amputes une jambe à hauteur de 13% environ en terme de "consultabilité" de ton site (d'après les chiffres que j'ai pu trouver).

Mais maintenant, chacun voit midi à sa porte. Pour ma part, j'évite au max le js, mais c'est mon choix, comme dirait l'autre.

[Ifmy]

Au fait pour info y a pas pire que les frames pour réferencement

[LittleBen]

Pour revenr au sujet, dans ce cas présent, la frame ne sert à rien. Autant mettre un div (avec autoscroll à la limite) vu que il n'y a pas besoin de faire défiler la page.

[pecos]

auréance... t'abuse un tout petit peu là...

faudrait voir à pas tomber dans l'hystérie.

je suis le premier à user et abuser de javascript dans mes sites. mais là il ne s'agit pas de s'amputer d'une jambe.
pas plus que de considérer que javascript est le diable ( ça va pas, non )

mais s'il y a UN moyen, UN SEUL de ne pas utiliser javascript dans le code d'une page web... comme pour tout le reste : je vais au plus simple et je ne l'utilise pas.

et surtout quand il s'agit de liens importants ou essentiels. si c'est pour lancer une pop-up ou changer une image à la volée, bien sûr que c'est incontournable. mais PAS pour de simples liens hypertexte qui doivent rester tels quels.

Au fait pour info y a pas pire que les frames pour réferencement

c'est faux. c'est une légende qui à la vie dure et qui commence à me saouler. j'administre un certain nombre de sites en frames qui se trouvent *comme par miracle* en tête des réponses google et ce sans jamais les avoir inscrits sur le moindre moteur de recherche. curieux, n'est-il pas ?

tu ne va pas me dire que tu ne sais pas qu'un robot comme google, lorsqu'il trouve un jeu de cadre, "suit" tous les liens ou URLs de la page pour référencer tous les cadres un par un ?
(c'est d'ailleurs comme ça que toutes les pages finissent par être indexées sans autre intervention)

Ce message a été modifié par pecos - 28 May 2005, 22:46.