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.

[Ifmy]

google non mais d'autre oui, je pense que web rank sait de quoi il parle quand même…
http://www.webrankinfo.com/referencement/c...s/no-frames.php

le mec à quand même ecrit un bouquin là dessu. et puis t'avouera que sur un site un peu gros c'est relou de pas pouvoir faire passer facilement un lien, donc les frame = caca… et basta

[Auréance]

Alors pour répondre ( peut être ) à la question :"Remplacer des frames *avec liens* par des <div>"
Un double exemple avec des images qui pèsent lourd ( exprès )
Ces exemples, avec ou sans scroll, sont constuits selon ce principe :

CODE

--------------------------------------------------------
|                         |                            |
|    <div> menu fixe      |   <div> ou sont contenues  |
|                         |     toutes les fiches      |
|                         |      <p id="fiche1">       |
|   <a href="#fiche1">    |                            |
|   <a href="#fiche2">    |                            |
|   <a href="#etc...">    |                            |
|              </div>     |                            |
|                         |                            |
--------------------------------------------------------
.                         |      <p id="fiche2">       |
.                         |                            |
.                         |                            |
.                         ------------------------------
.                         |      <p id="etc...">       |
.                         |                            |
.                         |                   </div>   |
.                         ------------------------------

[SbM]

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.
[right][snapback]1167468[/snapback][/right]

Ca dépend de la taille de ton écran. Sur mon iBook, il faut scroller la page concernant Mail Scripts pour tout voir.

[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.
[right][snapback]1167468[/snapback][/right]

Ca dépend de la taille de ton écran. Sur mon iBook, il faut scroller la page concernant Mail Scripts pour tout voir.
[right][snapback]1170084[/snapback][/right]

D'où l'idée de l'autoscroll.
Si tu veux je peux te faire une sorte de maquette pour que tu te rendes compte par toi même de ce que ça pourrait donner. Au fait, en HTML, les balises s'écrivent en majuscules (si je ne me trompes pas). Ton site est en XHTML Transitional je pense (il faudrait modifier le DTD)

[SbM]

D'où l'idée de l'autoscroll.
Si tu veux je peux te faire une sorte de maquette pour que tu te rendes compte par toi même de ce que ça pourrait donner.

Je veux bien, oui. C'est très sympa de ta part, merci!

Au fait, en HTML, les balises s'écrivent en majuscules (si je ne me trompes pas).

Je croyais que c'était indifférent... me goures-je?

Ton site est en XHTML Transitional je pense (il faudrait modifier le DTD)

Je l'ignore. Va falloir que je me penche là-dessus.

[LittleBen]

D'où l'idée de l'autoscroll.
Si tu veux je peux te faire une sorte de maquette pour que tu te rendes compte par toi même de ce que ça pourrait donner.

Je veux bien, oui. C'est très sympa de ta part, merci!

Au fait, en HTML, les balises s'écrivent en majuscules (si je ne me trompes pas).

Je croyais que c'était indifférent... me goures-je?

Ton site est en XHTML Transitional je pense (il faudrait modifier le DTD)

Je l'ignore. Va falloir que je me penche là-dessus.
[right][snapback]1171347[/snapback][/right]

euh en effet c'est possible que ce soit indifférent j'ai pas vérifié et j'ai pas envie de vérifier
Bon je vais voir ce que je peux faire sinon parce que ton code est déjà très propre, il suffit juste d'enlever le cadre.

Je suis en train de "travailler" dessus. Quelques petits commentaires en live :
- les entités html ne sont plus utilisées, on doit juste spécifié l'encodage (tu as spécifié l'utf-8 c'est bien )
- d'un point de vue strictement personnel, je trouve qu'il y a trop de classes. Si c'est juste pour réduire la taille du texte, style="text-size: 0.4em;" suffit
- il faut utiliser dans la mesure du possible des tailles en "em", comme ça si le surfeur augmenter la taille de la police (Pomme + sur Safari), il n'y aura pas de problème.
- toujours fermer ses balises en xhtml ( <img /> <br /> )
- héritage : inutile de mettre un text-align: left partout par exemple..
bon j'arrête parce que tout ça peut se trouver sur plein de sites...

Ce message a été modifié par LittleBen - 31 May 2005, 17:02.

[SbM]

euh en effet c'est possible que ce soit indifférent j'ai pas vérifié et j'ai pas envie de vérifier

Moi non plus ;-)

