[W3C] Problème de validation W3C

**killermano** · 19/03/2009, 08h44

Bonjour,
Je viens d'essayer de tester une de mes pages à cette adresse http://validator.w3.org/
Et je suis assez étonné par le nombre d'erreur que me renvois le validateur W3C.
96 en tout que je n'arrives absolument pas à comprendre. Donc si quelqu'un a des explications concernant ce système de validation car là je suis largué.

Je vous invite a tester le code ci dessous à cette url : http://validator.w3.org/#validate_by_input

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
<script type='text/javascript' src='js/jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='js/menu.js'></script><!-- Menu déroulant -->
<script type='text/javascript' src='js/thickbox.js'></script><!-- Affichage pourquois s'inscrire -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> 
<script type="text/javascript" src="js/jquery.accessible-news-slider.js"></script><!-- Slideviewer pour les nouvelles parrutions -->
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script><!-- Tabs accueil chroniques/thématiques et wallpapers/artworks -->
 
<!-- 5 Derniers articles -->
<script type="text/javascript"> 
        $(function() {  
                $( "#example_1" ).accessNews({
                speed : "normal",
                        slideBy : 1
            });                 
        });     
</script>
<!-- END -->
 
</head>
<body>
<!-- Menu général du site -->
<div>
MON MENU :
<a href="index.php?page=news">News</a>
<a href="index.php?page=articles">Articles</a>
<a href="index.php?page=forums">Forums</a>
 
<a href="index.php?page=medias">Medias</a><br /><br /><br />
</div><br />
 
<div class="top_menu">
<table class="top_membre">
  <tr>
    <td width="225" class="top_membre">
    <!-- Partie membre top page -->    
    <img src="pictures/design/marron/invite.jpg" alt="invité" align="left" />Bienvenue invit&eacute;<br /><a href="index.php?page=login">Connection</a> |<a href="index.php?page=inscription">Inscription</a><a href="pourquois_sinscrire.php?height=300&width=300" title="Pourquois s'inscrire" class="thickbox">?</a>             
    </td>
 
    <td width="411" class="top_membre2">    
    </td>
    <td width="162" class="ban_top"></td>
  </tr>
</table>
</div>
<!-- Bannière -->
<div class="banniere"></div>
<!-- Définittion du contenue des parties du menu déroulant -->
<div class="menu">
<ul id="nav">
    <li><a href="#">&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />News</a></li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Articles</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Tests</a></li>
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Previews</a></li>
 
	<li><a href="#"><img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Solutions</a>
        <ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Game Boy Advance</a><li>
 
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Playstation</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Playstation 2</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Dreamcast</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />GameCube</a><br /><li>			
        </ul>
	</li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Médias</a>
 
		<ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Screenshots</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Wallpapers</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Artworks</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />OST</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Vidéo</a><li>			
        </ul>
 
	</li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Encyclopédie</a></li>
 
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Divers</a>
		<ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Staff</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Historique</a><li>
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Contact</a><li>
 
			<li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Disclamer</a><li>		
        </ul>
	</li>
 
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Radio</a></li>
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Forum</a></li>	
    </ul>
    </li>
</ul>
</div>
 
<div class="contenu">
<!-- Selection des liens par GET permettant l'affichage des pages -->
forum<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

En espérant trouver quelques explications.
Le validateur me renvoie des erreur surtout sur mes <li><ul> et vers la fin sur ma balise de fermeture </html>.
Merci beaucoup à tout ce qui s'interesserons un peu à ce cas "peut être" particulié ?
@+

**mdr_cedrick** · 19/03/2009, 09h02

si j'y vais un peu dans l'ordre :
_ remplace tous les & de tes liens par &
_ la ligne du game boy advance commence par <li> et finie par <li> au lieu de </li>
_ idem pour screenshots, wallpapers, etc.

corrige déjà ça et tu va réduire considérablement les erreurs

**killermano** · 19/03/2009, 09h26

Waouh effectivemlent. Ca me vire 90 erreur environt. J'ai un peu envie de me mettre des claques là. Merci beaucoup.

Donc ils me restent encore quelques erreurs dont certaines dont je connais la provenance. Je spécifie certains attribut tel que width et height directement dans le code, il faut que je le mette dans le CSS, celà devrait régler ces quelques erreurs.

En revanche, il y en a trois que je ne comprend pas :
Line 96, Column 9: XML Parsing Error: Opening and ending tag mismatch: div line 54 and li . </li>

Line 97, Column 5: XML Parsing Error: Opening and ending tag mismatch: body line 26 and ul .</ul>

Line 98, Column 6: XML Parsing Error: Opening and ending tag mismatch: html line 3 and div .</div>

Ce sont les trois dernières lignes du codes. J'ai bien compté les élements div et ul et il y a autant de <div> que de </div> et de <ul> que de </ul>.
Je dois encore me tromper je penses.

