5438 sujets

Sémantique web et HTML

Bonjour,
j'ai une erreur du validateur sur une partie de code. C'est la dernière erreur de tout le site, et je n'arrive pas à la corriger. Si j'enlève la div du menu, tout est en l'air. Je ne vois pas comment faire pour que "li" ne soit plus l'enfant de la div du menu.
--------
Error: Element li not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 80, column 2; to line 80, column 5
enu"> ? ? <li><a hre
-------
Le html en question :
<nav class="nav">
	<div class="menu">	
	<li><a href="#">Jemb&eacute;s</a>
		<ul>
		 	<li><a href="Jembes.html">Jemb&eacute;s montage</a>
			<li><a href="Vulcain.html">Vulcain, presse &agrave; jemb&eacute;s</a>
		</ul>
                         <li><a href="#">Dununs construction</a>
		<ul>
			<li><a href="Jelidunun.html">Jelidunun</a>
			<li><a href="Dunun-PVC.html">Dunun PVC</a>			
		</ul>
		         <li><a href="Yabara.html">Yabara</a>
  			<li><a href="#">Divers</a>	
		<ul>	
			<li><a href="Avertissement.html">Avertissement</a>
			<li><a href="Faire-Soi-Meme.html">Faites le vous-m&ecirc;me !</a>			
		</ul>
		         <li><a href="index.html">Accueil</a></div>
</nav>

Le css concernant le nav :
.nav {
	position: -webkit-fixed; /* Pour Safari */
	position: fixed;  
	top: 0;
	right: 0;
	left: 0;
	opacity:1;
	text-align: center;
	color: #FFF;
	z-index: 9000;
	}

Une partie concernant le menu :
.menu, .menu ul {
padding: 0;
opacity: 1;
margin: 0;
list-style: none;
}
.menu li {
display: inline-block;
min-width: 20%;
height: 2.6em;
position: relative;
}
....../
Et le grid du nav :
.nav
	{-ms-grid-column: 1 ;
	grid-column: 1 ; 
  	-ms-grid-row: 1; 
  	grid-row: 1;}

Le site est en grid, mais ça n'a rien à voir avec l'erreur, je crois.
Merci de proposer une solution.
Modérateur
Salut,

Bah un <li> doit être enfant d'un <ul>... c'est le <li> qu'il faut que tu enlèves pas la div.

En plus tu ne ferme aucun de tes autres <li>...
Merci, mais je ne suis pas plus avancé.
Si je n'ai pas fermé les li, c'est parce que cette fermeture ne semble avoir aucune influence, sinon décaler un des items du menu vers le bas...
Et enlever tous les li, j'ai essayé, c'est la cata.
Il y a sans doute une misconception plus profonde à résoudre, mais je ne sais pas.
Hormis le validateur qui hurle, tout fonctionne bien.
Salut,

alors ton validateur peu hurler à chaque ligne ... mais dans ton cas cela semble être à la fin lorsque tu clôtures ton <li> pour un </div>

c'est ce que te dit ton validateur

Error: Element li not allowed as child of element div in this context. (Suppressing further errors from this subtree.)


Sinon, je fais une aparté.
Je ne sais pas si tu étudies le dev ou si c'est pour un usage bien précis, mais quoi qu'il en soit tu te dois de respecter les règles de codages, en HTML Une balise ouvrante doit être fermée c'est simple et cela évite tous les problèmes.

Si tu veux que ton menu fonctionne correctement, il te faudra coder proprement et de ne pas abuser d'une règle trop permissive.

Entre ça et l'indentation de ton code tu t'y retrouveras mieux et tu pourras voir directement les problèmes par la suite



<nav class="nav">
	<div class="menu">
        <ul>
            <li>
                <a href="#">Jemb&eacute;s</a>
            </li>
        </ul>

        <ul>
            <li>
                <a href="Jembes.html">Jemb&eacute;s montage</a>
            </li>
            <li>
                <a href="Vulcain.html">Vulcain, presse &agrave; jemb&eacute;s</a>
            </li>
            <li>
                <a href="#">Dununs construction</a>
            </li>
            <li>
                <a href="Jelidunun.html">Jelidunun</a>
            </li>
            <li>
                <a href="Dunun-PVC.html">Dunun PVC</a>
            </li>	
            <li>
                <a href="Yabara.html">Yabara</a>
            </li>
            <li>
                <a href="#">Divers</a>
            </li>	
        </ul>

        <ul>
            <li>
                <a href="Avertissement.html">Avertissement</a>
            </li>
            <li>
                <a href="Faire-Soi-Meme.html">Faites le vous-m&ecirc;me !</a>
            </li>
        </ul>

        <ul>
            <li>
                <a href="index.html">Accueil</a>
            </li>
        </ul>
    </div>
</nav>

Modifié par biduletruck (20 Jun 2020 - 12:59)
Modérateur
Salut,

Bongota a écrit :
Si je n'ai pas fermé les li, c'est parce que cette fermeture ne semble avoir aucune influence, sinon décaler un des items du menu vers le bas...

biduletruck l'a très bien résumé. Si tu t'attaches à résoudre les erreurs du validateur c'est que tu veux respecter les règles et c'es tres bien. Sauf que ce que tu viens de dire c'est tout sauf respecter les règles ! Smiley lol Si ca décale tout vers le bas c'est que tu dois revoir ton positionnement CSS avec ce nouveau DOM valide.

