[Résolu] Imbrication de DL / indentation du code avec PRE

Bonjour,
Je relance le sujet nébuleux des listes de définitions en XHTML.
Je ne suis pas un expert en DTD XML, mais il me semble que la balise <DD> accepte les listes de définitions, bref l'imbrication comme une liste à puce.
Est-il donc possible (et en prenant quelques libertés sémantiques) de faire ceci :

<dl>
 <dt>Titre menu</dt>
 <dd>Item 1</dd>
 <dd>
   <dl>
     <dt>Titre sous menu</dt>
     <dd>Item 2</dd>
   </dl>
 </dd>
 <dd>Item 3</dd>
</dl>

Merci
Modifié par zwip (19 Feb 2005 - 13:34)

Salut et bienvenue ici.

Comme c'est ton premier post, je te suggère de lire les Règles du forum qui t'inviteront à baliser correctement les codes que tu soumets, à l'aide des boutons [ CODE] (tu peux donc éditer ton premier post, si tu le veux bien )

Pour commencer à répondre à ta question : as-tu testé de valider ton code ? Que dit le validateur ?

EDIT : Après quelques recherches...

a écrit :
DD may contain block-level elements such as P, H2, TABLE, and DL. This allows definition lists to be nested, as in the following example:

http://htmlhelp.com/reference/html40/lists/dd.html
Modifié par Raphael (12 Feb 2005 - 18:38)

Dommage que le [ CODE] n'agit pas comme un

<PRE>

afin de voir l'indentation de la source et qu'il n'existe pas d'équivalent à

<SAMP>

, ce qui éviterait que ma phrase soit hachée...

En tout cas bravo pour l'efficacité, j'ai recherché une page similaire au moins pendant 20mn : sans résultat.

Non, je n'ai pas testé, c'était justement avant de faire analyser mon code au validateur du W3C, mais je le fais après ce post.

C'était aussi une réflexion sur les exemples de menus proposés sur ce site, où des listes de définitions sont imbriquées dans des listes à puces.
Modifié par zwip (12 Feb 2005 - 18:59)

zwip a écrit :
Dommage que le [ CODE] n'agit pas comme un

<PRE>

afin de voir l'indentation de la source et qu'il n'existe pas d'équivalent à

<SAMP>

, ce qui éviterait que ma phrase soit hachée...

Hé hé, c'est assez drôle puisque c'est un changement effectué aujourd'hui même : jusqu'alors, les [ CODE] étaient structurés par un <pre>, mais provoquaient des inconvénients notoires : par exemple des sauts de ligne intempestifs lors de copier-coller.
On a donc réglé ce problème en le remplacant par un div à police fixe... mais désolé pour l'indentation
Modifié par Raphael (12 Feb 2005 - 20:19)

Pour l'indentation, une solution possible serait de transformer les espaces par des espaces insécables

 

en PHP au moment du traitement, mais c'est peut-être un peu lourd...

Le validateur accepte sans problème reste à savoir si c'est vraiment pratique

Raphael a écrit :

On a donc réglé ce problème en le remplacant pas un div à police fixe... mais désolé pour l'indentation

#yay .code {
white-space: pre;
}
#yay .code br {
display: none;
}

<edit>
Ce code placé dans une css user rétablit l'indentation des exemples de code du forum, tout en supprimant les lignes vides excédentaires crées par les <br>.
</edit>
Modifié par Laurent Denis (12 Feb 2005 - 22:03)

Laurent Denis a écrit :

#yay .code {
white-space: pre;
}
[#red][b]#yay .code br {
display: none;
}[/b][/#]

Attention car dans Firefox1.0/Mac, le non-affichage des <br /> a pour résultat un code d'un kilomètre sans retour a la ligne.
Modifié par Stephan (19 Feb 2005 - 07:12)

Et il ne déclenche pas la coupure automatique de fin de ligne ? C'est bizarre ça

Effectivement, Firefox ne respecte pas le white-space: pre dans ce cas (en raison d'un problème de calcul de spécificité des sélecteurs). Mais heureusement, il suffit d'insister un peu pour qu'il comprenne:

#yay .code {
white-space: pre !important;
}
#yay .code br {
display: none;
}

