Demande d'aide pour corriger des erreurs relevées par W3c

[miqui]

Bonjour,

Je me permets d'ouvrir un nouveau post, (J'espère ne commettre aucun outrage en faisant cela...) suite à la non résolution de mon problème évoqué ici : http://forum.joomla.fr/showthread.ph...-lire-la-suite.
Je suis sous Joomla 3.3.6, template Beez3. Le site concerné : inicit24.net. Mes connaissances en informatiques sont sans doute rudimentaires, cependant je suis persuadé que sous votre égide on puisse régler le problème.

Ci-dessous, le relevé d'erreurs de W3c.

Qui pourrait me guider ? Par exemple, à ce propos

Erreur Ligne 287 , colonne 31 : Unclosed élément div.

Où me faudrait-il rechercher ? Dans quel fichier peut bien se trouver cette div non fermée ? Comment procéder : en faisant valider par W3c chacun des fichiers du template tels que index.php, com.content,... ou autres.
Je suis persuadé aussi que pour d'autres erreurs il me faudra sans doute un guidage pas à pas plus précis, par exemple pour celle-ci :

Erreur Ligne 369, Colonne 464 : la valeur de l'attribut pas autorisé sur l'entrée de l'élément à ce point.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

Par avance, merci.

Validation Sortie: 5 erreurs

Avertissement Ligne 89, colonne 20 : rubrique vide.

<H1 id = "logo" >

✉
Avertissement Ligne 184, colonne 30 : l'article manque rubrique. Envisagez d'utiliser des éléments h2-h6 d'ajouter les titres qui identifient à tous les articles.

<Article class = "avant-0" >

✉
Avertissement Ligne 227, colonne 32 : l'article manque rubrique. Envisagez d'utiliser des éléments h2-h6 d'ajouter les titres qui identifient à tous les articles.

<Article class = "avant-1" >

✉
Erreur Ligne 305, colonne 12 : Fin tag article vu, mais il y avait des éléments ouverts.

</ Article >

✉
Erreur Ligne 287, colonne 31 : Unclosed élément div.

<Div style = "text-indent: 5%;" >

✉
Erreur Ligne 282, colonne 40 : Unclosed élément div.

<Div style = "background-color: # fff3e2;" >

✉
Avertissement Ligne 263, colonne 35 : l'article manque rubrique. Envisagez d'utiliser des éléments h2-h6 d'ajouter les titres qui identifient à tous les articles.

<Classe article = "item colonne 1" >

✉
Avertissement Ligne 179, colonne 29 : Section manque rubrique. Envisagez d'utiliser des éléments h2-h6 à ajouter des titres d'identification pour toutes les sections.

<Section class = "blog" >

✉
Erreur Ligne 369, Colonne 464 : la valeur de l'attribut pas autorisé sur l'entrée de l'élément à ce point.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

Attributs de l'élément d'entrée :
Les attributs globaux
accepter quand le type est fichier
alt lorsque Type est l'image
autocomplete when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , range , ou couleur
autofocus
vérifié lorsque le type est case ou la radio
dirname quand le type est texte ou la recherche
handicapé
forme
Formaction quand le type est soumettre ou l'image
formenctype quand le type est soumettre ou l'image
formmethod quand le type est soumettre ou l'image
formnovalidate quand le type est soumettre ou l'image
formtarget quand le type est soumettre ou l'image
hauteur quand le type est l'image
liste lorsque le type est texte , la recherche , URL , tél , e-mail , datetime , jour , mois , semaines , le temps , datetime local , nombre , plage , ou la couleur
max quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
maxlength quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
min lorsque le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
multiples lorsque Type est email ou fichier
nom
motif lorsque le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
espace réservé lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , ou nombre
en lecture seule lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , datetime , jour , mois , semaines , le temps , datetime local , ou nombre
required when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , checkbox , radio , ou fichier
taille quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
src lorsque Type est l'image
étape quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
type
la valeur lorsque le type ne est pas un fichier ou l'image
largeur lorsque Type est l'image

