[W3C] Validation avec <span> pour afficher résultat Javascript

[Pierrick81]

Bonjour à tous,

Je suis (toujours) dans ma validation W3C, et j'arrive à un blocage.

J'ai la ligne suivante :

Code :

<span id="href_content9" ><li style="margin-top:5px;"><img src="../img/arrow.gif" alt="fleche"></li> <li><a href="javascript:void(0)" onClick='showNational(1)' ><h2><b>&nbsp;National&nbsp;</b></h2></a></li></span>

Et j'utilise la fonction Javascript suivante qui fait modifier le contenu du <span>

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
			function showNational(val,ville){
				var national_post_val=val;
				var new_class="show_national_only";
				if(national_post_val==1)
				{
					showVille(0,ville);
					setBodyClass(new_class);
					document.getElementById('href_content9').innerHTML='<li style="margin-top:5px;"><img src="../img/arrowc.gif"></li><li><div id="national" ><h2 class="current" style="color:#5A5756;">&nbsp;Deals Nationaux&nbsp;</h2></li>';
				}
				if(national_post_val==0)
				{
					removeBodyClass(new_class);					
					document.getElementById('href_content9').innerHTML='<li style="margin-top:5px;"><img src="../img/arrow.gif" alt="fleche"></li><li><a href="javascript:void(0)" id="national" onClick="showNational(1,\''+ ville +'\')" ><h2 style="color:#5A5756;">Deals Nationaux&nbsp;</h2></a></li>';
				}
			}

Conclusion, je ne vois pas comment organiser mon code différemment.

Et pourtant lorsque je valide j'ai les messages d'erreurs suivants concernant cette ligne uniquement :

Code :

document type does not allow element "SPAN" here; assuming missing "LI" start-tag

Puis 2 fois (car il y a 2 balises <li>)

Code :

document type does not allow element "LI" here

Puis

Code :

document type does not allow element "H2" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

J'imagine que les 2 premiers messages sont liés entre eux, et j'ai donc ce problème d'organisation du code pour que ça marche.
Et par contre pour le second message, je ne comprends rien. J'ai ce message un peu partout pour des DIV aussi, et je n'arrive pas à bien comprendre le but. Et je n'ai pas trouvé d'infos claires sur la correction de cette erreur.
J'image qu'il faut utiliser plutôt OBJECT, mais je ne vois pas du tout comment !

Merci de votre aide.

[jreaux62]

Bonjour,
1/ d'abord avant le premier <li>, il faut <ul>
et après le dernier </li>, il faut </ul>

2/ ensuite, remplace span par div, et ca ira mieux.

3/ il manque un / à la fin de la balise <img ... />

4/ onclick en minuscule

Code :

1
2
3
4
5
6
<div id="href_content9">
	<ul>
		<li style="margin-top:5px;"><img src="../img/arrow.gif" alt="fleche"/></li>
		<li><a href="javascript:void(0)" onclick="showNational(1);"><h2><b>&nbsp;National&nbsp;</b></h2></a></li>
	</ul>
</div>

[Pierrick81]

Merci Jreaux62 pour ces précisions.
En fait je n'ai pas été assez précis dans ma demande.
Les balises UL je les ai bien mises, mais à un autre endroit.
Voilà mon code dans son ensemble :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="menu"> 
	<?php 
		if($ville=='National')
		{
			echo '<h2><b>&nbsp;Deals Nationaux&nbsp;</b></h2>';
		}
		else 
		{
			echo '<li><h2 id="href_content10" ><b>&nbsp;Deals &agrave; '.$ville.'&nbsp;</b></h2></li>';
	?> 
			<span id="href_content9" >
					<li style="margin-top:5px;"><img src="../img/arrow.gif" alt="fleche"/></li> 
					<li><a href="javascript:void(0)" onclick='showNational(1)' ><h2><b>&nbsp;Deals Nationaux&nbsp;</b></h2></a></li>
			</span>
	<?php
		}
	?>								 
</ul>

Donc j'ai essayé en mettant DIV à la place de SPAN, mais le résutalt est le même. Car effectivement le UL n'est pas dans le DIV.
Autre point, tu me dis de mettre le / à la fin de la balsie <img> alors que le Valideur me dit le contraire. Comment cela s'explique ?
Merci d'avance pour ton aide.

[jreaux62]

Ben oui, si tu ne dis pas tout ...

... voyons ca ...

le plus simple :

Code :

1
2
			<li id="href_content9_1" style="margin-top:5px;"><img src="../img/arrow.gif" alt="fleche"/></li> 
			<li id="href_content9_2"><a href="javascript:void(0)" onclick='showNational(1)' ><h2><b>&nbsp;Deals Nationaux&nbsp;</b></h2></a></li>

-> et modifier le javascript en conséquence.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
				if(national_post_val==1)
				{
					showVille(0,ville);
					setBodyClass(new_class);
					document.getElementById('href_content9_1').innerHTML='<img src="../img/arrowc.gif" alt="" />';
					document.getElementById('href_content9_2').innerHTML='<h2 id="national" class="current" style="color:#5A5756;">&nbsp;Deals Nationaux&nbsp;</h2>';
				}
				if(national_post_val==0)
				{
					removeBodyClass(new_class);					
					document.getElementById('href_content9_1').innerHTML='<img src="../img/arrow.gif" alt="fleche" />';
					document.getElementById('href_content9_2').innerHTML='<h2><a style="color:#5A5756;" href="javascript:void(0)" id="national" onclick="showNational(1,\''+ ville +'\')" >Deals Nationaux&nbsp;</a></h2>';
				}

