Aller au contenu

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

destroyedlolo

Par destroyedlolo
dans (X)HTML et CSS

 Partager

Sujets conseillés

destroyedlolo

destroyedlolo

Posté
Posté

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 :D )

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

Lien vers le commentaire
Partager sur d’autres sites
MS-DOS_1991

MS-DOS_1991

Posté
Posté (modifié)

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é par MS-DOS_1991
Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté
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:

Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté
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.

Lien vers le commentaire
Partager sur d’autres sites
Xavier

Xavier

Posté
Posté
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

:huh:

<{POST_SNAPBACK}>

Je t'accorde ce dernier point ;)
Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté
-- mettre toutes les balises+attributs en minuscules

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

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

;)

Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté
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 ?

Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté (modifié)

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é par destroyedlolo
Lien vers le commentaire
Partager sur d’autres sites
Xavier

Xavier

Posté
Posté (modifié)
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é par Xavier
Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté (modifié)

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";

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

(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é par destroyedlolo
Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
  • 4 semaines plus tard...
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté

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

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

Merci et bon W.E.

Lolo

Lien vers le commentaire
Partager sur d’autres sites
destroyedlolo

destroyedlolo

Posté
  • Auteur
Posté
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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...