Menu avec listes ou div ?

Bonjour/bonsoir,

Oui je sais je ne suis pas passé par le case présentation mais je vous avoue que je manque un peu d'inspiration à ce moment précis (j'ai passé la semaine à coder car je crée un site qui doit ouvrir lundi), mais je le ferai. De toutes façons, nous allons avoir l'occasion de faire plus ample connaissance par la suite.

J'ai effectué une recherche, mais soit je n'ai pas su utiliser correctement le moteur de recherche, soit la question n'a pas été posée.

Dans la création de menus que vous proposer sur le site, vous utiliser les listes pour les faire (<ul><li></li></ul>)
J'ai feuilleté quelques livres de Css qui font de même.

Perso, je préfére utiliser un menu en utilisant les div :

<div id="menu">
<div class="nav">accueil</div>
<div class="nav">lien1</div>
<div class="nav">lien2</div>
</div>

Je voulais donc savoir pourquoi vous utiliser les listes ? Il me semble que ce n'est pas fait pour ça ? En plus, il faut gérer les marges que cela génére...

C'est peut être une question de newbie, mais comme j'aime comprendre les choses, je vous soumet la question.

Merci
@ bientôt

Bonjour et bienvenue bergamotte,

Il n'y a pas vraiment de balisage pour un menu mais les divs sont des conteneurs généralistes sans véritable sens. Ces conteneurs servent avant tout à en regrouper d'autres sous son aile... pas à représenter du contenu. Dans la mesure du possible, mieux vaut les éviter en vue de mettre des balises adaptées à leur contenu.

Lorsque tu fais un menu, plusieurs cas sont possibles. On peut faire une liste non ordonnée, c'est le cas le plus courant et souvent le plus adapté, car ce que tu cherches à mettre en avant est, la plupart du temps, une liste de liens sans ordre véritable qui composent un menu.

Dans le cas où l'ordre est important, on peut faire une liste ordonnée (ol).

etc... etc...

Ce qui compte avant tout, c'est de représenter au mieux le contenu. La mise en page ne devrait pas entrer en compte lors de ce choix, c'est le rôle des CSS. Il n'y a pas une règle qui te dira que de mettre des divs, c'est mal mais il y a de fortes chances pour que tu puisses améliorer la sémantique. Si c'est possible, alors mieux vaut le faire.

a écrit :
Ce qui compte avant tout, c'est de représenter au mieux le contenu. La mise en page ne devrait pas entrer en compte lors de ce choix, c'est le rôle des CSS. Il n'y a pas une règle qui te dira que de mettre des divs, c'est mal mais il y a de fortes chances pour que tu puisses améliorer la sémantique. Si c'est possible, alors mieux vaut le faire.

Tout est dit.

Bien noter que la notion de « liste » attachée aux éléments ol et ul est très large. Restreindre l'utilisation de ces éléments à des énumérations de données ou d'arguments n'a aucun intérêt. Rien ne s'oppose donc à ce qu'on utilise une liste non ordonnée pour une série de liens hypertextes, qui peuvent alors constituer un menu de navigation.

Un des avantages très pragmatiques de l'utilisation de ul pour les menus de navigation, c'est que le menu ressort bien dans la page lorsqu'on désactive les styles CSS. De plus, on transmet plus facilement l'information « ceci est un ensemble de liens qui vont ensemble » aux utilisateurs de navigateurs non graphiques tels que Lynx ou de lecteurs d'écran tels que Jaws.

Enfin, pour le développeur ça peut avoir un côté pratique : on réserve les éléments div pour baliser les différentes zones et groupes d'éléments du document, et on garde les p, ul, hN, etc., pour le contenu à proprement parler.

Pour les désavantages... le coup des styles par défaut est le seul truc gênant. Un simple ul {margin: 0; padding: 0;} règle ça très rapidement.

Ceci dit, utiliser une liste non ordonnée pour un menu de navigation n'est certainement pas une obligation. Pour ma part, je préfère en utiliser une tant que possible, mais je n'hésite pas à basculer sur d'autres solutions lorsque nécessaire (par exemple sur un tableau à une ligne pour certains types de menus horizontaux).

Salut,

bergamotte a écrit :

Je voulais donc savoir pourquoi vous utiliser les listes ?

Ah bon

bergamotte a écrit :

Perso, je préfére utiliser un menu en utilisant les div

Oh...........
................... Très bien !