Bongota a écrit :
Et enlever tous les li, j'ai essayé, c'est la cata.

Je ne t'ai pas dit d'enlever TOUT les <li>. Seulement celui qui te déclenche l'erreur car il n'est pas dans un <ul> :
<nav class="nav">
	<div class="menu">	
	<li><a href="#">Jemb&eacute;s</a>
[...]


Bongota a écrit :
Il y a sans doute une misconception plus profonde à résoudre, mais je ne sais pas. Hormis le validateur qui hurle, tout fonctionne bien.

Ton navigateur rattrape tant bien que mal les erreurs. Inspecte le code de ton menu tu verra qu'il a lui même fermé les balise. Seulement compter sur ça est une erreur. Il peut y avoir des comportement très bizarre. Autant avoir un code valide dès le début.

biduletruck t'a parfaitement répondu.

Bonne aprem !
Merci à vous deux d'avoir passé quelque temps sur mon problème.
Effectivement, je vois sur l'inspecteur que le navigateur a ajouté toutes les balises manquantes. Et finalement, après correction et ajout de ces balises, le menu est très peu décalé, juste un item qui se met en dessous. Il y aura peu de css à modifier. Je suis par contre découragé parce qu'après correction et copie exacte de ce que montre l'inspecteur, le validateur trouve toujours l'erreur. Je ne teste pas en ligne, je mets le fichier html directement. J'espère qu'il n'y a pas de cache dans le validateur. C'est d'autant plus décourageant que grâce à ces tests, j'ai corrigé environ une dizaine d'erreurs, avec succès, sur ce site (et notamment des balises non fermées).
Je ne peux quand même pas passer des heures sur la validation d'un menu. Smiley decu
Modifié par Bongota (20 Jun 2020 - 17:06)
Bonjour,
même si un moment de découragement a pu apparaître, je ne suis pas du genre à abandonner.
Après avoir mis les balises li fermentes qui manquaient, l'erreur était toujours là.
J'ai remplacé <div class="menu> par <ul class="menu"> et j'ai fermé tout en bas par </ul>.
J'ai vu l'exemple <ul id="navigation"> sur alsacreations. En tous cas, le validateur ne signale plus l'erreur et le menu fonctionne. J'ai seulement ajusté la largeur en css pour remettre en ligne ce qui était passé au-dessous.
Je n'ai plus maintenant qu'une seule erreur, dont je vais pouvoir m'occuper :
-------
Error: Start tag body seen but an element of the same type was already open.
From line 195, column 1; to line 195, column 18
??</div>??<body id="anchor">??&nbs
Modérateur
Bongota a écrit :
Après avoir mis les balises li fermentes qui manquaient, l'erreur était toujours là.

Oui ça n'était qu'une des deux erreurs que nous t'avions souligné :
_laurent a écrit :
Bah un <li> doit être enfant d'un <ul>

_laurent a écrit :
Je ne t'ai pas dit d'enlever TOUT les <li>. Seulement celui qui te déclenche l'erreur car il n'est pas dans un <ul>

Bongota a écrit :
J'ai remplacé &lt;div class="menu&gt; par &lt;ul class="menu"&gt; et j'ai fermé tout en bas par &lt;/ul&gt;.
J'ai vu l'exemple &lt;ul id="navigation"&gt; sur alsacreations. En tous cas, le validateur ne signale plus l'erreur et le menu fonctionne. J'ai seulement ajusté la largeur en css pour remettre en ligne ce qui était passé au-dessous.

Oui du coup là c'est précisément ce qu'on te disait de corriger et qui déclenchait ton erreur Smiley lol

Bongota a écrit :
Je n'ai plus maintenant qu'une seule erreur, dont je vais pouvoir m'occuper :
-------
Error: Start tag body seen but an element of the same type was already open.
From line 195, column 1; to line 195, column 18
??&lt;/div&gt;??&lt;body id="anchor"&gt;??&amp;nbs

Et bien là encore c'est marqué en toute lettre et tu as même la partie du code qui bloque :
Start tag body seen but an element of the same type was already open

Il y a bien un element <body> mais il y a déjà un élément ouvert avant :
??</div>??<body id="anchor">??&nbs

ligne 195

Difficile de faire plus précis. Tout ton HTML toi etre dans une balise <body> unique. ici on voit bien qu'il y a une </div> avant le <body>. Smiley smile
Bonjour,
c'est déjà trouvé et corrigé, merci encore pour votre temps passé.
Vos réponses m'ont "boosté" et j'ai réussi parce que je suis tenace et je connais quand même un peu. Reconnaissons quand même que les phrases du validateur ne sont pas toujours explicites pour une personne non habituée à le manipuler toutes les semaines. Elles vous paraissent très claires, d'après ce que vous écrivez. C'est loin d'être le cas.
Aussi, à ce que je vois, un piège du validateur, c'est que quand il trouve une erreur en début de page, il ne va pas plus loin. Il le dit, d'ailleurs. Ce qui fait que quand on a enfin corrigé l'erreur, d'autres apparaissent. Il serait certainement plus constructif d'apprendre correctement toutes les base du html, afin de ne pas subir des messages d'erreur abscons. Ça, c'est la théorie et c'est bon pour ceux qui vont à l'école afin de devenir développeur. Pou nous amateurs, on procède d'une autre façon, on essaye, ça passe; ça passe pas, on revient en arrière. Il faut faire avec et ce forum est aussi là pour ça Smiley cligne