Bon je vais voir ce que je peux faire sinon parce que ton code est déjà très propre, il suffit juste d'enlever le cadre.

Merci ;-) En fait je m'entraîne sur ce site-là, qui est très simple, pour apprendre les CSS et tout le tralala, avant d'implémenter ça sur mes autres sites.

[LittleBen]

t'as répondu pendant que j'éditais
bon j'ai fait des trucs mais mon pere veut l'ordi donc pas le temps de finir

http://www.openweb.eu.org/articles/initiation_css/
Une référence. J'apprends le CSS mais c'est un peu dur des fois pour faire des mises en pages complexes.

Fichier(s) joint(s)

 index.html ( 2.6 Ko ) Nombre de téléchargements : 6
 styles.css ( 2.13 Ko ) Nombre de téléchargements : 8

 

[SbM]

- les entités html ne sont plus utilisées, on doit juste spécifié l'encodage (tu as spécifié l'utf-8 c'est bien )
- d'un point de vue strictement personnel, je trouve qu'il y a trop de classes. Si c'est juste pour réduire la taille du texte, style="text-size: 0.4em;" suffit
- il faut utiliser dans la mesure du possible des tailles en "em", comme ça si le surfeur augmenter la taille de la police (Pomme + sur Safari), il n'y aura pas de problème.
- toujours fermer ses balises en xhtml ( <img /> <br /> )
- héritage : inutile de mettre un text-align: left partout par exemple..
bon j'arrête parce que tout ça peut se trouver sur plein de sites...
[right][snapback]1171384[/snapback][/right]

Merci pour tous ces conseils! Je note, et je corrige dès que possible. Encore merci.

[SbM]

Alors je dois vraiment pas être doué, mais j'ai encore un problème.

Je suis en train d'enlever les <frame>, mais j'ai un souci avec la petite <div> qui indique "Envoyer un courriel".

