[résolu] Utiliser des titres dans des listes ?

Bonjour tout le monde
Je suppose qu'il y a déjà eu des post sur le sujet, mais je n'arrive pas à utiliser de $*#@%1 de moteur de recherche. Je fais une recherche "liste titre", et il trouve zéro messages...
Bref, voici ma question : la validation xhtml me refuse une balise h3 à l'intérieur d'une dt, au motif qu'on ne peut pas mettre de balise block au sein d'une balise inline...
Il me semblait que les listes étaient pourtant des blocs, non ? Vu qu'il faut les mettre en inline pour qu'elles s'affiche sur qu'une seule ligne...
Est-ce que quelqu'un pourrait m'expliquer ce qu'on a le droit de mettre dans les listes ?
Moi, en tous cas, je trouve ça logique, pour une table des matières, par exemple, d'avoir des titres dans une liste...

A tout hasard, voici mon code :

<dl id="themes">
<dt><h3><a href='/articles/rayon-cosmetique/'>Rayon Cosm&eacute;tique</h3></a>
<dt><h3><a href='/articles/rayon-dietetique/'>Rayon di&eacute;t&eacute;tique</h3></a>
(etc.)
</dl>

Et l'erreur de validation :

a écrit :

Line 19 column 23: document type does not allow element "h3" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<dl id="themes"><dt><h3><a href='/articles/rayon-cosmetique/'>Rayon Cosm&eacute;

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Merci !
Modifié par mouloud (05 Jun 2007 - 10:09)

Salut,

dt est un élément inline donc ne peut contenir d'élément block comme h3

Pour compléter, les titres <hn> ,n'ont par ailleurs rien à faire dans une table des matières d'un document... Et la liste de définition non plus
Modifié par Laurent Denis (05 Jun 2007 - 09:40)

Bon et bien 2 idées.

- <h3> ce n'est a priori que de la mise en page ( plus un petit coté block ) tu peux trés bien simuler le resultat d'un h3 avec un span

- on peut aussi mettre display:block au dt (enfin je pense ) et ensuite jouer avec les float-ants pour aligner ceux ci en ligne.

edit c'est ce qu'on appel de la réaction 3 messages en 2 temps 3 mouvements
Modifié par CPascal (05 Jun 2007 - 09:42)

Laurent Denis a écrit :
Pour compléter, les titres <hn> ,n'ont par ailleurs rien à faire dans une table des matières d'un document... Et la liste de définition non plus

Oui, c'est ce que semble dire le validateur.
Pourtant, ce simple test :

première liste
<dl>
<dt>un dt sans mise en forme</dt>
<dd>avec le dd qui suit</dd>
</dl>
deuxi&egrave;me liste
<dl>
<dt style="display: inline">un dt avec un style "display: inline"</dt>
<dd style="display: inline">et un dd idem</dd>
</dl>
</body>

montre qu'un dt auquel on affecte le style inline ne se comporte pas comme un dt sans style. J'ai donc tendance à en déduire que par défaut, il n'est pas inline.
Ou bien je comprends rien ?
Modifié par mouloud (05 Jun 2007 - 09:51)

Laurent Denis a écrit :
Pour compléter, les titres <hn> ,n'ont par ailleurs rien à faire dans une table des matières d'un document...

En tant que graphiste formé à la mise en page classique, ça ne me choque pas du tout, des titres dans une table des matière. C'est même la solution par défaut de logiciels comme Xpress ou inDesign quand ils génèrent une table des matières automatique.
Maintenant, les règles du W3C sont les règles du W3C, je ne vais pas aller contre. Mais pour dire qu'à priori, l'idée n'est pas complètement stupide...

Laurent Denis a écrit :
Et la liste de définition non plus

J'aimais bien l'idée, pour ma table des matière, d'avoir pour chaque éléments un petit résumé de ce qu'on va trouvé. C'est pour ça que j'ai utilisé une liste de définition pour ça. J'ai d'ailleurs souvent lu, sur des sites très bien, qu'on pouvait avoir une acceptation assez large des listes de définitions.

mouloud a écrit :

Oui, c'est ce que semble dire le validateur.
Pourtant, ce simple test :

