Discussion :

[motenai]

Bonsoir tout le monde,

Je suis en train de coder mon premier site en HTML5 et accessoirement, je vérifie de temps en temps que le code est valide selon les normes W3C.

Lors de ma dernière validation, le validateur m'indique que je n'ai pas le droit de superposer des balises <ul> dans d'autres balises <ul>...

Voici le bout de code incriminé (menu déroulant de langue en html et css uniquement) :

Code :

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

1
2
3
4
5
6
7
8
<nav id="language">
<ul>
<li>Langue ⇓</li>
<ul>
<li><a href="index.php?lang=en" id="en">anglais</a></li>
</ul>
</ul>
</nav>

Je ne vois pas réellement en quoi c'est un problème pour le validateur cette superposition de <ul>...

Quelqu'un aurait une avis sur la question ? Et sinon, est-ce que vous auriez une autre variante en tête qui puisse me permettre de garder mon menu de choix de langue en pure html5/css ???

Merci et bonne soirée

Marco

[thelvin]

Code :

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

1
2
3
4
5
6
<ul>
<li>Langue ⇓
<ul>
  <li><a href="index.php?lang=en" id="en">anglais</a></li>
</ul></li>
</ul>

Dans ton cas précis, c'est plus logique comme ça... Il y en a d'autres où c'est pas logique du tout, par contre. Mais bon.

[motenai]

Merci pour ta réponse thelvin !

J'avais déjà pensé à cette solution mais elle m'obligeait à revoir un peu, trop à mon goût, mon CSS pour que le menu fonctionne correctement...

Je vais attendre jusqu'à demain pour voir si il y a d'autres réponses qui arrivent, sinon, je clôturerai le sujet... On ne va quand même pas faire 15 ans sur un truc aussi bidon

Merci

Marco

[thelvin]

Dans ce cas :

Code :

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

1
2
3
4
5
6
<ul>
<li>Langue ⇓</li>
<li><ul>
  <li><a href="index.php?lang=en" id="en">anglais</a></li>
</ul></li>
</ul>

Sémantiquement c'est moins bon, mais voilà.

[motenai]

Merci encore thelvin ! T'es chaud ce soir

Finalement, après un ou deux petit test en local et ensuite sur le validateur, j'ai choisi ta première solution.

Elle fonctionne nickel et surtout (flemme quand tu nous tiens) je n'ai même pas eu à retoucher mon code CSS. Donc j'achète !

Merci encore et bonne soirée