Correction erreur W3C

**passager123** · 24/07/2011, 17h26

Bonjour,

Je viens de finir mon site Internet et j'aimerai faire valider mon code par W3C mais j'ai quelques erreurs et je ne vois pas pourquoi c'est en erreur.

Voici les erreurs : EN rouge ce sont les erreurs.

Error Line 18, Column 28: there is no attribute "height"

<table width="817" height="73" border="0" align="center" bordercolor="#504029">

Line 18, Column 71: there is no attribute "bordercolor"

<table width="817" height="73" border="0" align="center" bordercolor="#504029">

Line 20, Column 21: there is no attribute "width"
<td width="10" height="69" align="left">

Line 23, Column 51: there is no attribute "size"

…d width="719" align="left"><font size="+3" color="#9f0000" >Etablissement</fon…

Line 23, Column 124: element "font" undefined

…f0000" >Etablissement</font><font size="+3" color="#4e3e27"> DUFOUR</font></td>

Error Line 30, Column 98: required attribute "alt" not specified

… align="center"><img src="images/IMG_0456.JPG" width="229" height="105" /></td>

Line 70, Column 15: there is no attribute "align"
<div align="left" > 

Error Line 82, Column 106: there is no attribute "wmode"
…y="high" allowFullScreen="true" wmode="transparent" allowScriptAccess="always"…

Line 82, Column 179: there is no attribute "type"
…ways" name="tech" align="middle" type="application/x-shockwave-flash" pluginsp…

Line 97, Column 38: element "u" undefined
<li><a href="index.html"><u>Accueil</u></a></li>

Avez vous une idée ? Car la je sèche un peu.

Merci pour votre aide

**ornitho13** · 24/07/2011, 18h21

Salut,

as tu mis un doctype dans ton document HTML ?

**passager123** · 24/07/2011, 18h23

Oui,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Est-ce que quelqu'un aurait une idée pour les erreurs ?

**Bovino** · 24/07/2011, 18h24

Avez vous une idée ?

Ben oui, il suffit de lire

there is no attribute "height"

there is no attribute "bordercolor"

etc. qu'est-ce qui n'est pas explicite dans le fait de te dire que les attributs que tu utilises sont invalides ?

**passager123** · 24/07/2011, 18h43

C'est invalide dans quoi ? Je le remplace par quoi pour qu'il n'y est plus les erreurs ?

**Bovino** · 24/07/2011, 18h50

Ben... c'est invalide dans le validateur

Mais bon, à quoi ça te sert de vouloir valider ton code si tu ne sais pas à quoi correspond la validation ???
Tu ferais bien de lire À quoi cela sert-il de déclarer un doctype (DTD) ?

**passager123** · 24/07/2011, 18h52

D'accord merci pour le lien.

C'est possible de corriger ces erreurs afin de plus en avoir ?

**12monkeys** · 24/07/2011, 19h24

Bonjour

Soit tu passes à un doctype transitionnal, qui est plus permissif. Regarde dans la FAQ pour les détails.

Soit tu respecte les règles qui s'appliquent au doctype xhtml strict : tu as là 3 tutoriels à lire pour t'aider : http://xhtml.developpez.com/cours/#xhtml.

Au passage je dirais : la mise en page à base de tableaux est obsolète et déconseillée. La mise en page et les styles de ta page doivent être appliqués via les CSS, et notamment <font> par exemple est obsolète et doit être traité via CSS.

**passager123** · 24/07/2011, 19h29

D'accord, merci en tout cas pour ton aide.

Si je remplace mes tableau par des balises <div>? Comment fait ton pour mettre une photo à gauche et du texte a droite, sachant que ce texte doit etre centré par rapport a la photo ?

J'ai essayé je n'y arrive pas ?

**12monkeys** · 24/07/2011, 19h39

Le texte doit être centré comment : horizontalement ou verticalement ?

**passager123** · 24/07/2011, 19h58

Le texte doit être centrer verticalement par rapport a la photo.

**thelvin** · 25/07/2011, 00h42

Si les données sont tabulaires (un tableau de photos commentées, les photos dans la première colonne, les commentaires dans la deuxième colonne,) alors quelque part il est normal de les mettre dans un tableau. Un. Pas deux. Pas un tableau dans un tableau dans un tableau. En gros, pas de présentation par tableau. Un tableau sert à faire un tableau. Si tu es déjà dans ce cas-là, pas besoin d'enlever le <table>. Il faut juste régler son style avec le CSS.