première liste
<dl>
<dt>un dt sans mise en forme</dt>
<dd>avec le dd qui suit</dd>
</dl>
deuxi&egrave;me liste
<dl>
<dt style="display: inline">un dt avec un style "display: inline"</dt>
(<dd style="display: inline">et un dd idem</dd>
</dl>
</body>

montre qu'un dt auquel on affecte le style inline ne se comporte pas comme un dt sans style. J'ai donc tendance à en déduire que par défaut, il n'est pas inline.
Ou bien je comprends rien ?

Attention, inline au sens HTML, ce n'est pas la même chose que la propriété CSS display: inline;. Oui je sais, c'est source de confusion, mais c'est comme ça.

D'ailleurs, ce n'est pas parce qu'on redéfini la propriété display à inline d'un élément block au sens HTML qu'il devient un élément inline et inversement. C'est juste la présentation qui change.

(Note au créateur du forum : 4ème Edit. Et zut pour le parseur de BBCode ! )
Modifié par Lanza (05 Jun 2007 - 09:59)

CPascal a écrit :
Bon et bien 2 idées.
- <h3> ce n'est a priori que de la mise en page ( plus un petit coté block ) tu peux trés bien simuler le resultat d'un h3 avec un span

Oui, bien sûr, là n'est pas le problème. Je me demandais juste pourquoi ça faisait ça. Mais je vais régler le problème de cette façon, c'est clair. Je vais même affecter le style directement au dt, en fait.

CPascal a écrit :

- on peut aussi mettre display:block au dt (enfin je pense ) et ensuite jouer avec les float-ants pour aligner ceux ci en ligne.

Bé c'est ça qui est dingue : Quand on affecte un style block à un dt, il se comporte exactement pareil que sans style. Alors que avec un style inline, il se met bien en inline. Tout semble donc indiquer qu'en tous cas Safari et Firefox considèrent dt comme une balise block.

CPascal a écrit :

edit c'est ce qu'on appel de la réaction 3 messages en 2 temps 3 mouvements

Héhé, comme tu dis. C'est l'effet mitraillette.

Modifié par mouloud (05 Jun 2007 - 10:06)

mouloud a écrit :

En tant que graphiste formé à la mise en page classique, ça ne me choque pas du tout, des titres dans une table des matière. C'est même la solution par défaut de logiciels comme Xpress ou inDesign quand ils génèrent une table des matières automatique.

Permet moi de revenir sur tes propos : dans une table de matière l'information est présentée de manière listée, chaque entrée n'est pas un titre, car elle ne précède encore aucun contenu. Par contre lorsqu'on arrive sur les pages concernées, ces éléments listés changent de statut et deviennent des titres à part entière, car ils introduisent alors les contenus qui leur font suite.

Les logiciels de graphistes n'ont tendance à prendre en compte que la vision de graphiste, à savoir l'aspect. Ainsi, même si cela appairait comme titres, cela n'en reste pas moins une liste d'entrées.
C'est un peu le constat qui peut être fait lorsqu'un graphiste plein d'idées créatives vient sur le forum en demandant comment avoir "un site au pixel près dans lequel la taille de texte n'est pas modifiable", c'est une vision graphique et non sémantique.

Lanza a écrit :

Attention, inline au sens HTML, ce n'est pas la même chose que la propriété CSS display: inline;. Oui je sais, c'est source de confusion, mais c'est comme ça.

D'ailleurs, ce n'est pas parce qu'on redéfini la propriété display à inline d'un élément block au sens HTML qu'il devient un élément inline et inversement. C'est juste la présentation qui change.

Ah okokokok... Tout s'explique ! Y'a en endroit où je pourrais trouver de la documentation là-dessus ?

mouloud a écrit :
PS : au fait, je rêve, où je me suis fait "modérer" le lien vers mon site que j'avais mis dans ma signature ?

Tu ne rêves pas ...
Petit rappel :

La règle 17 a écrit :
A noter également que les signatures ne comportant que le lien vers votre site perso sont assez peu appréciées, sauf si ce site peut être utile à la communauté, et non nécessaires si vous avez renseigné votre site web dans votre profil (bouton WWW).
Pour résumer :
- le bouton WWW (à modifier dans votre profil) est prévu pour indiquer votre site personnel
- seule la présence de lien pouvant être utiles aux autres membres est tolérée. Etre réalisé en XHTML / CSS n'est pas une raison suffisante pour être utile aux autres

Bonne journée

mouloud a écrit :
Ah okokokok... Tout s'explique ! Y'a en endroit où je pourrais trouver de la documentation là-dessus ?

Ici même pour commencer :
http://css.alsacreations.com/Bases-et-indispensables/Le-rendu-par-defaut-des-elements-HTML
http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne

Pour la suite, voir les spécifications HTML 4.01 et CSS 2.1 sur le site du W3C.

Merci beaucoup, c'est très instructif.
Et on voit en effet que dans la feuille de style par défaut du w3c
les balises dt et dd ont le style block.
Il s'agit donc d'une balise "inline" formatée par défaut en "block". Ce qui peut induire en erreur...

Pour la signature, désolé, je me rappelais plus ce point du règlement... Je le ferai plus, promis !
Modifié par mouloud (05 Jun 2007 - 11:22)

mouloud a écrit :
Il s'agit donc d'une balise "inline" formatée par défaut en "block". Ce qui peut induire en erreur...

Non. Il s'agit d'un élément HTML de type bloc, formaté par défaut en display: block (du moins pour le recommandation du W3C).

Par contre, à l'instar des éléments p, h1, h2, etc., dt ne peut contenir que des éléments de type en-ligne.

Ah, toujours le même problème d'appréhension des types de contenus.

DT n'est pas de type block ni inline du point de la DTD, qui, encore une fois, ne fait que mettre les éléments dans des catégories de type de contenu.

DT n'est donc ni dans %inline ni dans %block, ni dans aucune autre entité de type de contenu: DT ne peut être contenue que dans DL, ce que <!ELEMENT DL - - (DT|DD)+ suffit à exprimer (il n'y a pas besoin d'une entité %contenu_de_dl)

Sinon, effectivement, le contenu de DT est de type %inline.

En conclusion, pour dire les choses correctement: DT est un élément qui ne peut être contenu que dans DL, et dont le propre contenu est lui-même de type %inline. Usuellement, les feuilles de styles des navigateurs lui donnent par ailleurs et par défaut un display:block (sans que cela ait un caractère normatif en HTML).
Modifié par Laurent Denis (05 Jun 2007 - 11:52)

Laurent Denis a écrit :
DT n'est pas de type block ni inline du point de la DTD, qui, encore une fois, ne fait que mettre les éléments dans des catégories de type de contenu.

Certes. Ceci dit, pour réducteur et techniquement faux que ce soit, la spécification HTML 4.01 distingue bien les éléments block-level ou inline.

Les précisions que tu apportes sont intéressantes (et ont été largement débattues dans un autre sujet), mais j'ai un petit doute sur l'intérêt de les exposer largement. Peut-être n'est-ce pas un hasard si la spécification HTML préfère un raccourci pédagogique à une explicitation de la DTD ?
Modifié par Florent V. (05 Jun 2007 - 12:02)

Disons que si on prêtait plus attention aux multiples précautions oratoires prises par ce passage dans la spécification ("Certains éléments"... "généralement", "peuvent, "dans certains cas", pour parler d'une manière gérnérale"...), cela aiderait beaucoup à s'apercevoir que l'on peut être, comme ici, en dehors de ce cas de figure générique, qui n'est pas si pédagogique que cela
Modifié par Laurent Denis (05 Jun 2007 - 12:33)

Laurent Denis a écrit :

cela aiderait beaucoup à s'apercevoir que l'on peut être, comme ici, en dehors de ce cas de figure générique, qui n'est pas si pédagogique que cela

Ce qui suppose que le cas de figure générique est bien identifié, que l'on peut en indiquer les limites et que l'on peut y articuler ce qui n'en relève pas strictement.

Parce que ce qui pose je trouve un vrai problème pédagogique c'est de se noyer dans l'en dehors en oubliant qu'il y a bien un cas de figure générique.

Au demeurant les différentes expressions observables ("Certains éléments"... "généralement", "peuvent, "dans certains cas", pour parler d'une manière gérnérale") ne prennent vraiment leur sens qu'en tant que modalités de l'articulation entre la foultitude des cas particuliers et le cas générique.