J'ai 2 gros problèmes dans ma page

Salut tout le monde,

Je viens de créer une page qui une fois fini servira de modèle pour les autres pages du site.
C'est un site avec layout centré, largeur fixe, 2 colonnes, avec pied de page (footer) qui colle toujours au bas de l'ecran s'il n'y a pas assez de contenu pour la pousser en bas.

J'ai hébergé la page dans un serveur free pour tester un peu la validation, http://www.hassang.byethost14.com/
J'ai réussi à vailder le xHTML et CSS et la page marche sur IE6, 7 et 8, FF2 et 3, Safari4, Opera10, seamonkey et netskape9. J'ai utilisé un 2ème fichier css conditionnel pour IE6.

Tous semble bon mais :

1- Je ne peux pas valider ma page si l'encodage est utf-8, je reçois ce message : Sorry, I am unable to validate this document because on line 132 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

Quelle est mon erreur ? Quoi faire ? Il est indispensable que le site puisse supporter la langue arabe !

2- 2ème problème, très grave, j'ai essayé de ne pas utiliser de tables dans le design (ce n'est pas bon pour la sémantique du site) j'ai donc utilisé des divs mais tellement trop que je pense que je suis tombé dans le trou que j'évitais ! Même chose pour les ids (que normalement je ne dois pas les utiliser pour appliquer des styles) et n'en parlons pas des classes...

Quand et comment utiliser les ids et classes ? Mais à ce stade ma question est plutôt comment corriger la structure de ma page ?

Autres problèmes :

- J'utilise un menu vertical en arborescence (conçu en mélangeant mon code avec beaucoup d'autres collecté des forums), je veux changer le style du lien courant (catégorie et sous-catégorie dans mon site)

- la favicon n'apparaît pas dans tous les IEs !

Voilà pour le moment

Dites-moi quoi faire s'il vous plaît surtout pour la sémantique !
Modifié par hassang (02 Nov 2009 - 17:26)

Bonjour ,

C'est bizarre moi le w3c dit que t'a page est valide, donc je ne vois pas d'où vient le problème.

Pour ce qui est du favicon inspire toi de alsa , un ordre est à respecter (je crois)

<link rel="shortcut icon" href="http://www.alsacreations.com/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://www.alsacreations.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://www.alsacreations.com/favicon.png" />

Sinon quel menu exactement veux tu modifier, je ne comprends pas vraiment ce que tu souhaites faire....

En tout cas, bon boulot déjà.

Bonjour,

J'ai supprimé les dix mille lignes de code HTML et CSS pour que ce sujet redevienne visible. Vu que tu donnes l'adresse du site, donner ces lignes de code n'était pas nécessaire.

Sur le problème de validation avec UTF-8: tu as tout simplement un octet ou une série de quelques octets qui ne représente(nt) pas un caractère valide en UTF-8 (caractère imprimable ou caractère de contrôle). Bref, ton fichier n'est pas de l'UTF-8 valide à cause d'une erreur précise. C'est parfois difficile à corriger car:
- les octets qui posent problèmes peuvent être invisibles dans ton éditeur de code;
- ou, à l'inverse, l'éditeur de code peut les représenter comme des caractères imprimables «normaux», alors même que le caractère est invalide (l'éditeur tente sans doute d'aider l'utilisateur, mais c'est lui rendre un mauvais service que de ne pas signaler ce problème).

Ça, c'est la partie un peu subtile du problème. Mais souvent, c'est un problème qui est beaucoup moins subtil. Par exemple, on peut avoir ce genre d'erreur quand on a un contenu encodé en ISO-8859-1 et qu'on s'amuse tout à coup à le déclarer comme étant de l'UTF-8, sans avoir changé l'encodage réel du contenu. C'est un problème courant que l'on nomme aussi (attention, c'est son nom technique, un peu ardu): ne pas avoir la moindre fichue idée de ce que sont les jeux de caractères et codages de caractères. Ce problème de fond se règle en lisant des articles techniques simplifiés sur ces thèmes, et des documentations un peu précises comme la documentation du W3C sur l'internationalisation.