Alors je te propose ceci, plutôt que de demander pourquoi tout le monde utilise des listes tu pourrais nous dire ce qui fonde rationnellement ta préférence


sinon pour les menu il y a un truc qui marche bien

<p class="conteneur_menu">
<span><a href="">lien 1</a></span> <span><a href="">lien 2</a></span> <span><a href="">lien3</a></span> <span><a href="">lien 4</a></span>
</p>

avec pour obtenir un menu vertical
css

.conteneur_menu span {
display:block;
}

Etonnant non ?




Un des très gros avantages des listes c'est que les lecteurs d'écran informent du nombres d'item qui constituent la liste.


Il y a deux approches possibles de l'élément div
. Celle qui le considère comme l'élément neutre de type block. C'est sur cela que s'appuit ton premier exemple. Ce n'est pas que c'est faux mais quest ce que c'est faible, et tu n'es pas le seul à ne partir que de ça.

. Celle qui prend en compte le fait que div est un conteneur block d'éléments de types block. en fait c'est ça fonction et sa définition même. Donc utiliser div pour contenir un élément de niveau texte c'est une bêtise car c'est le transformer en <p>, balise dont c'est précisemment la définition que d'avoir un contenu de niveau texte (A tous, ce qui ne constitue en rien une exception ).

Donc à tout le moins ta "préférence" aurait du être codée ainsi

<div id="menu">

<p>accueil</p>

<p>lien1</p>

<p>lien2</p>

</div>

Tu noteras que j'ai enlevé tous les class="nav" Il sont complètement inutiles car chaque élément peut être atteint en css par la cascade :

#menu p {
propriété:valeur;
}

Modifié par Christian Le Bouler (01 Apr 2007 - 03:56)

Bonsoir,

meci beaucoup pour ses précisions, j'y vois plus clair. En fait je n'avais pas compris la fonction première des divs. Je comprends à présent pourquoi il est plus juste sémentiquement d'écire un menu sous forme de list.

En revanche :

a écrit :

Donc à tout le moins ta "préférence" aurait du être codée ainsi

<div id="menu">
<p>accueil</p>
<p>lien1</p>
<p>lien2</p>
</div>

Tu noteras que j'ai enlevé tous les class="nav" Il sont complètement inutiles car chaque élément peut être atteint en css par la cascade :

#menu p {
propriété:valeur;
}

L'élément p n'est pas rataché à un paragraphe ?
Je trouve ça étrange de l'utiliser pour un seul mot.

bergamotte a écrit :
L'élément p n'est pas rataché à un paragraphe ?

Non, pas vraiment. Disons qu'il n'y a aucune obligation à utiliser p pour des « paragraphes » (notion un peu vague), tandis que rien n'empêche d'utiliser cet élément pour des éléments de navigation par exemple. En tout cas, c'est valide.

La principale différence entre div et p est comme suit :
- p ne peut contenir que des éléments de type en-ligne ;
- div peut contenir tout ce qu'on veut.

Il peut donc être intéressant d'utiliser p en bout de course (comme dernier élément de type bloc dans une branche de l'arborescence du document), et div en amont (comme conteneur pour d'autres éléments de type bloc). Mais ça n'est pas une obligation.

Salut,

p n'est pas rattaché un paragraphe uniquement au sens où on l'entend. C'est un conteneur qui reste généraliste et qui peut parfaitement n'englober qu'un mot... vu qu'il n'existe de toute façon pas de balise spécifique à ce cas.

<edit>pff... trop lent... pas assez précis... arf...
Modifié par koala64 (02 Apr 2007 - 21:51)

Hello,

zut j'allais me coucher.

Bon je vous livre deux de mes réflexions "html addict"

a écrit :

Le fait que l'on traduise la balise <p> par "paragraph" n'est rien d'autre qu'une métaphore.

a écrit :

Toutes les balises de type block sont des exceptions...
... Sauf <p> qui est la règle.

J'aime vraiment beaucoup la deuxième

Tout cela vient de mon ptit carnet perso. Sauf que je met pas de lien parce que ce serait du spam.

Mais bon j'insiste, tant qu'on ne comprend pas ce qu'est <p> alors on ne comprend pas ce qu'est le html.

Florent V. a écrit :

div peut contenir tout ce qu'on veut.

Bof moyen, moyen AMHA
<div> c'est beaucoup plus intéressant que ça... Moins intéressant que <p> mais quand même !!!