Listes et menus en css

Bonjour à tous.
Souvent on lit qu' un menu css n' est correct que quand il est inséré dans une liste. Je vais peut-être choquer les puristes , mais je trouve très compliquée la construction d' un menu de cette façon, vu les différences horribles entre les navigateurs, qui appliquent des marges très différentes aux éléments de la liste.
Je fais des menus sans listes qui marchent parfaitement sur tous les navigateurs et sont beaucoup plus simples à construire.
Les css ont été créés pour nous faciliter la vie et pas l' inverse, n' est-ce pas ?

Hello,

Faciliter la vie oui, mais faciliter celle de l'utilisateur avant celle du developpeur. Et l'utilisation d'une sémantique correcte y contribue grandement.

N' empêche que même les experts des css se plantent. Par exemple dans ce tutoriel d' alsacréations la ligne suivante :

background: #c00 ;

est utilisée inutilement deux fois, pour les div #navigation li et #navigation li a
Voici les extraits du code :

#navigation li {
	[b]background: #c00 ;[/b]
	color: #fff ;
	border: 1px solid #600 ;
	margin-bottom: 1px ;
	}

#navigation li a {
	display: block ;
	[b]background: #c00 ;[/b]
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	text-align: center ;
	text-decoration: none ;
	padding: 4px 0 ;
	}

Don't feed the troll ...

Salut,

Je vais suivre le conseil de Laurent.

Tout évolue et ce qui était le must hier le devient moins aujourd'hui.
Ton cas en est un exemple. Tymlis a raison mais si tu vas voir les exemples du RGAA, tu verras que ce changement est réel. Pas de liste

<a href="http://example.org">lien 1</a><br/><a href="http://example.com">lien 2</a>

Plus simple pour toi ?

easynet4all a écrit :
Souvent on lit qu' un menu css n' est correct que quand il est inséré dans une liste.

Bonjour ...

En fait, cette affirmation n'est pas correcte. Je me rappelle avoir eu une courte conversation à ce sujet avec Laurent à propos d'un menu horizontal.
Partie sur la base d'une liste, je fus assez étonnée de me voir répondre que dans certains cas, l'utilisation d'un <p> serait bien plus pertinente.

C'est à toi de faire la part des choses pour voir quand est-ce que l'utilisation de tel ou tel élément est préférable à tel autre au vu de la technique nécessaire pour aboutir au même résultat.

Cette dernière réponse est beacoup plus raisonnable et montre que tout le monde n' accepte pas forcément les idées reçues.
En fait, dans le tutoriel cité précédemment, à quoi sert la div navigation li, puisqu' un menu ne contient que des liens ? La div navigation li a n' aurait pas suffi ?

Effectivement dans le tutoriel cité nous pourrions nous passer de l'instruction de background sur les éléments de liste.
Cependant, je suppute qu'il s'agit soit d'une coquille (ça peut arriver à tout le monde), soit d'un ajout fait pour contenter un avertissement du validateur CSS.

Merci, mais je crois que tu n' as pas compris ma question.
Je ne parlais pas de la ligne concernant la couleur de fond, mais de toute la div navigation li.
Quand j' enlève cette div et insère les instructions qu' elle contenait dans la div navigation li a j' ai le même résultat.
Pourquoi la garder alors ? un menu contient que des liens, pas des éléments li sans liens. J' espère être clair.

Hum...


Pour ce qui ait du choix d'une liste non ordonnée pour construire le menu, cela concerne HTML et l'aspect sémantique du code. Un menu est bien une liste de liens pointant vers divers sections du site, non ?

Pour ce qui est de son look, chacun vit sa vit

Le choix de mettre une couleur ici ou la de telle manière ne doit en rien influencer la décision de réaliser ce menu sous forme de liste ou d'autre chose.

a écrit :

ernstein a écrit :
Le choix de mettre une couleur ici ou la de telle manière ne doit en rien influencer la décision de réaliser ce menu sous forme de liste ou d'autre chose.

J' ai dit ça moi ?
Je parlais juste de la possibilité d' enlever une div pour simplifier et alléger le code.
Modifié par easynet4all (04 Oct 2007 - 08:22)

Le code présent dans le tutoriel est celui la :

<ul id="navigation">
	<li><a href="#" title="aller à la section 1">item1</a></li>
	<li><a href="#" title="aller à la section 2">item2</a></li>
	<li><a href="#" title="aller à la section 3">item3</a></li>
	<li><a href="#" title="aller à la section 4">item4</a></li>
	<li><a href="#" title="aller à la section 5">item5</a></li>
</ul>

Heu..... y'a pas de div la non ?

Dans le code css il y a des div : #navigation li et #navigation li a, n' est-ce pas ?

OK...

Tu en saura plus ici
Modifié par ernstein (04 Oct 2007 - 08:35)

oui le mot div n' est pas approprie, alors cela te permet d' eviter ma question. Appelle alors le #navigation li partie de code css ou autrement mais ne donne pas de reponses qui n' ont rien a voir avec mes questions
Modifié par easynet4all (04 Oct 2007 - 08:39)

Bon...

@easynet4all : tu emploies le terme "div" de manière inappropriée, d'où l'incompréhension que tu suscites. "div" est uniquement un élément HTML. Ce n'est pas un synonyme de n'importe quels autres éléments (ici ul et li), ni de "sélecteur CSS" (ici #navigation li et #navigation li a).

Maintenant, l'autre problème: effectivement, pour obtenir uniquement un effet de rendu via CSS, la structure en <ul><li><a...> n'est pas nécessaire.

Mais le but du jeu n'est pas uniquement d'obtenir un effet de rendu CSS. Parmi les autres buts possibles, généralement retenus:
- obtenir un rendu par défaut sans CSS plus "parlant", grâce aux styles par défauts des navigateurs
- obtenir un résultat plus accessible dans diverses aides techniques ou contextes utilisateurs (l'avantage de la "vraie" liste <ul> est que le nombre d'éléments est indiqué dans un lecteur d'écran, par exemple. C'est une information importante pour que l'utilisateur puisse évaluer l'ampleur du menu et la difficulté éventuelle à le parcourir en entier).
- obtenir une structure qui sera plus aisément réexploitable ou transformable automatiquement, parce que plus précise.

Bref:
- s'il s'agit juste d'obtenir une présentation donnée, et rien que cela, sans autre considérations qualitatives... va pour la structure anonyme à base de <div><a...>. C'est le bon vieil HTML de présentation, un peu nouvelle manière.
- si une contrainte particulière empêche d'utiliser la structure la plus précise en <ul><li><a...>, va aussi pour une structure molle, que ce soit <div><a>, ou un tableau de présentation
- sinon, la structure la plus spécifique est considérée comme préférable, parce que plus efficace aux différents points de vue ci-dessus.
Modifié par Laurent Denis (04 Oct 2007 - 08:43)

juste un dernier message pour demander une reponse :
Est-qu' on peut supprimer le selecteur #navigation li et garder juste le selecteur #navigation li a pour simplifier la demarche et alleger le code ?
Merci.