[Racine des codes] [Page précédente]

listes imbriquees

/Html JavaSript/html/listes imbriquees.html
<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Listes imbriquées html</title>
<meta name="description" content="Listes imbriquées html valide" />
<meta name="keywords" content="liste imbriquées, html, standard" />
<style type="text/css">
li {border:1px dashed gray;}
li li {border:1px dashed blue;}
li li li {border:1px dashed red;}
</style>
</head>
<body>

  <h1>Listes imbriquées html valide</h1>

  <h3>Règle :</h3>
  <p>Une sous liste doit-être <em>dans</em> un tag &lt;li&gt; de sa liste mère (à la suite du "titre" de cette sous-liste en général)
  </p>


  <pre>
  (...)
  <span style="color:blue">&lt;li&gt;</span>Titre sous-liste (ce &lt;li&gt; est un élément de liste-mère)
    &lt;ul&gt;
      <span style="color:red">&lt;li&gt;</span>élément 1 de sous-liste<span style="color:red">&lt;/li&gt;</span>
      (...)
      <span style="color:red">&lt;li&gt;</span>élément X de sous-liste<span style="color:red">&lt;/li&gt;</span>
    &lt;/ul&gt;
  <span style="color:blue">&lt;/li&gt;</span>
  (...)
  </pre>


  <h3>Exemple :</h3>
  <ul class="facturette">
    <li>GEROUDET
    <ul class="ticket">
      <li>13688
      <ul class="ligne">
        <li>+ 30,00</li>
      </ul>
      <ul class="paiement">
        <li>= 30,00</li>
      </ul>
      </li>
    </ul>
    </li>
    <li>DE CHABANNES
    <ul class="ticket">
      <li>13713
      <ul class="ligne">
        <li>+ 495,00</li>
      </ul>
      <ul class="paiement">
        <li>= 495,00</li>
      </ul>
      </li>
      <li>13661
      <ul class="paiement">
        <li>= 247,00</li>
      </ul>
      </li>
      <li>13684
      <ul class="paiement">
        <li>= 495,00</li>
      </ul>
      </li>
      <li>13727
      <ul class="ligne">
        <li>+ 70,00</li>
        <li>+ 425,00</li>
      </ul>
      <ul class="paiement">
        <li>= 495,00</li>
      </ul>
      </li>
    </ul>
    </li>
  </ul>

</body>
</html>
[edit]