<edit>
En revanche, il ne copie pas les espaces. L'indentation est donc perdue à la copie.
Tss... Navigateur d'amateur, va
</edit>
Modifié par Laurent Denis (19 Feb 2005 - 07:05)

Maintenant c'est OK !

Puis tu as raison pour l'indentation
Modifié par Stephan (19 Feb 2005 - 07:16)

M'est d'avis qu'on a rien gagné en changeant les <pre> par des <div class="code">

Le seul problème était le double espacement au copier-coller. Maintenant, si on veux un code bien indenté, il faut une feuille de style utilisateur, et si on perd l'indentation au copier-coller dans Firefox, on a changé un problème pour un autre. Avant, pour contourner le problème, j'appuyais sur « citer », je copiais le code et faisais un retour arrière pour « répondre ». Je vais devoir faire de même pour conserver l'indentation. Sauf que les navigateurs n'utilisant pas de « user.css » ont perdu le rendu visuel du texte préformaté. Comme quoi rien n'est parfait

Mais je suis réellement content que ça fonctionne bien pour toi... dans Opera
Modifié par Stephan (19 Feb 2005 - 07:50)

ce que je voulais dire, c'est que je ne comprends pas pourquoi ce forum n'utilise pas un simple élément <pre>, sans <br>, où l'indentation, le copié-collé, etc... ne posent aucun problème ?

Raphaël avait essayé de m'expliquer pourquoi ce n'était pas si simple, mais je dois être un peu obtus, là

Extrait d'un échange que j'ai eu avec Raphael :

Stephan a écrit :

Pourquoi il y a des <br /> dans les <pre> ?
Je trouve que c'est un non-sens.

Raphael a écrit :

Lorsque le message est interprété, il faut bien signifier les sauts de ligne.
<-- là je viens de faire un saut de ligne. Dans la base de donnée, il est représenté par un "\n" (caractère d'échappement).
Pour le restituer dans le code, il faut transformer le \n en <br> pour aller à la ligne. Ça me paraît inévitable et le Hub fait ainsi aussi.

Le problème est que chez nous, par mesure de sémantique dans les codes, nous utilisons <pre> et c'est pour cela que ça pose des problèmes (le Hub utilise un <div>).

Il faut peut-être effectivement revoir ce point et utiliser un bête <div> avec une police à châsse fixe.

Stephan a écrit :

Et ce n'est pas possible de restituer avec un white-space ?
http://www.la-grange.net/w3c/html4.01/struct/text.html#line-breaks

Raphael a écrit :

Non ça pose des problème sous Opera.
Laurent Denis l'avait déjà proposé, mais il m'a ensuite conseillé de les virer finallement :
http://forum.alsacreations.com/topic.php?fid=1&tid=75&p=6#p13650

Stephan a écrit :

Ah, mais je ne parlais pas d'un white-space: pre-wrap; dans le CSS mais bien d'un vrai « retour chariot (CR) », ou un « saut de ligne (LF) » dans le HTML généré.

Cependant, je suis p't'être complètement à côté de la plaque.

Tu y comprends quelque chose ?
Modifié par Stephan (19 Feb 2005 - 08:22)

Raphael a écrit :

Lorsque le message est interprété, il faut bien signifier les sauts de ligne.
<-- là je viens de faire un saut de ligne. Dans la base de donnée, il est représenté par un "\n" (caractère d'échappement).
Pour le restituer dans le code, il faut transformer le \n en <br> pour aller à la ligne. Ça me paraît inévitable et le Hub fait ainsi aussi.

Il n'y a aucune obligation à transformer le \n en <br>... Il sera interprété comme tel dans un bloc <pre>.
Modifié par Laurent Denis (19 Feb 2005 - 08:35)

J'ai mis un lien vers cet échange dans la to-do. On verra bien

En fait, le problème de l'indentation se règle avec un white-space: pre; (ici on a choisi "nowrap" pour l'instant)

Par contre cela engendre des hauteurs de lignes double. On peut évidemment le régler en modifiant l'interligne... mais j'ai peur que l'affichage ne soit pas compris correctement partout et sur tous les navigateurs (imposer une line-height de 50% me gêne un peu)
Je ferai des tests la semaine prochaine.