Discussion :

[mdr_cedrick]

Bonjour à tous
j'utilise un système dit "<ul><li>" pour mettre en place le menu d'un site d'un client
le menu s'affiche parfaitement
afin d'embellir ce dernier, le client veut une ligne de couleur entre chaque élément du menu (du style <hr /> mais je remplace par un <div> avec du css)
le problème c'est que maintenant mon menu n'est plus W3C ce qui n'est pas le souhait de mon client.
je vous copie le code envoyé par le navigateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li class="element">
<a href="index.php?page=23">Edition</a>
</li>
<div class="hr_menu2"></div>
<li class="element">
<a href="index.php?page=22">Vidéo</a>
</li>
<div class="hr_menu2"></div>
<li class="element">
<a href="index.php?page=30">Catalogues Interactifs</a>
</li>
<div class="hr_menu2"></div>
<!-- etc etc -->
</ul>

Il ne veut pas de mon <div> entre chaque <li></li>
si ca vous intéresse mon div à pour css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
{
	border-bottom:1px solid #6DD1E8;
	margin:8px 0px 8px 20px;
	width:143px;
	font-size:0px;
}

si vous avez des idées afin de rentre cela W3C, en sachant que j'écarte la possibilité de mettre un border-bottom sur mon <li> car on ne peut pas le gérer aussi bien

en vous remerciant par avance

[Erwan31]

Bonjour,
en effet les éléments UL ne peuvent avoir comme enfant direct que des LI.
Pourtant le border-bottom aurait été la solution idéale, pourquoi ça te pose problème?
Si tu es trop limité par l'apparence des border, ne pas oublier la solution du background CSS

[mdr_cedrick]

je viens de trouver une solution plus simple encore !
plus que de mettre un <div class="hr_menu2"></div>
je remplace par <li class="hr_menu2"></li>
et le résultat + un peu de css reviens au même et là plus de soucis au niveau du W3C
merci de ton aide Erwan

[Erwan31]

Ce n'est pas une solution idéale en terme d'ergonomie dans certains contextes d'utilisation (dans les navigateurs textes ou plus généralement en l'absence de couche de présentation (CSS), cela crée une bullet vide, ce qui peut porter à confusion. Pour un logiciel de synthèse vocale, le nombre d'item annoncé ne correspondra pas au nombres d'item (LI) réels.