[Résolu] Les <ul> imbriqués, c'est pas W3C compliant ?

Les <ul> imbriqués, c'est pas W3C compliant ? [Résolu] - HTML/CSS - Programmation

Marsh Posté le 19-02-2006 à 20:16:13    

Un peu comme dans dans l'exemple de cette page :
http://www.dotclear.net/trac/wiki/ [...] sonnaliser
 
Mettre en place les liens dans une boite <ul> unique, avec des <ul> imbriqués :
 

<h2>Liens</h2>
<ul>
<li>DotClear</li>
 
    <ul>
    <li><a href="http://www.dotclear.net/download.html">Téléchargement</a></li>
    <li><a href="http://www.dotclear.net/forum/">Forum</a></li>
    <li><a href="http://dev.dotclear.net/trac/wiki/">Gestion du projet</a></li>
    </ul>
 
<li>Téléchargements</li>
 
    <ul>
    <li><a href="http://cvie.free.fr/Download/mult.zip">Thème multiple</a></li>
    <li><a href="http://fashion.hosmoz.net/share/df.tgz">Digital Fashion</a></li>
    </ul>
 
</ul>


 
Je voudrais utiliser des <ul> imbriqués pour former une hierarchie. Mon problème c'est que je n'arrive pas à faire valider cette imbrication avec aucun doctype. <ul> n'accepte pas de <ul>. Par contre le contraire est possible. Ainsi, on est obligé d'encadrer le nouveau <ul> par une séquence <li></li> de la liste supérieure. Ca rajoute une puce et ce n'est plus "cohérent".


Message édité par Master_Jul le 20-02-2006 à 09:14:14
Reply

Marsh Posté le 19-02-2006 à 20:16:13   

Reply

Marsh Posté le 19-02-2006 à 20:37:06    

Effectivement, Master_Jul, un <ul> imbriqué doit être contenu dans dans <li></li>.
 
Par contre, cela ne rajoute pas de puce. Cela garde une puce. Chaque ligne commence par une seule puce, pas par deux puces.
 
Si l'on ne veut pas de puce, il y a plusieurs techniques pour cela, dont une qui est d'utiliser <dl><dt>...</dt>... au lieu de <ul><li>...</li>....

Reply

Marsh Posté le 19-02-2006 à 20:40:13    

Edit: grilled  :D  
 
Tu peux essayer à l'aide des balises <dl> <dt> et <dd>, comme ça
 

<h2>Liens</h2>
<dl>
<dt>DotClear</dt>
<dd>
    <ul>
    <li><a href="http://www.dotclear.net/download.html">Téléchargement</a></li>
    <li><a href="http://www.dotclear.net/forum/">Forum</a></li>
    <li><a href="http://dev.dotclear.net/trac/wiki/">Gestion du projet</a></li>
    </ul>
</dd>
<dt>Téléchargements</dt>
<dd>
    <ul>
    <li><a href="http://cvie.free.fr/Download/mult.zip">Thème multiple</a></li>
    <li><a href="http://fashion.hosmoz.net/share/df.tgz">Digital Fashion</a></li>
    </ul>
</dd>
</dl>


 
ou tout simplement comme tu le disais, encadrer tes <ul> par des <li>, et éventuellement appliquer des styles différents à chaque <li>.


Message édité par Lund le 19-02-2006 à 20:42:26
Reply

Marsh Posté le 19-02-2006 à 21:14:24    

olivthill a écrit :

Effectivement, Master_Jul, un <ul> imbriqué doit être contenu dans dans <li></li>.
 
Par contre, cela ne rajoute pas de puce. Cela garde une puce. Chaque ligne commence par une seule puce, pas par deux puces.
 
Si l'on ne veut pas de puce, il y a plusieurs techniques pour cela, dont une qui est d'utiliser <dl><dt>...</dt>... au lieu de <ul><li>...</li>....


 
Pourtant si je fais ça :

 <ul>
    <li>DotClear</li>
    <li>
      <ul>
        <li>truc</li>
      </ul>
    </li>
  </ul>


 
J'ai bien 2 puces sur la ligne, sous Firefox et Opera.  
 
Je regarde pour les dd dt, merci à vous. :jap:
 
Edit :
Je viens de lire cette doc :
http://www.w3.org/TR/2002/WD-xhtml [...] -list.html
 
L'élément <nl> semble être pas mal pour faire des imbrications multiples mais c'est dans la doc xhtml2, je regarde si ça existe en xhtml1.1.
 
Edit 2 : Pas reconnu, c'était trop beau. :o
Edit 3 : De toute façon, c'est la même chose que pour les <ul> en fait, il faut mettre le suivant dans un <li> et je sais pas comment je me débrouille mais moi ça me fait 2 points. :/


Message édité par Master_Jul le 20-02-2006 à 09:08:05
Reply

Marsh Posté le 20-02-2006 à 00:42:02    

pis t'as deux 'edit 2 ' donc ca le fait pas en plus :o  
 
 
....
 
 
 
 
[:pingouino]
desole, je sors

Reply

Marsh Posté le 20-02-2006 à 09:00:50    

utilise la solution proposée par Lund qui est la meilleure

Reply

Marsh Posté le 20-02-2006 à 09:09:40    

gatsu35 a écrit :

utilise la solution proposée par Lund qui est la meilleure


 
Et si j'ai besoin d'imbriquer à 3 niveaux ?  :sweat:
 
Edit : Ah oui, ça marche bien. Merci.


Message édité par Master_Jul le 20-02-2006 à 09:14:59
Reply

Marsh Posté le 20-02-2006 à 09:48:11    

sinon voici un vrai exemple d'imbrication
les imbrications se comporte comme ceci :  
<bal>
<sousbal1>
<bal>
<sousbal1>
</sousbal1>
</bal>
</sousbal1>
</bal>
 
 

Code :
  1. <ul id="menu">
  2. <li><a href="#">lien</a></li>
  3. <li><a href="#">lien</a></li>
  4. <li><a href="#">lien</a></li>
  5. <li><a href="#">Truc a cliquer pour etendre</a>
  6.  <ul id="test">
  7.   <li><a href="#">lien</a></li>
  8.   <li><a href="#">infos 12</a>
  9.    <ul>
  10.     <li><a href="#">lien</a></li>
  11.     <li><a href="#">encore un sous menu</a>
  12.      <ul>
  13.       <li><a href="#">lien</a></li>
  14.       <li><a href="#">lien</a></li>
  15.       <li><a href="#">lien</a></li>
  16.      </ul>
  17.     </li>
  18.     <li><a href="#">lien</a></li>
  19.    </ul>
  20.   </li>
  21.   <li><a href="#">lien</a></li>
  22.  </ul>
  23. </li>
  24. <li><a href="#">lien</a></li>
  25. <li><a href="#">clic là aussi</a>
  26.  <ul>
  27.   <li><a href="#">lien</a></li>
  28.   <li><a href="#">lien</a></li>
  29.   <li><a href="#">lien</a></li>
  30.  </ul>
  31. </li>
  32. </ul>

Reply

Marsh Posté le 20-02-2006 à 10:47:20    

Ah en fait je comprend d'où vient mon erreur, c'était tout bête.
J'enchainais directement un <li><ul> sans mettre de texte entre, c'est pour cela que j'avais deux points alignés ! En fait il n'y avait pas de problème. Merci.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed