Sous-menu sans javasript : comment ?

[SIBELIUS]

Bonnes Fêtes à toi également et bonne chance pour la suite

[Ricardo]

Tiens, il me restait encore un peu de tps avant de me faire eng... par la patronne alors j'ai rechargé ton menu d'origine et je te joins ce qui ne va pas pour moi :
Je précise que je travaille sous MFF.
– Les ‘menus’ non sélectionnés changent de place pour laisser les sous-menus. Ça, j’ai résolu en plaçant les sous-menus à côté au lieu d’en dessous.
– Quand on passe sur du ‘menu 1’ au ‘menu 2’, directement, les sous-menus du 1 restent visibles en m^ tps que ceux du 2 s’affichent. C’est ce que je n’ai pas réussi à résoudre.
– Par contre, quand on fait le trajet de bas en haut, ça ne se produit pas donc il y a certainement qq chose à chercher de ce côté.
Sinon, ton menu est parfait pour moi. Le reste, c’est de la fioriture que chacun peut agrémenter comme il l’entend.

[Bobe]

Il y a des erreurs dans ton code SIBELIUS. Les éléments UL ne peuvent avoir que des LI comme enfants.

P.S: les document.all et document.layers sont vraiment nécessaires ?
Personnellement, pas de styles ni de scripts clients en dessous de IE5.0 et Netscape 6.x

[SIBELIUS]

Il y a des erreurs dans ton code SIBELIUS. Les éléments UL ne peuvent avoir que des LI comme enfants.

P.S: les document.all et document.layers sont vraiment nécessaires ?
Personnellement, pas de styles ni de scripts clients en dessous de IE5.0 et Netscape 6.x

Les ul sont des éléments bloc comme les autres, non ? Il y'a une spécificité avec eux ? En théorie, un élément bloc peut contenir n'importe quel autre bloc (indépendamment de la relation parent-enfant).

Effectivement, <ul> n'est parent que de <li>, mais ça n'empêche pas d'imbriquer d'autres balises, non?

Prenons l'exemple de <p> qui n'est pas parent de <p> ni de <div> et pourtant on peut imbriquer les div et les <p> au sein d'une balise <p>, non?

Pour les document.all et document.layers : non honnêtement je ne pense pas qu'ils soient nécessaires. Mais Opera 6 les utilisait encore (il ne comprenait pas les getElementById)

[Youhou65]

Ha moi j l ai pompé sur http://css-astuces.batraciens.net/ le code

Par contre petite remarque, si javascript n'est pas activé les menus ne s'afficheront pas si il y a : "display: none;" ... Je ne sais pas si c'est une très bonne idée de le mettre ?...

à+
Youhou

[Bobe]

Les ul sont des éléments bloc comme les autres, non ? Il y'a une spécificité avec eux ? En théorie, un élément bloc peut contenir n'importe quel autre bloc (indépendamment de la relation parent-enfant).

Non, la DTD html permet d'exclure la présence de certains éléments comme enfants de certains autres éléments.

Pour UL (et OL):
http://www.la-grange.net/w3c/html4.01/s ... ml#edef-UL

Prenons l'exemple de <p> qui n'est pas parent de <p> ni de <div> et pourtant on peut imbriquer les div et les <p> au sein d'une balise <p>, non?

Ah non, un P ne peut contenir que des boites en-ligne.

En XML, impossible de définir de telles exclusions, mais on devrait quand même éviter les emboitements illogiques.
Un A peut pas contenir un A, un P est fait pour contenir du texte (et des boites en-ligne éventuellement), une rangée de tableaux (TR) ne doit contenir que des cellules (TD ou TH), etc. Bref, respecter les exclusions telles que définies dans la DTD html 4.01, même si on est en XHTML 1.0:
http://www.la-grange.net/w3c/xhtml1/#diffs (paragraphe 4.9)

D'ailleurs, ce qui est bizzare est que la DTD XHTML 1.0 définit quand même les éléments pouvant être enfants de chaque élément, ce qui va à l'encontre de ce qui est dit dans le paragraphe 4.9 de la recommandation xhtml 1.0 (à moins que le parseur n'en tienne tout simplement pas compte):
http://www.la-grange.net/w3c/xhtml1/DTD ... strict.dtd

Par contre petite remarque, si javascript n'est pas activé les menus ne s'afficheront pas si il y a : "display: none;" ... Je ne sais pas si c'est une très bonne idée de le mettre ?...

Tout à fait.
Il faudrait que les sous menus soient dépliés par défaut et qu'on leur mette display: none; sur l'évènement load de la fenêtre.

[Ricardo]

Ok Youhou, pour celui à base de css2 et je vais m'en inspirer car les sous-menus s'effacent bien quand on les quittent.
Par contre, pour celui avec le css1, le problème est le m^
Merci, ça donne plusieurs bases de travail.

[SIBELIUS]

Non, la DTD html permet d'exclure la présence de certains éléments comme enfants de certains autres éléments.

Pour UL (et OL):
http://www.la-grange.net/w3c/html4.01/s ... ml#edef-UL

Bien, j'ai médité sur cette histoire de menu et de sous-menus.

Tu me dis que les éléments UL ne peuvent avoir que des LI comme enfants.
Cependant, le lien que tu donnes au sujet des spéc. W3C dit clairement que "Les listes peuvent aussi s'imbriquer" (en clair, contenir d'autres listes ul ou ol).

Cette histoire me travaille

Je suis donc allé voir le "menu universel" d'OpenWeb.
En effet, il n'imbrique pas les listes, par contre, il utilise des <p> pour englober les <li> et distinguer les menus des sous-menus.
Cette solution ne me parait pas très propre sémantiquement parlant... je ne vois pas ce qu'un paragraphe ferait là pour "séparer" le bouton menu du reste de la hiérarchie

Par contre, toujours dans ton lien des spéc., ils enchaînent avec les listes de définition.
Après quelques lectures intéressantes :
- http://pompage.net/pompe/listesdefinitions/
- http://www.xdevdesign.com/Better_MS_Menu.htm

Je dirais que ce genre de structure me semble bien plus appropriée pour un menu à plusieurs niveaux hiérarchique :

Code : Tout sélectionner

<dl id="menuglobal">
    <dt class="menu">Menu 1</dt>
    	<dd>
			  <ul>
            <li>Sous-menu 1.1</li>
            <li>Sous-menu 1.2</li>
            <li>Sous-menu 1.3</li>
        </ul>
			</dd>
    <dt class="menu">Menu 2</dt>
    	<dd>
			  <ul>
            <li>Sous-menu 2.1</li>
            <li>Sous-menu 2.2</li>
            <li>Sous-menu 2.3</li>
        </ul>
			</dd>
</dl>

Sachant que "Vous pouvez aussi utiliser des éléments de type bloc dans une description de définition, comme un <p> ou un <ul>. Vous ne pouvez pas utiliser d'éléments de type bloc dans un terme de définition." --> source : article de Pompage.

Qu'en penses-tu ?

[Thomas]

Code : Tout sélectionner

<dl id="menuglobal">
    <dt>Menu 1</dt>
    <dd>Sous-menu 1.1</dd>
    <dd>Sous-menu 1.2</dd>
    <dd>Sous-menu 1.3</dd>
    <dt>Menu 2</dt>
    <dd>Sous-menu 2.1</dd>
    <dd>Sous-menu 2.2</dd>
    <dd>Sous-menu 2.3</dd>
</dl>

Qu'en penses-tu ?

Tu ne t'adresse pas à moi mais je réponds: selon moi ça ne va pas, un menu est une liste de lien, donc <ul>, <ol> et <li> corrspondent bien alors que <dl>, <dd> et <dt> sont plutôt consacrées à des termes/medias et leurs définitions/informations

[SIBELIUS]

Tu ne t'adresse pas à moi mais je réponds: selon moi ça ne va pas, un menu est une liste de lien, donc <ul>, <ol> et <li> corrspondent bien alors que <dl>, <dd> et <dt> sont plutôt consacrées à des termes/medias et leurs définitions/informations

Oui, c'est aussi ce que je croyais, mais as-tu lu les liens que j'ai donné ? (surtout le second, ainsi que celui-ci : http://www.simplebits.com/bits/simplequiz/#entry550)
ça n'a pas l'air si simple : la définition du W3C semble bien plus large et vague.

[Thomas]

Effectivement je n'avais pas lu la 2è lien Dans ce cas je dis que chacun fait comme il veut, la sémantique parfaite, n'est que pour les ... perfectionnistes. Du moment qu'on utilise <blockqote> ou <q> pour les citations et <hX> pour les titres ça me va

[Bobe]

Bien, j'ai médité sur cette histoire de menu et de sous-menus.

Tu me dis que les éléments UL ne peuvent avoir que des LI comme enfants.
Cependant, le lien que tu donnes au sujet des spéc. W3C dit clairement que "Les listes peuvent aussi s'imbriquer" (en clair, contenir d'autres listes ul ou ol).

la DTD est on ne peut plus claire:

Code : Tout sélectionner

<!ELEMENT UL - - (LI)+                 -- liste non-ordonnée -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- liste ordonnée -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

En français: Les éléments UL et OL peuvent contenir un ou plusieurs éléments LI.

Par contre, l'élément LI, lui, peut contenir des boites blocs ou en-ligne:

Code : Tout sélectionner

<!ELEMENT LI - O (%flow;)*             -- item de liste -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

%flow; rassemble %block; et %inline;, lesquels correspondent aux listes d'éléments de type bloc et de type en-ligne. (Voir la DTD)

Voir mon site pour un exemple de menu avec sous-menus syntaxiquement correct. (UL imbriqués mais les UL des sous-menus sont dans des LI et non enfants directs du UL du niveau supérieur).

Je suis donc allé voir le "menu universel" d'OpenWeb.
En effet, il n'imbrique pas les listes, par contre, il utilise des <p> pour englober les <li> et distinguer les menus des sous-menus.
Cette solution ne me parait pas très propre sémantiquement parlant...

Je pense pareil.

Mais que veux tu dire par des <p> pour englober les <li> ?
Les P sont utilisés pour le niveau le plus élevé du menu, mais les listes suivent le paragraphe et ne sont pas dedans. (si c'était ça que tu entendais par 'englober')

Par contre, toujours dans ton lien des spéc., ils enchaînent avec les listes de définition.
Après quelques lectures intéressantes :
- http://pompage.net/pompe/listesdefinitions/
- http://www.xdevdesign.com/Better_MS_Menu.htm

Je dirais que ce genre de structure me semble bien plus appropriée pour un menu à plusieurs niveaux hiérarchique :

Le premier lien est inaccessible à l'heure actuelle
Je ne suis pas du tout en accord avec l'utilisation qui est faites des listes de définition dans le deuxième lien. En quoi chacun des liens est une définition de ce qui se trouve dans la balise DT ? Ça me semble pas vraiment sémantique.

J'ai l'impression que l'auteur voulait donner un titre à chaque sous menu (ici, il n'y en a qu'un cependant).
À priori, le W3C a planché sur ce manque en proposant une balise NL pour les listes de navigation et une balise LABEL pour donner un titre:
http://www.w3.org/TR/xhtml2/mod-list.html#edef_list_nl
Mais je vois dans le tableau du haut de page que NL ne pourrait contenir plus d'un LABEL ce qui en réduit sensiblement l'intérêt...

Sachant que "Vous pouvez aussi utiliser des éléments de type bloc dans une description de définition, comme un <p> ou un <ul>. Vous ne pouvez pas utiliser d'éléments de type bloc dans un terme de définition." --> source : article de Pompage.

oui
http://www.la-grange.net/w3c/html4.01/s ... ml#edef-DL

[SIBELIUS]

Intéressant, ce débat (désolé si on s'écarte du topic de départ)

Je ne suis pas du tout en accord avec l'utilisation qui est faites des listes de définition dans le deuxième lien. En quoi chacun des liens est une définition de ce qui se trouve dans la balise DT ? Ça me semble pas vraiment sémantique.

C'est bien le "problème", le W3C ne semble pas clair du tout sur "l'ensemble de définition" de ses DL.
Il parle lui-même d'autres utilisations possibles : "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."

Selon moi (et d'autres apparemment), ça laisse la porte à d'autres interprêtations de structure.

Si on regarde tous les exemples donnés ici : http://pompage.net/pompe/listesdefinitions/ , on voit qu'on ne s'en tient pas à la "stricte" définition d'objets.

D'autres sites semblent adopter une structure de menu en DL :
http://www.moronicbajebus.com/playground/cssplay/dl/

Une excellente discussion ici : http://www.simplebits.com/archives/2003 ... #comment34

En attendant, j'ai pondu ça : http://www.alsacreations.com/articles/d ... oulant.htm

[Bobe]

Intéressant, ce débat (désolé si on s'écarte du topic de départ)

de même.
Au pire, les modérateurs jugeront si un split est nécessaire.

Je ne suis pas du tout en accord avec l'utilisation qui est faites des listes de définition dans le deuxième lien. En quoi chacun des liens est une définition de ce qui se trouve dans la balise DT ? Ça me semble pas vraiment sémantique.

C'est bien le "problème", le W3C ne semble pas clair du tout sur "l'ensemble de définition" de ses DL.
Il parle lui-même d'autres utilisations possibles : "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."

Néanmoins, si je m'en tiens à ce que dit la doc et aux exemples qu'elle donne, j'en conclue que DT et DD fonctionnent par paire (un DT lié avec un DD, etc), d'où ma ... "désapprobation" dans l'usage qui en est fait ici.

(le site pompage.net est tjs inaccessible chez moi)

D'autres sites semblent adopter une structure de menu en DL :
http://www.moronicbajebus.com/playground/cssplay/dl/

Alors dans ce cas, il faudrait s'entendre sur la définition du terme "menu".
Dans la page que tu donnes, je ne vois pas de menu mais une liste de liens avec pour chaque lien un court descriptif. Cela correspond à une utilisation correcte des listes de définition selon moi. J'utilise d'ailleurs ces listes de façon similaire sur mon autre site dans la page des liens.

Une excellente discussion ici : http://www.simplebits.com/archives/2003 ... #comment34

Ok, je lirai ça à tête reposée. Mon anglais est assez bancale

[SIBELIUS]

(un DT lié avec un DD, etc)

Non non justement, sur ton lien : http://www.la-grange.net/w3c/html4.01/s ... ml#edef-DL

Tu peux voir qu'on peut avoir un exemple avec des termes et descriptions multiples :

Code : Tout sélectionner

<DL>
   <DT>Centre
   <DT>Centre
   <DD> Un point &eacute;quidistant de tous les poinst
              &agrave; la surface d'une sph&egrave;re.
   <DD> Dans certains sports de champs, le joueur qui
              occupe la position centrale sur le terrain,
              le court ou la ligne centrale.
</DL>

(tiens, le W3C met des majuscules dans les balises ?!)