Je voudrais idéalement qu'elle s'affiche en bas à droite de la div "menu" (comme dans le site d'origine, quoi), à 20px des bords.

... et je n'y arrive pas !!! J'ai essayé tous les positionnements possibles (je crois), mais rien à faire: soit elle s'affiche juste après le dernier item du menu, soit tout à droite de l'écran (par-dessus la <div> principale, donc).

Donc je vous appelle à nouveau à l'aide: comment faire pour afficher une <div> en bas à droite d'une autre <div> sans qu'elle aille se balader n'importe où.

(soit dit en passant, c'est pas évident les <div>, finalement. C'est peut-être dû à mon incompétence, mais je trouve qu'on arrive beaucoup mois à prévoir leur comportement que celui d'un <table>. Vu la faible complexité de mon site, je vais peut-être finir par me rabattre là-dessus. Au moins là, je maîtrise ;-).

[Ifmy]

faut le mettre en position: absolute; je pense

[LittleBen]

Internet Explorer a du mal avec les absolute il me semble.
je viens de tester float: bottom;
a mon avis, ce n'est pas très réglementaire mais ça marche dans safari et firefox
bien sûr ca ne marche pas dans IE (je suppose) donc ma solution n'avance à rien.. mais comme je venais de découvrir ça

Ce message a été modifié par LittleBen - 3 Jun 2005, 17:15.

[Auréance]

... et je n'y arrive pas !!! J'ai essayé tous les positionnements possibles (je crois), mais rien à faire: soit elle s'affiche juste après le dernier item du menu, soit tout à droite de l'écran (par-dessus la <div> principale, donc).

J'espère tout de même que tu as daigné regarder mon exemple ( mis en lien plus haut )
2 div(s) pas javascript, pas xml, pas php... Seuls html & css.
Pour remplacer des frames par des div(s) je ne crois pas qu'il soit bon de penser "include php" "object" ou "iFrames". Pour remplacer une frame par une div ... rien ne vaut une div !

Merci de rédiger ta question meilleurement si ma solution ne t'agrée.

[SbM]

... et je n'y arrive pas !!! J'ai essayé tous les positionnements possibles (je crois), mais rien à faire: soit elle s'affiche juste après le dernier item du menu, soit tout à droite de l'écran (par-dessus la <div> principale, donc).

J'espère tout de même que tu as daigné regarder mon exemple ( mis en lien plus haut )
2 div(s) pas javascript, pas xml, pas php... Seuls html & css.
Pour remplacer des frames par des div(s) je ne crois pas qu'il soit bon de penser "include php" "object" ou "iFrames". Pour remplacer une frame par une div ... rien ne vaut une div !

Merci de rédiger ta question meilleurement si ma solution ne t'agrée.
[right][snapback]1176639[/snapback][/right]

Hou là ! Je le sens un peu colère, l'Aréance ;-)

Qu'il ne s'inquiète, j'ai bien regardé son exemple et j'ai fait au plus simple: pas de js (pour un site aussi simple, franchement ce serait abuser), pas de xml (sais même pas comment on code ça, alors), mais par contre du php, forcément, pour automatiser la création de mon menu à gauche et l'affichage des descriptions de logiciels à droite.

Non, non, ce qui posait problème, c'était la toute petite "div" tout en bas à droite du menu, qui affichait "Envoyer un courriel" n'importe où. Mais j'ai finalement résolu le problème. En colorant le background de mes <div>, je me suis aperçu que je m'étais emmêlé les pinceaux à un endroit. Maintenant tout est réglé, et ça fonctionne comme je voulais (sauf sous IE5.2 pour Mac, qui s'obstine à me coller ça 4 km trop bas, mais bon...).

Par contre, nouveau souci (forcément ): suivant les cas, ma <div> "menu" est plus longue que ma <div> principale, ou l'inverse. Or je voudrais que la bordure pointillée qui sépare les <div> courre dans tous les cas jusqu'en bas de la <div> la plus longue. Comment faire?

Pour l'instant, je n'ai trouvé qu'une bidouille en superposant les bordures des deux div, mais c'est pas super élégant et ça risque de merder en fonction du navigateur. Une solution, quelqu'un?

(P.S.: j'en profite pour préciser, avant qu'Aréance ne se re-énerve ;-), que j'apprécie vraiment beaucoup les conseils que chacun d'entre vous me prodigue, même si je ne les suis pas tous à la lettre. Ca me permet d'avancer sérieusement dans mon apprentissage. Merci à tous!)

[LittleBen]

Au fait je me suis trompé, absolute fonctionne bien, c'est le fixed qui n'est pas géré par MS IE 5 et 6. Il existe des hacks que j'ai essayé d'implémenter mais ne disposant pas de MS IE, je n'ai pas pu tester.
En tout cas SbM, j'ai fait quelques modif sur le site comme tu le voulais, tu peux regarder les fichiers joints

Ce message a été modifié par LittleBen - 4 Jun 2005, 10:17.

Fichier(s) joint(s)

 styles.css ( 1.28 Ko ) Nombre de téléchargements : 2
 index.html ( 1.97 Ko ) Nombre de téléchargements : 3

 

[Auréance]

(P.S.: j'en profite pour préciser, avant qu'Auréance ne se re-énerve ;-)

Oui, c'est vrai, je regrette de ne pas coller suffisement de smileys, les gens de nos jours ne comprenent plus le coté "charre" du propos sans ce genre de trucs... oui... smileys... ( faudra que j'm'y habitue un jour ou l'autre. ). Moi ? en colère ? Jamais après le petit déjeuner.
Dans ta maquette, j'ai pas vu la " petite div ", j'ai un problème similaire avec un de mes trucs. Chez moi c'est (css) div#bas { bottom: 0;} qui ne semble pas fonctionner... partout.

[SbM]

(P.S.: j'en profite pour préciser, avant qu'Auréance ne se re-énerve ;-)

Oui, c'est vrai, je regrette de ne pas coller suffisement de smileys, les gens de nos jours ne comprenent plus le coté "charre" du propos sans ce genre de trucs...

Le problème, c'est qu'à l'écrit on a plus de mal à le déceler sans les précieuses indications de ces smileys. Mais j'espérais bien une dose de second degré dans tes propos. Je ne me suis donc pas trompé ;-)

Dans ta maquette, j'ai pas vu la " petite div "

Elle n'y est peut-être (sans doute) pas dans la version actuelle, c'est pour ça.

[SbM]

En tout cas SbM, j'ai fait quelques modif sur le site comme tu le voulais, tu peux regarder les fichiers joints
[right][snapback]1176877[/snapback][/right]

Je vais regarder ça dès que j'aurai un moment. En tout cas, merci /beaucoup/ pour tes efforts. C'est vraiment très sympa!