Pour faire ce que tu essaies de faire, en fait (deux boîtes côte-à-côte de même hauteur avec hauteur dépendant du contenu ; et centrage vertical du texte sur la hauteur disponible,) on a bel et bien besoin du concept de tableau. Mais on est pas obligé de le faire avec <table>, on peut le faire avec du pur CSS.

Ansi, ces balises :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="photo-line">
  <img src="myphoto-1.jpg" alt="" />
  <p>Du texte à côté</p>
</div>

Peuvent être stylées avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.photo-line {
  display: table-row;
}
 
.photo-line img {
  display: table-cell;
}
 
.photo-line p {
  display: table-cell;
  vertical-align: middle;
}

L'intérêt étant de reporter la complexité de l'affichage sur les CSS, et aussi d'améliorer l'accessibilité (et la sémantique, ce qui semble être un combat perdu.)

**passager123** · 25/07/2011, 12h24

Voila ce que j'aimerai faire avec les balises <div>.
Sur cette image je l'ai fait sous forme de tableau.

**12monkeys** · 25/07/2011, 12h51

En effet je voyais également un truc plus compliqué... Ton image est toujours identique ? ainsi que ton texte ?

Si oui pour ça suffit de faire ça ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<h1>
  <img src="Wallpaper1.bmp" height="50" alt="" style="vertical-align:middle" />
  <span style="vertical-align:middle">Du texte</span>
</h1>
ou alors :
<img src="Wallpaper1.bmp" height="50" alt="" style="float:left" />
<h1 style="padding-top:6px;">Du texte</h1>

En externalisant les styles CSS bien sur...

**passager123** · 25/07/2011, 13h02

Oui l'image est toujours identique et le texte aussi.

Dans le CSS je met quoi pour que ça fonctionne avec les <div> ?

**12monkeys** · 25/07/2011, 13h06

Tout ce qui se trouve entre les balises style...

Mais si tu ne connais pas le CSS tu devrais lire ces tutoriels :
http://css.developpez.com/tutoriels/premiers-pas/
http://pbnaigeon.developpez.com/tuto...tions-de-base/

Et plus généralement : http://css.developpez.com/cours/ et http://css.developpez.com/faq/

Au passage : il ne faut pas utiliser des div à tout va ! Il faut utiliser les balises de manière sémantique. C'est à dire que les balises HTML ont un sens :

<hx> où x vaut de 1 à 6 : c'est une titre
<p> : c'est un paragraphe
<ul>, <ol> et <li> c'est une liste
etc...

Div et span sont des conteneur neutres, qui n'ont pas de sens sémantique, qui doivent donc être utilisés que dans des cas où aucune autre balise n'existe pour...

**passager123** · 25/07/2011, 13h12

D'accord en tous cas merci pour ton aide.

Mes je voulais remplacer mes tableau par des div car si tu remonte plus haut dans mon message j'ai des erreur lorsque je veux le valider avec W3C et je ne sais pas pourquoi ? tu pourrais me dire ce que je dois faire pour corriger ?

**12monkeys** · 25/07/2011, 13h24

Je pense qu'on est plusieurs à t'avoir déjà répondu, que ne comprends tu pas ?

Envoyé par 12monkeys

Bonjour

Soit tu passes à un doctype transitionnal, qui est plus permissif. Regarde dans la FAQ pour les détails.

Soit tu respecte les règles qui s'appliquent au doctype xhtml strict : tu as là 3 tutoriels à lire pour t'aider : http://xhtml.developpez.com/cours/#xhtml.

Si tu avais suivi mon lien tu serais tombé sur ce tutoriel : http://a-pellegrini.developpez.com/tutoriels/xhtml/ qui dit bien :

Différence entre les normes XHTML 1.0 :
- Strict : utilisation recommandée !
- Transitional : permet d'utiliser des balises "décoratives" comme <font>, ... qui je le rappelle sont généralement dépréciées en XHTML Strict.
- Frameset : utilisé quand la page contient une ou plusieurs frames.

Si tu veux garder le DOCTYPE Strict il faut que tu supprimes la plupart de ce qui est attribut height, align, bordercolor, etc... et le remplace par des styles CSS.

Ici en détail tous les attributs autorisés pour les différentes balises : http://giminik.developpez.com/xhtml/.