Compatibilité sur différents navigateurs et autres conseils(RESOLU)

Hello,

Tu devrais déjà commencer par passer toutes les pages de ton site au validateur W3C (un outil qui permet de vérifier que le code de tes pages est correct aux standards de codage).

Tu vas obtenir un certain nombre d'erreurs qu'il serait bon de corriger, il est possible que cela règle tes problèmes (ou pas) sous IE, mais de toute façon tu y gagneras au moins en terme de référencement, Google aime le code propre.

Si tu as des problèmes pour régler ou comprendre les erreurs, n'hésite pas.


De plus, je remarque qu'il y a du code php dans tes pages alors qu'elles ne sont pas en php mais en html, enlève-le (tout ce qui est entre <?php et ?>).


PS : OMG tu dessines bien. :o
Modifié par Skoua (13 Aug 2009 - 12:21)

Bonjour,

C'est normal d'avoir une page blanche avec IE6 ?


Bon en tant que modérateur, je suis confrontée à un dileme, ton sujet devrait se trouver dans la partie "Ergonomie et esthétique générale", mais il ne répond clairement aux critères de cette section du forum...

De plus tu demande une aide qui n'est pas en accord avec les principes d'Alsacreations, ici l'on privilégie l'entraide en vue d'apprentissage, pas le "faites-le à ma place, j'ai pas le temps". Donc si tu rencontre des problèmes précis, tu est tout à fait invité à demander de l'aide, en nous proposant ton code et expliquant où est le problème.

Quelques pistes pour t'aider à mettre en oeuvre les "améliorations souhaitées" dont tu nous parle :

a écrit :
-l'adapter aux différents navigateurs utilisés actuellement (je n'ai travaillé que sous firefox) et j'ai du mal à comprendre d'où proviennent et comment corriger les erreurs, comme sur IE ou toutes mes pages ne s'affichent pas.

N'ayant qu'une page blanche, je ne peux pas constater le problème, mais corriger les erreurs de code HTML semble être un bon début pour la résolution de n'importe quel problème. Si IE (6 en particulier) continue de faire des misères, il sera possible de corriger ponctuellement certains points en utilisant une feuille de style correctionnelle appellée via un commentaire conditionnel.

a écrit :
-tester que tout fonctionne correctement, et corriger certaines erreurs possible.

Tu peux faire le test facilement chez toi en installant par exemple multipleIEs, opera, safari, chrome...

En passant, débrouilles-toi pour passer ta favicon en .ico et pas .png, le png n'est pas supporté par IE. Tu pourras trouver des plugins pour enregistrer en .ico avec Photoshop sur le net.

Pour la page blanche, tu peux essayer de voir si ce n'es pas un script JS qui fait des siennes (j'ai vu dans le code qu'il y en avait beaucoup... trop peut-être)

EDITH : Je déplace le sujet dans la section Ergonomie et Esthétique Générale, il sera plus à sa place pour recevoir des commentaires sur sa conception.
Modifié par Laurie-Anne (13 Aug 2009 - 13:20)

Quelques remarques générales de premier abord :

