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

[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!