Si ton problème correspond à ce problème de fond, tu sais quoi faire.

En ce qui concerne la qualité du code HTML, l'utilisation des identifiants et classes... ça m'a semblé très correct. Pas grand chose à redire, il y a beaucoup de DIV mais ça correspond en général à un besoin donc pas de problème flagrant ici.

La structure des titres est un peu incohérente. Le premier H1 de la page d'accueil devrait être le logo. Ce logo devrait être transcrit avec un texte alternatif qui dit "Machin - bla bla la baseline" et pas "Machin Logo" comme actuellement (bref, transcrire ce qui est écrit sur l'image, en toute logique). Tous les titres utilisés par ailleurs pourraient être des H2 (plutôt qu'un H1, un H2 et deux H3). Sur les pages intérieures, ensuite, tu peux garder le logo en H1 ou bien éventuellement le passer en simple paragraphe (je ne détaille pas les arguments de chaque solution, ce serait un peu long), et il faudra à priori utiliser un H1 pour le contenu principal (nom du produit sur une fiche produit).

Une remarque en passant: ne jamais écrire de texte en majuscules. Si tu veux un affichage en majuscules pour un titre, fais-le en CSS. Ainsi tu pourras changer d'avis facilement sans modifier les contenus HTML.

Le contenu de la boite «Guide» pourrait être un OL plutôt qu'un UL. Mieux vaut le passer en text-align:left, par contre, ça sera plus lisible qu'actuellement (du justify sur une colonne de moins de 400px de large, il faut être un peu givré...).

À part ça il y a une ou deux parties du design qui sont figées en hauteur et gèrent mal l'agrandissement du texte (alors qu'il y a pas de raison...). La liste des catégories pourrait être un UL, de même que les trois liens directement avant. Ces deux listes pourraient avoir un style graphique plus proche, là c'est un peu incohérent (gestion des espaces), et les puces pourraient être gérées comme images de fond en CSS tant qu'à faire.

Les liens du menu sont trop écartés, on ne tilte pas tout de suite qu'il s'agit d'un menu de navigation. Avoir des liens Inscription et Connexion séparés, sur une deuxième ligne et avec une variation graphique, tandis qu'on a encore de la navigation à gauche, c'est un peu too much. J'aurais simplifié cette interface, genre comme ça:

a écrit :
je veux changer le style du lien courant

Voir les astuces dans la partie Apprendre, on en parle justement.
Pour un menu «accordéon» qui marche bien, il y a d'ailleurs un tutoriel qui peut t'intéresser.

Bonjour,

Merci pour vos réponses,

masseuro, j'ai changé l'ordre des liens pour la favicon mais sans vain, IE6, 7 et 8 ne l'affichent pas. Même chose pour tous les sites sur IE, je ne vois pas les favicons ! Peut-être parce que j'utilise IE collection ?


Florent V. merci pour ta réponse, j'utilise phpDesigner comme éditeur et je pense basculer à pspad prochainement (après avoir terminer ce projet). Je ne sais pas s'il me cache des caractères invalides qui empêchent la validation avec UTF-8.

Question : Est-ce que le validateur w3c compte aussi ces caractères s'ils sont dans un commentaire ?

Si tu dis que mes divs, ids et classes sont faites correctement, je n'y toucherais pas. Mais j'ai senti que j'ai abusé de leurs utilisations, ce projet est le 2ème site réel que je conçois !

Je changerais le H1, H2 et H3 comme tu l'a conseillé. J'ai vu que c'est utile pour le site outline du w3c.

Je n'ai pas bien compris ce que tu veux dire ici :

a écrit :
À part ça il y a une ou deux parties du design qui sont figées en hauteur et gèrent mal l'agrandissement du texte (alors qu'il y a pas de raison...)

Tu parles de l'agrandissement avec ctrl + ? Qu'est-ce qui ne va pas ? Que dois-je faire ?