Erreur Ligne 369, 464 Colonne : entrée élément est manquant nécessaire attribut alt.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

Attributs de l'élément d'entrée :
Les attributs globaux
accepter quand le type est fichier
alt lorsque Type est l'image
autocomplete when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , range , ou couleur
autofocus
vérifié lorsque le type est case ou la radio
dirname quand le type est texte ou la recherche
handicapé
forme
Formaction quand le type est soumettre ou l'image
formenctype quand le type est soumettre ou l'image
formmethod quand le type est soumettre ou l'image
formnovalidate quand le type est soumettre ou l'image
formtarget quand le type est soumettre ou l'image
hauteur quand le type est l'image
liste lorsque le type est texte , la recherche , URL , tél , e-mail , datetime , jour , mois , semaines , le temps , datetime local , nombre , plage , ou la couleur
max quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
maxlength quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
min lorsque le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
multiples lorsque Type est email ou fichier
nom
motif lorsque le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
espace réservé lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , ou nombre
en lecture seule lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , datetime , jour , mois , semaines , le temps , datetime local , ou nombre
required when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , checkbox , radio , ou fichier
taille quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
src lorsque Type est l'image
étape quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
type
la valeur lorsque le type ne est pas un fichier ou l'image
largeur lorsque Type est l'image

[jisse03]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Bonjour,

La div non fermée correspond à l'article "La philatélie" que tu as ouvert avec un

<div style="text-indent: 5%;">

et cette div n'est pas fermée en fin d'article, on trouve le separator d'articles, mais point de div fermante. Il s'agit donc d'une erreur dans les styles de l'article lui-même.