Première remarque : les splash screen (écran d'accueil sans contenu) c'est mal, ça tue des bébés pandas ! Sur les sites bilingues, on peut éventuellement les tolérer, mais là, il n'y a rien à faire sur cette page à part cliquer (on ne sait pas trop où d'ailleurs) pour aller à la page suivante. De plus l'espace blanc avant l'image est très grand, avec ma configuration actuelle (fenêtres réduites pour faire plusieurs choses à la fois, j'ai un peu plus de la moitié supérieure de la fenêtre qui est vide). Et les truc qui bougent c'est certe mignon, mais c'est pas facile à lire.

Sur la page suivante (qui n'es maintenant plus blanche O_O) il manque un titre en haut de page, toujours sur ma config, je ne sais pas quel est le titre du site ou de quoi ça va parler.

Tu pourras eventuellement (c'est pas le plus urgent) penser à préciser des images alternatives aux PNG pour IE6 (avec des commentaires conditionnels ou en PHP pour les image dans le HTML)

Pour le code :

* Il faudrait mettre tes script JavaScript dans un fichier externe que tu pourra appeller comme ta feuille de style. Cela réduira le poids de tes pages HTML et facilitera leurs MAJ. En plus ça sera plus propre.

* Pense à signaler la langue principale du document :

<html xmlns="http://www.w3.org/1999/xhtml"[b] xml:lang="fr" lang="fr"[/b]>

ainsi que les changements de langue éventuels :

<h3 align="center">-Tchom rèap sour-</h3>

Même si je ne suis pas sûre que ce soit une langue ^^;

* Pense à ajouter une description de tes pages (une description par page) sexy qui attirera la clic du visiteur, via la balise meta description.

* Attention à l'attribut alt :

<img src="element_site/background/element_fond1.jpg" alt="image de fond"/>

Pour les images purement décorative, il ne faut pas le renseigné, juste le laisser vide : alt="". D'ailleurs, dans le cas de cette image qui est une image de fond, ne serait-elle pas plus à ton aise dans la feuille de style CSS comme "background" de l'élément #conteneur ?

* Attention au balisage :

<p><div class="debutdetext">J'ai l'immense joie de vous présenter mon petit site internet, je voulais une navigation spontanée et agréable, j'espére que cela sera le cas.</div><br /><br />

Primo, il serait préférable de mettre la classe "debutdetext" sur le <p>, cela supprimera une balise et rendre la code valide (je ne pense pas que <div> puisse être enfant de <p>. Ensuite, il est possible de préciser un margin-bottom ou padding-bottom à <p> pour supprimer les <br /> qui sont utilisé ici pour la mise en page plus que pour structurer le texte.

* Ta hiérarchie de lien est incomplète, ce qui risque de bloquer les utilisateurs de lecteurs d'écran qui navigent via les titres d'un document. Le premier Hn d'un document HTML doit toujours être H1 et il ne doit pas y avoir d'interruption dans les niveau de titre (pe, tu ne peux pas avoir de h3 sans h2).

* Penses à fermer TOUTES les balises que tu ouvres !

Hormis ces quelques point, ton code est propre.

Pour ce qui est de ton fichier CSS :

* Je ne pense pas que le positionnement relatif soit utile pour la présentation de ton site (il était utilisé pour permettre le positionnement absolu de l'image de fond je présume).

* Attention au reset CSS global :

*{margin:0;padding:0;}

Il peut parfois entrainer des problèmes. Si tu tiens absolument à faire un reset CSS (que je ne considère pas utile, mais c'est mon avis), je te conseille d'abord la lecture de cet article, qui présente d'autres techniques, plus fiables, que celle que tu as employé.

* Remplace

a{
  outline: none;
}

par

a:active {
  outline: none;
}

Les pointillés qui apparaissent sur les liens qui viennent d'être cliqué te semble peut-être gênant mais ils sont nécessaire pour la navigation de certains visiteurs, car ils indiquent ou se trouve le focus losque l'on navigue au clavier, par exemple. En ajoutant ":active" tu supprime la bordure au moment du clic mais elle reste disponible pour le focus.

* Tu utilises des unités fixes (px) pour certaines tailles de caractères. Il est préférable d'utiliser des em ou % qui permettront aux utilisateurs myopes d'IE6 et 7 d'agrandir les caractères pour lire plus facilement.


Gros, GROS, pour noir de ton site, c'est la navigation en Flash qui risque d'être difficile pour certains utilisateurs "handicapés" (même si les aveugles peuvent ne pas sembler interesser par tes dessins, ils pourraient l'être par ton blog, pour te contacter...).


Et une tartine, une !

Ps. : pense à éditer le premier message du sujet pour mettre le nom de ton site/son URL dans le titre.
Modifié par Laurie-Anne (13 Aug 2009 - 14:05)

Whhoo....Je tiens à te remercier du temps que te me consacre

Je corrige petit a petit, c'est pour cela que certaines pages commence à être accessible, je vais travailler étape par étape tout les points que tu as su remarqué si vite,

Pour le moment je continue le Jeux des mille erreurs avec le W3C, c'est très amusant^^

je note toutes les remarque pour y revenir ensuite.

bon bon j'ai corrigé tout les erreurs du site pour qu'il soit aux normes W3C,
mais une erreur persiste dans une page..

a écrit :
Error Line 57, Column 39: Attribute "area" is not a valid attribute. Did you mean "readonly" or "declare"?

<td><a class="rollopaque" area="pic/bazar/666lennon.png" href="pic/bazar/

Je sais que c'est parce que j'ai utilisé un attribut non valide,
le pb c'est que c'était volontaire, je suis obligé d'utiliser un attribut comme "rel" ou "href" mais je m'en sert déjà ailleurs.
du coup je suis bloqué car je ne sais pas quelle autre attribut html prendre pour faire ce que je souhaite.
oulas j'ai l'impression que personne ne va me comprendre.

Si vous pouvez m'éclairer? je suis a votre écoute

Sinon je crois que toute les page s'affiche sur IE, pour l'instant je l'ai testé uniquement sur le IE8 et cela s'affiche comme FF donc c'est bien.
Mais j'ai cru comprendre que le vilain était IE6..
cela va être une autre histoire.

J'ai mis aussi les Js dans une page séparé.
et tenté de corriger certaines erreurs. Cela prend du temps.
Modifié par homonculus (13 Aug 2009 - 19:53)

merci beaucoup, j'y vois plus clair.

je vais tenter de corriger cela et j'ai donc testé sur IE6 et IE7 et j'ai repéré des petites erreurs, le W3c a fait du bien^^


IE6
_apparition d'un fond rose sur les image png (en cours de correction)
_apparition d'un espace blanc entre l'image juste au dessus du tableau et le tableau, dans la page galerie,

BD, liens, repos, bazar
_redimentionnement des images "apercu" (les image qui apparaissent lorsque l'on survole les image d'un

tableau), à leur taille réelles, alors que j'avais spécifié une taille qui fonctionne sur FF

IE7

_apparition d'un cadre sur le menu flash et il faut cliquer une fois pour l'activer"click to activate and usethis controle"
_apparition d'un espace blanc entre l'image juste au dessus du tableau et le tableau, dans la page galerie,

BD, liens, repos, bazar