<div id="national"> (pas fermé ??)

ps : les erreurs de validation dépendent du <!DOCTYPE html ... (loose, transitional, strict, ...)

[Pierrick81]

umh umh... pas con !

J'utilise ça comme DOCTYPE :

Code :

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">

Je ne savais pas trop quoi utiliser, et j'ai trouver cela sur un autre site.

Mais c'est vrai que je trouvais bizarre qu'il me demande de supprimer mes "/" à la fin de toutes les balises uniques.

Quel DocType me conseilles-tu ?

Merci.

[jreaux62]

Tu as le choix !
-> Recommended Doctype Declarations to use in your Web document.
XHTML 1.0 - Strict ou Transitional.
- Comme son nom l'indique, "Transitional" est plus souple et tolérant.
- "Strict" ne laisse rien passer, même du code qui fonctionne encore (iframe, ...) mais n'est plus dans la norme.
Mais réussir pour la première fois à passer la validation en "Strict" est assez ... agréable !

Code :

1
2
<!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" dir="ltr">

[Bovino]

Personnellement, je recommande plutôt le doctype HTML5 :

Code :

<!DOCTYPE HTML>

[jreaux62]

Envoyé par Bovino

Personnellement, je recommande plutôt le doctype HTML5 :

Code :

<!DOCTYPE HTML>

C'est celui qui devrait mettre tout le monde d'accord (et éviter qu'on se prenne la tête).

Pour l'instant, la doc dit :

HTML 5 [NOT a standard yet] <!DOCTYPE HTML>

Pas encore, mais ca viendra.
ps : il est encore plus sévère que "Strict" !

@Pierrick81 : en passant directement de "loose" à <!DOCTYPE HTML>, tu n'as pas fini de pleurer !
L'objectif :

"This document was successfully checked as HTML5!"

[Pierrick81]

Ok.
J'avais effectivement commencé par du HTML5, avec le DOCTYPE :

Code :

<!DOCTYPE HTML>

Mais lorsque je passe ma page au Validateur.
Je connais : http://validator.w3.org

Il m'indique le message suivant :

Code :

1
2
3
Using experimental feature: HTML5 Conformance Checker.
 
The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.

puis

Code :

1
2
External Checker not available
Checking the Document Type of this document requires the help of an external tool which was either not enabled in this validator, or is currently unavailable. Check in the validator's system configuration that HTML5 Validator is enabled and functional.

Y a t il une autre adresse pour valider en HTML5 ?

Même si c'est vrai que c'est peut-être un peu ambitieux pour commencer...

[jreaux62]

Ce ne sont pas des messages d'erreur.

Cela prévient juste que c'est (pour l'instant) une "fonctionnalité expérimentale: HTML5 conformité Checker."

La doc dit bien :

HTML 5 [NOT a standard yet] <!DOCTYPE HTML>
"pas encore un standard"

http://validator.w3.org/ se mettra à jour progressivement tout seul. Donc, pas de soucis.

[Pierrick81]

Qu'est-ce que c'est si ce n'est pas un message d'erreur ?

Code :

 External Checker not available

avec une grosse croix rouge !

[jreaux62]

Tu as essayé avec une page "test.php" simple ? (le minimum de balises nécessaires)
Quel est ton code ?

[Bovino]

Envoyé par Pierrick81

Qu'est-ce que c'est si ce n'est pas un message d'erreur ?

Code :

 External Checker not available

avec une grosse croix rouge !

Ca peut tout simplement vouloir dire que tu essayes de valider une page locale en laissant croire au validateur qu'elle est en ligne (par exemple avec Web Developper quand tu vas sur "Outils > Valider HTML")

[Pierrick81]

non les pages sont bien en lignes, mais protégée par un htpassword. (ce qui ne pose pas de problème théoriquement)

En fait j'ai essayé avec une page plus simple et ça marche bien.

Mais pour page principale, il ne me met que les 2 messages indiqués, ainsi que la description suivante qui doit correspondre à des erreurs :

Code :

The error encountered was: :512: parser error : Premature end of data in tag a line 512 out using CSS instead of presentational elements and attributes.">Use CSS instea ^ :512: parser error : Premature end of data in tag message line 512 out using CSS instead of presentational elements and attributes.">Use CSS instea ^ :512: parser error : Premature end of data in tag error line 512 out using CSS instead of presentational elements and attributes.">Use CSS instea ^ :512: parser error : Premature end of data in tag messages line 2 out using CSS instead of presentational elements and attributes.">Use CSS instea ^

Ce qui doit signifier que je mets du style dans des balises alors qu'elles doivent toutes être en CSS.

Mais c'est étrange qu'il ne présente pas les erreurs de la même manière que sur une page simple.

[Bovino]

Envoyé par Pierrick81

protégée par un htpassword. (ce qui ne pose pas de problème théoriquement)

Il serait probablement temps de revoir la théorie
Comment veux-tu que le validateur accède à ta page ?

[Pierrick81]

Il me demande le log et le mdp, et tous les messages s'affichent.
Je fonctionne comme ça depuis le début de mes validations avec http://validator.w3.org