Pour le reste, on trouve des manques aux règles (pas d'utilisations de titres h2 à h6...), et les habituelles récriminations du validateur W3C contre les fonctions JavaScript.

Il n'y a rien de grave là dedans. Même les site sles plus réputés sont invalides du point de vue W3C. Rien que la pourtant presque vide page d'accueil de google est truffée de 28 erreurs + 4 warnings w3c.

[miqui]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Jisse03,
Bonjour et, sincèrement, merci pour ton soutien.
Je viens de regarder à nouveau (je l'avais déjà visité) l'article "La philatélie" en question. J'ai beau regarder, je ne trouve rien. Il y a deux "div" ouvertes avec leur correspondance de fermeture.
Voici le relevé de code de l'article concerné :

<div style="background-color: #fff3e2;">
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"></span>
</p>
<p style="margin-bottom: 0cm; text-align: center;"><strong><span style="font-size: 14pt; font-family: arial,helvetica,sans-serif;">LA PHILATELIE</span></strong>
</p>
<div style="text-indent: 5%;">
<p style="margin-bottom: 0cm; text-align: center;"> </p>
<p style="margin-bottom: 0cm; text-align: center;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">A ceux qui se sentent l'âme d'un néo-philatéliste (en herbe ? ),</span>
</p>
<p style="margin-bottom: 0cm; text-align: center;"><img src="images/stories/Documents/Timbres/philatlie.jpg" alt="philatlie" width="480" height="370" />
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">nous formulons ces quelques menus 'premiers conseils' :<br /></span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* Ne jamais débuter une collection correspondant à une trop vaste ambition ! (ex. 'Les timbres de la 3ème république') : on y passe un temps énorme, on y consacre un peu trop d'argent... en vain car on se décourage et on abandonne prématurément. Éviter également de se consacrer à tous les timbres d'un pays, sauf s'il est de taille modeste, n'a pas eu une durée trop longue (ex. 'République démocratique allemande' ou 'République arabe unie' (Égypte + Irak +Yémen) et n'est pas un spécialiste de l'émission philatélique.</span>
</p>
<hr id="system-readmore" />
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* Demander conseil à un philatéliste chevronné, amateur ou professionnel. Avoir une idée approximative du coût final, du nombre total de timbres et de la difficulté à se les procurer peut être de bon aloi.</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* Il est indispensable d'avoir un minimum de connaissances sur la fabrication des timbres, les techniques utilisées, etc. A Périgueux on est impardonnable de ne pas savoir ce qu'est la taille-douce et en quoi elle se distingue de l'héliogravure, par exemple.</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* Le choix peut judicieusement se porter sur une collection thématique qui est de fait personnalisée ; mais là encore il ne faut pas avoir les yeux plus gros que le ventre. Ex. 'Les oiseaux dans le monde' n'est sans doute pas très raisonnable ; 'les poissons d'eau douce' l'est plus. Et pourquoi ne pas se constituer une petite collection certes restreinte mais très personnelle ? Ex. 'Les oiseaux vus dans mon jardin'.</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* On peut aussi envisager une collection de timbres avec une figuration thématique unique mais de multiples représentations : 'Marianne' ou 'le coq gaulois'. Si on en a le goût (et les moyens, car ils coûtent cher en non–oblitérés) la représentation d’œuvres d'art (tableaux de peintres célèbres notamment) est un merveilleux objet de collection.</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* D'une façon générale la philatélie acquiert une portée et une valeur accrues si le collectionneur part du timbre pour découvrir ou apprendre (un événement historique, un monument, un artiste - cf. les peintres).</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* De la même manière il ne faut pas systématiquement vouloir obtenir le timbre 'nu'. Collé sur une enveloppe très ancienne ayant réellement voyagé ou sur une carte postale ayant une signification historique lourde, il doit impérativement être conservé en l'état. Ex :cartes postales expédiées en France par des prisonniers ou des requis du STO et comportant les stigmates de la censure allemande.</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* Certains timbres peu esthétiques doivent également être traités avec soin s'ils se rapportent à une brève période historique et en particulier s'ils ont été surchargés ('État français', ' Afrique équatoriale française',) pour des raisons purement matérielles parfois...</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">* Ne jamais oublier que certains pays, de petite taille souvent, ont utilisé la philatélie comme moyen d'accroître leur renommée touristique (pays du golfe arabo-persique surtout), ou pour gagner quelques devises précieuses.</span>
</p>
<p style="margin-bottom: 0cm; text-align: justify;"> </p>
<p style="margin-bottom: 0cm; text-align: center;"><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;">A VOS GRENIERS ! </span>
</p>
<p style="margin-bottom: 0cm; text-align: center;"><strong>_______________</strong>
</p>
<p style="margin-bottom: 0cm; text-align: center;"> </p>
</div>
</div>

J'ai éliminé le code <div style="text-indent: 5%;"> et testé le bon fonctionnement de l'article en cliquant sur "lire la suite". Malheureusement, en faisant cela, la colonne des menus de droite se décale à gauche, et la couleur de fond de l'article disparaît pour prendre la couleur de fond de la page. Le problème demeure donc...

Merci encore. A te lire.

[miqui]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Jisse03

Je viens de supprimer l'article, puis de le réinstaller sans les "div" <div style="background-color: #fff3e2;">, et <div style="text-indent: 5%;">. Pour cet article, en cliquant sur "lire la suite", la colonne de droite des menus demeure bien en place, mais la reprise du texte se fait au niveau de la coupure "lire la suite".
Par contre, pour les autres articles qui disposent de la mention "lire la suite", l'erreur est toujours là : déplacement de la colonne des menus de droite sous la colonne des menus de gauche, disparition de la couleur de fond des articles et reprise du texte au niveau de la coupure "lire la suite".

Voici ce que donne le nouveau contrôle avec W3c : Il semblerait qu'il y ait un problème du côté du module de recherche - je me trompe ?

Validation de sortie: 2 erreurs

Avertissement Ligne 89 , colonne 20 : rubrique vide.

<H1 id = "logo" >

✉
Avertissement Ligne 184 , colonne 30 : l'article manque rubrique. Envisagez d'utiliser des éléments h2-h6 d'ajouter les titres qui identifient à tous les articles.

<Article class = "avant-0" >

✉
Avertissement Ligne 225 , colonne 32 : l'article manque rubrique. Envisagez d'utiliser des éléments h2-h6 d'ajouter les titres qui identifient à tous les articles.

<Article class = "avant-1" >

✉
Avertissement Ligne 271 , colonne 35 : l'article manque rubrique. Envisagez d'utiliser des éléments h2-h6 d'ajouter les titres qui identifient à tous les articles.

<Classe article = "item colonne 1" >

✉
Avertissement Ligne 179 , colonne 29 : Section manque rubrique. Envisagez d'utiliser des éléments h2-h6 à ajouter des titres d'identification pour toutes les sections.

<Section class = "blog" >

✉
Erreur Ligne 366 , Colonne 464 : la valeur de l'attribut pas autorisé sur l'entrée de l'élément à ce point.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

Attributs de l'élément d'entrée :
Les attributs globaux
accepter quand le type est fichier
alt lorsque Type est l'image
autocomplete when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , range , ou couleur
autofocus
vérifié lorsque le type est case ou la radio
dirname quand le type est texte ou la recherche
handicapé
forme
Formaction quand le type est soumettre ou l'image
formenctype quand le type est soumettre ou l'image
formmethod quand le type est soumettre ou l'image
formnovalidate quand le type est soumettre ou l'image
formtarget quand le type est soumettre ou l'image
hauteur quand le type est l'image
liste lorsque le type est texte , la recherche , URL , tél , e-mail , datetime , jour , mois , semaines , le temps , datetime local , nombre , plage , ou la couleur
max quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
maxlength quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
min lorsque le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
multiples lorsque Type est email ou fichier
nom
motif lorsque le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
espace réservé lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , ou nombre
en lecture seule lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , datetime , jour , mois , semaines , le temps , datetime local , ou nombre
required when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , checkbox , radio , ou fichier
taille quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
src lorsque Type est l'image
étape quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
type
la valeur lorsque le type ne est pas un fichier ou l'image
largeur lorsque Type est l'image

Erreur Ligne 366 , 464 Colonne : entrée élément est manquant nécessaire attribut alt.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

Attributs de l'élément d'entrée :
Les attributs globaux
accepter quand le type est fichier
alt lorsque Type est l'image
autocomplete when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , range , ou couleur
autofocus
vérifié lorsque le type est case ou la radio
dirname quand le type est texte ou la recherche
handicapé
forme
Formaction quand le type est soumettre ou l'image
formenctype quand le type est soumettre ou l'image
formmethod quand le type est soumettre ou l'image
formnovalidate quand le type est soumettre ou l'image
formtarget quand le type est soumettre ou l'image
hauteur quand le type est l'image
liste lorsque le type est texte , la recherche , URL , tél , e-mail , datetime , jour , mois , semaines , le temps , datetime local , nombre , plage , ou la couleur
max quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
maxlength quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
min lorsque le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
multiples lorsque Type est email ou fichier
nom
motif lorsque le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
espace réservé lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , ou nombre
en lecture seule lorsque le type est texte , la recherche , URL , tél , e-mail , mot de passe , datetime , jour , mois , semaines , le temps , datetime local , ou nombre
required when type is text , search , url , tel , e-mail , password , datetime , date , month , week , time , datetime-local , number , checkbox , radio , ou fichier
taille quand le type est texte , la recherche , URL , tél , e-mail ou le mot de passe
src lorsque Type est l'image
étape quand le type est datetime , jour , mois , semaines , le temps , datetime local , nombre , ou plage
type
la valeur lorsque le type ne est pas un fichier ou l'image
largeur lorsque Type est l'image

[jisse03]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Je viens de supprimer l'article, puis de le réinstaller sans les "div" <div style="background-color: #fff3e2;">, et <div style="text-indent: 5%;">. Pour cet article, en cliquant sur "lire la suite", la colonne de droite des menus demeure bien en place, mais la reprise du texte se fait au niveau de la coupure "lire la suite".

Pour la reprise de texte, voir les paramètres de l'option de menu ou les paramètres généraux de la configuration des articles.

Par contre, pour les autres articles qui disposent de la mention "lire la suite", l'erreur est toujours là : déplacement de la colonne des menus de droite sous la colonne des menus de gauche, disparition de la couleur de fond des articles et reprise du texte au niveau de la coupure "lire la suite".

Voici ce que donne le nouveau contrôle avec W3c : Il semblerait qu'il y ait un problème du côté du module de recherche - je me trompe ?

Soit des articles sont le résultat de copier-coller sauvages depuis Word, soit une balise quelconque dans les surcharges du template n'a pas sa fermeture. Les erreurs d'affichage de ce type proviennent quasiment toujours d'anomalies de ce type dans les contenus.

[miqui]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Merci Jisse03,

Je vais me pencher sur tes propositions dés que j'ai un peu de temps. Ta remarque sur les copier-coller depuis Word (en fait O.O.o) fait tilt.
A bientôt.

[miqui]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Jisse03

Je viens de résoudre le problème. Sur le weeb, un post de 2006 parlait de cassage de site par JCE. Malheureusement, les données fournies ne correspondaient pas à ma version. Mais cela m'a mis la puce à l'oreille.
Peut-être que ce qui semble la solution peut aider d'autres "perdus" que moi.
En fait, dans dans l'administration : système>configuration>articles>le paramètre "texte d'introduction" était sur "masquer" !

Et tout est revenu dans l'ordre : Maintien de la colonne des menus de droite, évidemment maintien du texte d'introduction dans l'article qui apparaît après avoir cliqué sur "lire la suite", et couleur de fond demeurant comme souhaité.
Que demander de plus ? Mais que de temps passé !

J'ai retesté avec W3c. J'ai encore cinq erreurs, dont des div non fermées.
J'aimerais bien les résoudre celles-là. Est-ce qu'il n'y a pas un risque à ce que cela reste ainsi ? Qu'en penses-tu ?

[webcrea]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Surveille le <hr id="system-readmore" /> qui s'insère parfois sans tenir compte des div ouvertes et dans ce cas il faut les fermer manuellement

par exemple dans le premier article il faut ajouter

</div>
<hr id="system-readmore" />
<div style="background-color: #fff3e2;">

car comme son nom l'indique le readmore n'affiche que l'intro et pas le contenu fulltext qui contient la div fermante

[miqui]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Webcrea,

Surveille le <hr id="system-readmore" /> qui s'insère parfois sans tenir compte des div ouvertes et dans ce cas il faut les fermer manuellement

Comme à l'habitude : Très judicieuse remarque ! Maintenant que tu le dis, je comprends, mais j'étais incapable de le trouver.
En tout cas ceci à permis de supprimer 3 erreurs sur les 5 que relève w3c.
Il ne me reste plus que ces deux erreurs (je ne tiens pas compte des avertissements) :

Erreur Ligne 367 , Colonne 464 : la valeur de l'attribut pas autorisé sur l'entrée de l'élément à ce point.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

et

Erreur Ligne 367 , 464 Colonne : entrée élément est manquant nécessaire attribut alt.

... Cliquez = "this.form.searchword.focus ();" / > <input type = name = "tâche" Valu "caché" ...

Ces deux erreurs semblent liées au module recherche. Serait-ce encore un problème de paramétrage ?

Merci encore pour tes précieux conseils.

[webcrea]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

ça c'est étrange

name = "tâche"

le nom d'un champ ne peut contenir des caractères accentués

est-ce un module que tu as traduit ?

[miqui]

Re : Demande d'aide pour corriger des erreurs relevées par W3c

Wecrea,

est-ce un module que tu as traduit ?

A ma connaissance non.