Pour ce que tu as dis :

a écrit :
et les puces pourraient être gérées comme images de fond en CSS tant qu'à faire.

Je ne saurais pas si je vais réussir à le faire, parce les images des puces font en quelques sorte partie de la fonction JS. (C'est la première fois que j'utilise du JS c'est donc un peu compliqué pour l'instant)
Voici la fonction JS pour l'arborescence :

function expandcollapse(thistag,img,parent)
{
  styleObj=document.getElementById(thistag).style;
  parentstyle=document.getElementById(parent).style;
  if(styleObj.display=='none')
  {
  	styleObj.display='block';
  	img.src=Open.src;
  	parentstyle.textDecoration='underline';
   	parentstyle.backgroundColor='#f0f1f1';
   	parentstyle.fontWeight='bold';
  }
  else
  {
  	styleObj.display='none';
  	img.src=Closed.src;
  	parentstyle.textDecoration='none';
   	parentstyle.backgroundColor='';
   	parentstyle.fontWeight='normal';
  }
}

Je verrais ce que je peux faire pour le menu et les liens inscription et connexion, j'aime bien ta proposition mais comment je ferais alors pour la recherche avancée ?

Je verrais aussi le menu accordéon du tutoriel, on peut l'alimenter dynamiquement ?

Voilà,

Encore merci mille fois, désolé pour mes longs posts, c'est que je dois donner les fichiers des pages à un autres développeur pour qu'il puisse y intégrer la partie dynamique. Et je veux vraiment lui fournir un code de pages solide !

Thank you

hassang a écrit :
Question : Est-ce que le validateur w3c compte aussi ces caractères s'ils sont dans un commentaire ?

Oui.

a écrit :
À part ça il y a une ou deux parties du design qui sont figées en hauteur et gèrent mal l'agrandissement du texte (alors qu'il y a pas de raison...)

Firefox 3.0 ou 3.5. Choisir «Affichage > Zoom > Zoom texte seulement». Agrandir la taille du texte deux fois.

a écrit :
Qu'est-ce qui ne va pas ?

Le texte dépasse de certains conteneurs. Ces conteneurs ne suivent pas l'agrandissement du texte. Il s'agit soit de conteneurs ayant une hauteur fixe en pixels (ou autre unité), soit dans certains cas de problèmes de dépassement des flottants (ou des éléments positionnés en absolu).

a écrit :
Que dois-je faire ?

Utiliser le moins possible la propriété height (min-height peut être utile dans certains cas). Apprendre à gérer le dépassement des flottants et prévoir le coup dès que tu utilises float. Ne pas abuser du positionnement absolu.

a écrit :
mais comment je ferais alors pour la recherche avancée ?

Qui te dit que la recherche avancée sert à quelque chose, hum? C'est rarement le cas.
Et lorsqu'elle est utilisée pour de vrai (à mesurer s'il y a déjà un site en ligne), est-ce parce que la recherche simple est déficiente? Si oui, améliorer la recherche simple.
Et si la recherche simple n'est pas déficiente, juste limitée? Eh bien il est probable que l'utilisateur ait fait une recherche simple non satisfaisante, donc proposer les options de recherche avancée (en petit nombre) sur le formulaire de recherche dans la page de résultats. Et si on estime que l'utilisateur peut vouloir aller directement à la recherche avancée (sait-on jamais... mais on mesurera tout de même si c'est le cas, hein), eh bien on placera ce lien vers la recherche avancée à droite (et non pas à gauche comme un label...), en petit (cf. google.com).

a écrit :
Je verrais aussi le menu accordéon du tutoriel, on peut l'alimenter dynamiquement ?

Oui, il ne mord pas.

Merci beaucoup Florent V.

a écrit :

donc proposer les options de recherche avancée (en petit nombre) sur le formulaire de recherche dans la page de résultats.

J'aime bien l'idée !

Encore merci. Tu es un sauveur.
Modifié par hassang (03 Nov 2009 - 11:22)