J'essaie de faire dans les regles de l'art

destroyedlolo · 3 Septembre 2005

Salut a tous,

Voici ma page originalle avec des tables pour la mise en page, pas de doctype ... bref que des trucs pas beaux (et encore, j'ai ameliore recement).

J'essaie de la transforme en qq chose sans table et qui soit validable W3C.

Sinon, je fais mes testes avec Netscape 7 sous Solaris 8 ... au cas ou ...

Mais bon, j'ai quelques problemes et j'espere que les PRO des CSS pourront me donner un coup de main.

1/ Le DocType

J'ai dans ma page un

<DIV id="cible" STYLE="position:absolute; top:-50; left:-20; height:32; width:32;z-index:2;">
	<img src="../../../images/camera.gif">
</DIV>

qui permet d'avoir un appareil photo flottant qui se positionne sur la carte en fonction du lien que l'on survole, le tout en javascript.

Le bleme, c'est des que je met le doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

cette image se positionne deseperement en haut de ma page et refuse de bouger (aucune erreur JS).

Dans le meme genre, mon cadre de copyright (en table, c'est un include) pert aussi toute sa presentation et ne ressemble plus a rien.

Voir

Test1

Pour m'assurer que ce cadre se trouve bien en bas de la page, j'ai mis un

<hr style='clear: both;visibility: hidden;'>

. Ca marche bien avec le Doctype et plus sans :wacko:

2/ la presentation

J'aimerai que dans le source de ma page, le texte de presentation s'affiche avant les liens (mieux pour l'accessibilite non )

De plus, dans beaucoup d'exemple que j'ai trouve, les gens utilisent des DIV avec des positions absolues pour faire leur mise en page. Mais ca me gene car j'aimerai que mes CSS soient partagees par plusieurs pages. De plus, j'ai des adsens en haut de la page, et je n'ai pas envit de tout modifier le jour ou je change de format ou de regie de pub.

Pis, sur le principe, j'aime pas surtout que je n'avais pas a me poser ce genre de questions avec les tables

Bref, j'ai mis mon texte au debut, et mes listes en dessous avec des attributs float left pour l'une et right pour l'autre.

Le resultat, toujours Test1 montre que les listes ne sont pas a cote de ma carte mais en dessous :boude:

Sur ma 2eme page de test , j'ai passe les listes en debut du source (donc je dois perdre en accessibilite) : ce coup ci, j'ai la mise en page que je souhaites

Mais j'ai un autre probleme : lorsque l'on reduit la fenetre du navigateur pour qu'elle soit plus petite que la taille des listes + la taille de la carte, cette derniere se retrouve en bas de la page.

Comment faire pour avoir le meme resultat qu'avec les tables, c'est a dire que la presentation reste la meme mais qu'apparaisse l'assensceur ?

Voila, qu'en pensez vous ?

A+

Lolo

MS-DOS_1991 · 3 Septembre 2005

Salut

Commence par corriger les erreurs de codage html

-- mettre toutes les balises+attributs en minuscules

-- renseigner les champs alt et fermer les balises seules (br, hr, input)

Ensuite les erreurs de css en mettant les unites (ex: top: -50px

Essaies ensuite de mettre un doctype HTML4.01 Transitional par exemple

Modifié 3 Septembre 2005 par MS-DOS_1991

jeanpierre949 · 3 Septembre 2005

Salut,

et pour les barres de defilement la propriete:

overflow:auto;

destroyedlolo · 3 Septembre 2005

Salut aussi,

ben, en fait les erreurs que tu me donnes correspondent a celles de ma page originale (qui fonctionne).

Mes problemes sont au niveau de ma page de test qui est presque valide.

A+

Lolo

Xavier · 3 Septembre 2005

Tu es sur que ce n'est pas document.images['carte'] qui pose problème ? Je doute qu'on puisse les sélectionner comme ça...

destroyedlolo · 3 Septembre 2005

Tu es sur que ce n'est pas document.images['carte'] qui pose problème ? Je doute qu'on puisse les sélectionner comme ça...

<{POST_SNAPBACK}>

Ben, ca marche tres bien lorsque je n'ai pas le DOCTYPE (j'ai essaye ma page originale avec FireFox, M$-IE et bien sur Netscape 7).

En plus, ca n'expliquerait pas pourquoi l'image se trouve sur la page alors qu'elle a des offsets negatifs et devrait donc se trouver hors

:huh:

destroyedlolo · 3 Septembre 2005

Salut,
et pour les barres de defilement la propriete:

overflow:auto;

<{POST_SNAPBACK}>

Ok, j'ai mis ma partie centrale dans un gros DIV avec cette propriete : ca fonctionne sauf que ca ne tien pas compte de la hauteur reel de la fenetre du navigateur et que j'ai un ascensseur verticale qui apparait comme on peut le voir sur cette page.

Xavier · 3 Septembre 2005

Ben, ca marche tres bien lorsque je n'ai pas le DOCTYPE (j'ai essaye ma page originale avec FireFox, M$-IE et bien sur Netscape 7).

Ah ben si, justement, enlever le doctype peut expliquer beaucoup de comportements étranges, comme je l'expliquais récemment. Le support de cette syntaxe pourrait très bien être là uniquement en mode "quirk" (sans doctype) dans un but de rétrocompatibilité, et désactivée en mode standard...

En plus, ca n'expliquerait pas pourquoi l'image se trouve sur la page alors qu'elle a des offsets negatifs et devrait donc se trouver hors

<{POST_SNAPBACK}>

Je t'accorde ce dernier point

Dudu · 3 Septembre 2005

-- mettre toutes les balises+attributs en minuscules
-- renseigner les champs alt et fermer les balises seules (br, hr, input)

non !

Il travaille en HTML 4.01 T et non en XHTML.

Donc il peut mettre les majuscules qu'il veut: son HTML est dépourvu d'XML donc insensible à la casse.

Quant aux balises uniques elles ne doivent pas être fermées en HTML 4.01 sous peine de faire hurler le validateur.

destroyedlolo · 3 Septembre 2005

Ah ben si, justement, enlever le doctype peut expliquer beaucoup de comportements étranges, comme je l'expliquais récemment. Le support de cette syntaxe pourrait très bien être là uniquement en mode "quirk" (sans doctype) dans un but de rétrocompatibilité, et désactivée en mode standard...

<{POST_SNAPBACK}>

Oui oui bien sur, j'avais lu ce topic. Mais est-ce que ca touche le javascript ?

Et dans ce cas la, ne devrais-je pas avoir des erreurs dans la console ?

destroyedlolo · 3 Septembre 2005

Bon, j'avance :

* ma barre de copyright ne s'affiche plus correctement avec la balise a cause d'une stupide erreur de syntaxe dans le 'style' de sa table.

* avec l'entete HTML 4.01, mon image flottante ne bouge plus ... simplement parce que mon Netscape 7 considere document.getElementById("cible").style.leftcomme une constante et refuse de modifier sa valeur :blink:

Est-ce normale ?

[edit]Bon, j'ai trouve ici aussi : c'est le DTD qui pose probleme

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

sans lui ca fonctionne comme avant

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

Ceci dit, j'aimerai bien savoir pourquoi ...[/edit]

Sinon, je suis toujours bloque pour mon probleme de positionnement des listes et le fait de creer des ascenseurs ...

Modifié 3 Septembre 2005 par destroyedlolo

Xavier · 4 Septembre 2005

Oui oui bien sur, j'avais lu ce topic. Mais est-ce que ca touche le javascript ?

Ça touche absolument tout ce que les concepteurs de navigateurs pourraient juger utile à des fins de rétrocompatibilité sans vouloir pour autant l'implémenter en "standard" (justement parce que ça s'éloigne des standards)

Ex : mozilla supporte document.all (indétectable) en mode quirks. Il y a aussi le fait que théoriquement un document.write devrait faire passer la page en quirk.

Et dans ce cas la, ne devrais-je pas avoir des erreurs dans la console ?

<{POST_SNAPBACK}>

Si... mais au point où on en est...

[edit]Bon, j'ai trouve ici aussi : c'est le DTD qui pose probleme
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
sans lui ca fonctionne comme avant
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
Ceci dit, j'aimerai bien savoir pourquoi ...[/edit]

Parce que sans l'URL le navigateur est en quirk justement...

J'ai une autre piste que pourrait bien se révélér être la bonne...

  document.getElementById("cible").style.left = getX(document.images['carte']) + x -10 + "px";
  document.getElementById("cible").style.top = getY(document.images['carte']) + y - 15 + "px";

:whistling:

Eh oui, tu n'as pas défini d'unités... il faut déplacer l'élément de X quoi ? X centimètres ? Kilomètres ? litres ? grammes ? Carottes ? :fou:

(je ne suis pas sûr de la syntaxe, mais par contre les navigateurs ont suivi des cours de physique et savent qu'il ne faut jamais oublier les unités :hypocrite: )

Modifié 4 Septembre 2005 par Xavier

destroyedlolo · 4 Septembre 2005

Salut,

J'ai une autre piste que pourrait bien se révélér être la bonne...
  document.getElementById("cible").style.left = getX(document.images['carte']) + x -10 + "px";
  document.getElementById("cible").style.top = getY(document.images['carte']) + y - 15 + "px";
Eh oui, tu n'as pas défini d'unités... il faut déplacer l'élément de X quoi ? X centimètres ? Kilomètres ? litres ? grammes ? Carottes ?

(je ne suis pas sûr de la syntaxe, mais par contre les navigateurs ont suivi des cours de physique et savent qu'il ne faut jamais oublier les unités)

<{POST_SNAPBACK}>

GAGNER : avec l'unite, ca fonctionne

Merci pour tes infos et ta tenacite :shake:

Pfff, je doute qu'il y ait beaucoup de page fonctionnelle sur le net, paske 99% des exemple que j'ai trouve utilisant style.left n'ont pas d'unite :blink:

Sinon, une idee quant au positionnement des listes et a la barre de defillement verticale ?

J'ai decidement trop de liens sur cette page (et j'en ait encore quelques 10aine a ajouter) donc je vais changer ma presentation ... Mais ca me sera utile pour d'autres pages.

Modifié 4 Septembre 2005 par destroyedlolo

Xavier · 4 Septembre 2005

Beaucoup de pages sont en mode "quirks"

(une écrasante majorité même...)

Pour le positionnement je vois pas trop... ton bloc central est positionné ?

destroyedlolo · 4 Septembre 2005

Ben, si tu reduit ta fenetre tu as :

- soit l'image qui se place en dessous des listes (c'etait lorsqu'il n'y avait pas de overflow:auto;

- si je place le tout dans un <p class='overflow:auto;'>, j'ai un ascenseur verticale qui apparait (comme si le <p> ne prennait pas toute la hauteur de la fenetre ...

destroyedlolo · 30 Septembre 2005

Salut a tous,

je reveille ce vieux sujet car j'ai refait ma page.

Bon, elle n'est toujours pas valide W3C car elle inclus des trucs partages par mes autres page et je n'ai pas le temps pour verifier que les 600 autres pages ne sont pas cassees :fou:

J'ai teste avec Netscape 7 (version Solaris) et FireFox sans probleme. Est-ce que ca fonctionne avec d'autres navigateurs comme safari ou Opera. Le resultat n'est pas terrible sous M$-IE car les listes ont des decalages : si qq'un a une idee, je suis preneur

Sinon, que pensez vous de maniere generale de cette page (navigabilite, graphisme, ...)

Merci et bon W.E.

Lolo

**Arlette** · 30 Septembre 2005

Sous safari ta page est correcte. Au niveau de la présentation rien à redire pour moi.

Sous IE (Mac) aussi d'ailleurs, j'ai exactement le même rendu que sous safari.

jeanpierre949 · 1 Octobre 2005

Salut.

sous IE win XP c'est le carnage dans le menu en bas.

Ttout est decalé peut--etre probleme de largeur ou padding trop important?

destroyedlolo · 1 Octobre 2005

Sous safari ta page est correcte. Au niveau de la présentation rien à redire pour moi.
Sous IE (Mac) aussi d'ailleurs, j'ai exactement le même rendu que sous safari.

<{POST_SNAPBACK}>

Merci Arlette pour ta reponse.

Est-ce que les listes sont decallees chez toi ?

Paske sous IE6 sous ms-windows, elles sont decalles d'un bon CM.

Connexion

J'essaie de faire dans les regles de l'art

Sujets conseillés

destroyedlolo

MS-DOS_1991

jeanpierre949

destroyedlolo

Xavier

destroyedlolo

destroyedlolo

Xavier

Dudu

destroyedlolo

destroyedlolo

Xavier

destroyedlolo

Xavier

destroyedlolo

destroyedlolo

Arlette

jeanpierre949

destroyedlolo

Veuillez vous connecter pour commenter

Parcourir

Activité