Voici le code actuel :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" />
<script type='text/javascript' src='js/jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='js/menu.js'></script><!-- Menu déroulant -->
<script type='text/javascript' src='js/thickbox.js'></script><!-- Affichage pourquois s'inscrire -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> 
<script type="text/javascript" src="js/jquery.accessible-news-slider.js"></script><!-- Slideviewer pour les nouvelles parrutions -->
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script><!-- Tabs accueil chroniques/thématiques et wallpapers/artworks -->
 
<!-- 5 Derniers articles -->
<script language="javascript" type="text/javascript">   
        $(function() {  
                $( "#example_1" ).accessNews({
                speed : "normal",
                        slideBy : 1
            });                 
        });     
</script>
<!-- END -->
 
</head>
<body>
<!-- Menu général du site -->
<div>
MON MENU :
<a href="index.php?page=news">News</a>
<a href="index.php?page=articles">Articles</a>
<a href="index.php?page=forums">Forums</a>
 
<a href="index.php?page=medias">Medias</a><br /><br /><br />
</div><br />
 
<div class="top_menu">
<table class="top_membre">
  <tr>
    <td width="225" class="top_membre">
    <!-- Partie membre top page -->    
    <img src="pictures/design/marron/invite.jpg" alt="invité" align="left" />Bienvenue invit&eacute;<br /><a href="index.php?page=login">Connection</a> |<a href="index.php?page=inscription">Inscription</a><a href="pourquois_sinscrire.php?height=300&width=300" title="Pourquois s'inscrire" class="thickbox">?</a>             
    </td>
 
    <td width="411" class="top_membre2">    
    </td>
    <td width="162" class="ban_top"></td>
  </tr>
</table>
</div>
<!-- Bannière -->
<div class="banniere"></div>
<!-- Définittion du contenue des parties du menu déroulant -->
<div class="menu">
<ul id="nav">
    <li><a href="#">&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />News</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Articles</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Tests</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Previews</a></li>	
    <li><a href="#"><img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Solutions</a>
        <ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Game Boy Advance</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Playstation</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Playstation 2</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Dreamcast</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />GameCube</a><br />
            </li>			
        </ul>
     </li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Médias</a>
        <ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Screenshots</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Wallpapers</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Artworks</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />OST</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Vidéo</a>
            </li>			
        </ul>
    </li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Encyclopédie</a></li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Divers</a>
	<ul>
           <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Staff</a></li>
	   <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Historique</a></li>
	   <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Contact</a></li>
	   <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Disclamer</a></li>		
        </ul>
     </li>
 
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Radio</a></li>
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Forum</a></li>	
    </ul>
    </li>
</ul>
</div>
 
<div class="contenu">
<!-- Selection des liens par GET permettant l'affichage des pages -->
forum<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>

Merci bien

**mdr_cedrick** · 19/03/2009, 09h41

le problème n'est pas leur nombre mais la position qu'ils ont.

Code :

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

1
2
3
4
<!-- incorrect -->
<div><ul><li><a>...</a></div></ul></li>
<!-- correct -->
<div><ul><li><a>...</a></li></ul></div>

**Poulpynette** · 19/03/2009, 09h41

Peut-être aussi : les valeurs des attributs entre double quotes

(juste sur les premières balises <script>)

**killermano** · 19/03/2009, 09h52

Bon, je viens de régler le problème. Merci pour vos conseil

Le soucis venait d'ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<div class="menu">
<ul id="nav">
    <li><a href="#">&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />News</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Articles</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Tests</a></li>
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Previews</a></li>	
    <li><a href="#"><img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Solutions</a>
        <ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Game Boy Advance</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Playstation</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Playstation 2</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Dreamcast</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />GameCube</a><br />
            </li>			
        </ul>
     </li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Médias</a>
        <ul>
            <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Screenshots</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Wallpapers</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Artworks</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />OST</a></li>
	    <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Vidéo</a>
            </li>			
        </ul>
    </li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Encyclopédie</a></li>
 
    <li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Divers</a>
	<ul>
           <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Staff</a></li>
	   <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Historique</a></li>
	   <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Contact</a></li>
	   <li><a href="#"><img src="pictures/design/marron/puce_triangle.gif" class="puce" alt="Puce" />Disclamer</a></li>		
        </ul>
     </li>
 
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Radio</a></li>
	<li><a href="#">&nbsp;&nbsp;<img src="pictures/design/marron/puce_carre.gif" class="puce" alt="Puce" />Forum</a></li>	
    </ul>
    </li>
</ul>
</div>

Incorrect
</ul>
</li>
</ul>
</div>

Correct
</ul>
</div>

Voilà, il ne me manque plus qu'a spécifier mes width et height dans le CSS et ça devrait être valide.

Merci encore

[W3C] Problème de validation W3C

HTML

Vue hybride

Discussions similaires

Partager

Partager