[Résolu] Validation W3C refusée

Bonjour à toutes et tous,

Je veux afficher le plan d'un site avec le code html ci-dessous :

<div id="plan_CR">
<div style="text-align: center"><b>Plan de ce compte rendu.</b></div>
<ul>
<li>1 - Un peu de géographie</li>
<li>2 - Préparation du séjour.</li>
<li>3 - Le programme du séjour.</li>
<ul>
<li>3.1 - Communication de notre programme.</li>
<li>3.2 - Modifications de programme.</li>
<li>3.3 - Notre Guide-Accompagnateur.</li>
<li>3.4 - Un étrange intrus ....</li>
</ul>
<li>4 - Déroulement du séjour.</li>
<ul>
<li>4.1 - Notre planning des deux journées de déplacements-activités.</li>
<li>4.2 - L'arrivée le 5 septembre 2014 à l'Hôtel La Clé des Champs.</li>
<li>4.3 - L'apéritif d'accueil et le repas du soir.</li>
<li>4.4 - Localisation et comptes rendus des activités prévues.</li>
<li>4.5 - La dernière soirée le 7 septembre 2015 au soir.</li>
</ul>
<li>5 - Le bilan.</li>
<ul>
<li>5.1 - Le positif.</li>
<li>5.1 - Le passable.</li>
<li>5.1 - Le regrettable.</li>
</ul>
<li>6 - Epilogue.</li>
<ul>
<li>6.1 - Conclusion.</li>
<li>6.2 - Propositions.</li>
</ul>
<li>7 - Cerise sur le gateau, l'indispensable photo de groupe.</li>
</ul>
</div>

La feuille de style contient :

#plan_CR {
border: 1px solid;
margin-left: 130px!Important; /* Pour FF */
margin-right: 130px!Important; /* Pour FF */
margin-left: 10px; /* Pour FF */
margin-right: 10px; /* Pour FF */
margin-top : 50px;
padding-top: 25px; padding-right: 5px; padding-bottom: 5px;padding-left: 15px;
list-style-type:none;
}

#plan_R ul{
list-style-type:none;
}

#plan_CR li{
list-style-type:none;
font-style: italic;
}


Cela fonctionne très bien ... mais le W3C refuse de valider en m'indiquant :

Error Line 37, Column 7: document type does not allow element "UL" here; assuming missing "LI" start-tag

<ul>

c'est à dire sur le premier (et les suivants) <ul> du code html

Quelqu'un pourrait-il svp m'indiquer la modification à effectuer pour obtenir le "OK" du W3C, je ne sais plus quoi faire après avoir tenté x corrections toutes inefficaces :o(

Adresse du site :
http://www.cyranorion.eu/eta/grenoble_2014/liste.html
OS : W7 Edition Familiale Premium
Navigateur FireFox 35.0.1

Merci de m'avoir lu.
Cordialement,
Jean Le Brun
--
Modifié par CyranOrion (16 Feb 2015 - 13:55)

Salut,

CyranOrion a écrit :
Ta phrase "les enfants de li doivent être en son sein" est trop sibylline pour ma pratique de débutant :o(

C'est aussi simple qu'un arbre généalogique :

<!-- L'élément ul ci-après est parent direct des éléments li qui sont ses enfants directs, et ancêtre de l'élément ul imbriqué et des enfants directs de ce dernier. -->
<ul>
  <li>Je suis enfant direct de l'élément ul.</li>
  <li>Je suis enfant direct de l'élément ul et frère de l'élément li précédent.
    <!-- L'élément ul imbriqué ci-après est enfant direct de l'élément li dans lequel il est imbriqué (et donc descendant de l'élément ul de premier niveau), et donc parent direct des éléments li qui sont ses enfants directs. -->
    <ul>
      <li>Je suis enfant direct de l'élément ul qui est enfant direct d'un élément li (et donc descendant de l'élément ul de premier niveau).</li>
      <li>Je suis enfant direct de l'élément ul qui est enfant direct d'un élément li (et donc descendant de l'élément ul de premier niveau), et aussi frère de l'élément li précédent.</li>
    </ul>
  </li>
</ul>

Autrement dit, l'arborescence donne quelque chose comme ceci :

- ul (parent)
| - li (enfant)

| - li (parent)
| | - ul (enfant)
| | | - li (descendant)

| - li (frère)
| - li (frère)

J'espère que c'est plus clair pour toi, à présent.

Pour le reste :

<!-- Code invalide -->
<ul>
  <li></li>
  <li></li>
  <ul>
    <li></li>
    <li></li>
  </ul>
</ul>

<!-- Code valide -->
<ul>
  <li></li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

Bonjour Victor,
Merci pour ta réponse.

Victor BRITO a écrit :


C'est aussi simple qu'un arbre généalogique :
J'espère que c'est plus clair pour toi, à présent.

C'est assurément devenu limpide. Il me suffisait de comprendre que non seulement les <li> étaient enfant direct des <ul> précédents mais que les <ul> suivants (imbriqués) l'étaient aussi des <li> qui les précèdent.

Comme j'ignorais çà et ... que j'avais pompé ce code ... et qu'il affichait ce que je voulais ... et que le W3C n'en voulait pas .... j'étais comme un gland !!! Honte à moi

Un grand merci pour avoir corrigé "mon" code mais surtout, par tes explications lumineuses, de m'avoir fait faire un grand pas dans ma connaissance très parcellaire et bidouilleuse du html.

Très cordialement,
Jean Le Brun
--