5568 sujets

Sémantique web et HTML

Erreur validation w3c

Bonsoir à tous,

Lorsque je teste mon design au validateur w3c, j'ai 27 erreurs ...
Pourtant il me semble pas que ce soit faux ce que j'ai écrit ...
Pour ceux qui voudrait bien m'aider, voici ce que j'ai sur la page :


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

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

<head>

<title>::: VotreSite.com :::</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />

</head>

 

<body> 

 

<div id="global">

 

<div id="header">

 

<div id="logo"></div>

<div id="menu_haut">

<a href="#"><span><div id="menu5" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>

Erreur à la colonne 176: type de document ne permet pas l'élément "div" ici; manque un de "object", "ins", "del", "map", "button" de l'étiquette de début (type #65)

<a href="#"><span><div id="menu1" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>

Erreur à la colonne 176: type de document ne permet pas l'élément "div" ici; manque un de "object", "ins", "del", "map", "button" de l'étiquette de début (type #65)

<a href="#"><span><div id="menu2" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>

Erreur à la colonne 176: type de document ne permet pas l'élément "div" ici; manque un de "object", "ins", "del", "map", "button" de l'étiquette de début (type #65)

<a href="#"><span><div id="menu3" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>

Erreur à la colonne 176: type de document ne permet pas l'élément "div" ici; manque un de "object", "ins", "del", "map", "button" de l'étiquette de début (type #65)

<a href="#"><span><div id="menu4" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>

Erreur à la colonne 176: type de document ne permet pas l'élément "div" ici; manque un de "object", "ins", "del", "map", "button" de l'étiquette de début (type #65)

</div>

 

</div>

 

<div id="barre_bleu"></div>

<div id="espace_membre"></div>

<div id="hachures"></div>

<center><div id="pub"><img src="images/ban.gif" border="0" alt="Publicité du site" /></div></center>

Erreur à la colonne 7: élément "center" indéfini (type #76)

Erreur à la colonne 55: il n'y a pas d'attribut "border" (type #108)

 

<div id="haut_body"></div>

 

<div id="catalogue">

<center>

Erreur à la colonne 7: élément "center" indéfini (type #76)

<table width='552' height='42' border="0" cellpadding="0" cellspacing="0">

Erreur à la colonne 26: il n'y a pas d'attribut "height" (type #108)

<tr>

 

<td width='174' height='42' onmouseover="this.className='titre1_ie';" onmouseout="this.className='titre1';" class="titre1" >

Erreur à la colonne 12: il n'y a pas d'attribut "width" (type #108)

Erreur à la colonne 25: il n'y a pas d'attribut "height" (type #108)

<a href="#">

<center><font size="1"><br></font><b>Enchères en cours</center></b>

Erreur à la colonne 9: élément "center" indéfini (type #76)

Erreur à la colonne 21: il n'y a pas d'attribut "size" (type #108)

Erreur à la colonne 24: élément "font" indéfini (type #76)

Erreur à la colonne 35: fin d'étiquette pour "br" omise mais OMITTAG NO était spécifié (type #70)

Erreur à la colonne 64: fin d'étiquette pour "b" omise mais OMITTAG NO était spécifié (type #70)

Erreur à la colonne 68: fin d'étiquette pour l'élément "b" lequel n'est pas ouvert (type #79)

</a>

</td>

<td width="15"></td>

<td width="174" height="42" onmouseover="this.className='titre2_ie';" onmouseout="this.className='titre2';" class="titre2">

<a href="#">

<center><font size="1"><br></font><b>Enchères</center></b>

Erreur à la colonne 9: élément "center" indéfini (type #76)

Erreur à la colonne 24: élément "font" indéfini (type #76)

Erreur à la colonne 35: fin d'étiquette pour "br" omise mais OMITTAG NO était spécifié (type #70)

Erreur à la colonne 55: fin d'étiquette pour "b" omise mais OMITTAG NO était spécifié (type #70)

Erreur à la colonne 59: fin d'étiquette pour l'élément "b" lequel n'est pas ouvert (type #79)

</a>

</td>

<td width="15"></td>

<td width="174" height="42" onmouseover="this.className='titre3_ie';" onmouseout="this.className='titre3';" class="titre3">

<a href="#">

<center><font size="1"><br></font><b>Enchères</center></b>

Erreur à la colonne 9: élément "center" indéfini (type #76)

Erreur à la colonne 24: élément "font" indéfini (type #76)

Erreur à la colonne 35: fin d'étiquette pour "br" omise mais OMITTAG NO était spécifié (type #70)

Erreur à la colonne 55: fin d'étiquette pour "b" omise mais OMITTAG NO était spécifié (type #70)

Erreur à la colonne 59: fin d'étiquette pour l'élément "b" lequel n'est pas ouvert (type #79)

</a>

</td>

</tr>

</table>

</center>

</div>

<div id="bg">

 

 

</div>

 

<div id="navigation"></div>

<div id="bas"></div>

<div id="footer"></div>

</div>

</body>

</html>

Merci à tous pour votre aide
Modifié par SliBarT (15 Feb 2009 - 19:02)
Bonsoir,

En xHTML 1.0 Strict, les balises <center> et <font> sont interdites.

Et tu met des div dans des span, quel intérêt ?

Dans ton table, il y a des balises non fermées.
Salut,

Avant tout, merci pour ton aide.
Si j'ai mis des div dans des span c'est parce que j'ai vu que si je voulais mettre un lien autour d'un div, il fallait faire un "block" et du coup il fallait rajouter un span (qui dans le css contien display:block;)
Si <center> et <font> sont interdites, quel balises puis-je utiliser à la place ?
Comment corriger les autres problèmes ?

Merci
SliBarT, attention à ne pas créer de doublon sur le forum.

Comme je supprime le jumeau de ce sujet, je consigne ici les réponses qui y ont été apportées:

Patidou a écrit :
En bref tu as des éléments indéfinis qui n'existent pas dans le doctype choisi, des éléments qui ne peuvent pas se trouver dans d'autres éléments et des élements qui sont ouverts et pas fermés (ou l'inverse).


SliBarT a écrit :
Salut,
Merci pour ton aide,
Mais j'arrive pas à comprendre ce qu'il va pas dans ce code :


<a href="#"><span><div id="menu5" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>


Erreur à la colonne 176: type de document ne permet pas l'élément "div" ici; manque un de "object", "ins", "del", "map", "button" de l'étiquette de début (type #65)


Au dessus c'est l'erreur affiché relative à cette ligne de code.
Merci,


Et à propos de cette dernière réponse: ce qui ne va pas, c'est que tu places un élément de niveau bloc (DIV) à l'intérieur d'un élément de niveau texte (A). C'est impossible en HTML, et même si les navigateurs arrivent parfois à s'accommoder de cette erreur il n'est pas conseillé de la conserver.
Ah ok mais voila :

<a href="#"><span><div id="menu5" onmouseover="this.style.backgroundImage='url(images/menu_haut_apres.png)'" onmouseout="this.style.backgroundImage='url(images/menu_haut.png)'"></div></span></a>

Ce que je voulais faire c'est faire un div qui lorsque on clique sur l'image de background associé au div, cela m'amène vers un lien ...
Or j'ai vu sur un forum que pour pouvoir être autorisé à faire sa, il suffisait juste de transformer le div en display:block afin de dire que ce n'est plus un élément de bloc mais bien un élément de texte.
Comment faire alors si je veux pouvoir mettre un lien sur le div ?
Merci
SliBarT a écrit :
Or j'ai vu sur un forum que pour pouvoir être autorisé à faire sa, il suffisait juste de transformer le div en display:block afin de dire que ce n'est plus un élément de bloc mais bien un élément de texte.

Ouais euh non pas du tout rien à voir.

Tu ne peux pas, en HTML, mettre un DIV dans un A. Quoi que tu fasses en CSS derrière (ce dont la validation HTML se fout pas mal, tu l'imagines). Ce que tu peux faire, c'est utiliser un lien, et formater ce lien en CSS pour lui donner l'apparence d'un bloc. C'est donc le A qui devra être en display: block (quant au DIV, il faut le virer sans autre forme de procès).

Ah oui, et utiliser JavaScript pour modifier une image de fond CSS c'est pas super utile, autant utiliser la pseudo-classe :hover en CSS. Smiley cligne

Et pour finir: dans ton exemple de code, ton lien est VIDE, car il n'y a aucun intitulé textuel pour ce lien. Il n'y a pas de texte?
Salut,

Merci pour ta réponse.
En effet, le lien est vide car j'écrit rien dedans (l'écriture est sur l'image).
J'ai essayé hover pour faire changer le fond mais j'ai pas réussi à le faire marcher avec IE et Firefox ...
Disons que sa marche pas parce que il n'y a pas de texte ni d'image dans le div, en fait le div est vide et il contient que son background, sa marchera quand même le hover ?
Merci pour votre aide
SliBarT a écrit :
En effet, le lien est vide car j'écrit rien dedans (l'écriture est sur l'image).

Vive l'accessibilité du dispositif, alors. L'intitulé sera inexistant si l'image ne se charge pas (ça arrive), si l'utilisateur désactive les images (ça arrive aussi), si l'utilisateur est... malvoyant ou nonvoyant (et oui, les aveugles surfent sur le Web). À noter que parmi les utilisateurs aveugles de ton site, il y a tous les robots d'indexation des moteurs de recherche, qui se servent de l'intitulé (réel, textuel) des liens lors de l'indexation.

Il faut un intitulé textuel. Deux solutions:
1. Soit tu peux avoir ton texte en HTML, stylé en CSS, et une image de fond derrière (et au survol du lien, tu fais changer les styles du texte et/ou l'image de fond).
2. Soit le rendu de ton texte ne peut pas être obtenu en CSS (typo personnalisée, effets d'ombrage ou autres traitements graphiques), et dans ce cas tu places l'image dans le code HTML (élément IMG) et places un texte alternatif avec l'attribut alt. L'effet au survol se gèrera alors en JavaScript, en remplaçant l'image, un peu comme tu le fais actuellement mais en modifiant l'attribut src de l'image.

SliBarT a écrit :
J'ai essayé hover pour faire changer le fond mais j'ai pas réussi à le faire marcher avec IE et Firefox ...

Sur Papy IE6, ça ne marche que sur les liens. Sur IE7 et IE8, ça marchera sur tout élément (comme dans Firefox, Safari, Opera, Chrome, etc.).
Salut,

Merci pour cette belle réponse ^^
J'avoue que j'avais pas pensé à tous ça lorsque j'ai fait le design !
Je vais prendre le choix 1 en essayant de bien caller le texte.
Parce que le problème avec ceci :
-Comment faire si le texte écrit est pas bien centré (que ce soit en hauteur ou en largeur) ? Vous avez une solution ? Parce que lorsque je rentre le texte, il se met pas bien où il faut Smiley smile

Merci pour l'aide que vous m'avez déjà apporté
Sujet clos
Aller à