Listes à puces

[Ludo29]

Bonjour,

En fait voila, j'ai créé une liste à puce pour mon site et je l'ai mise de manière inline (pour mon menu horizontal du haut)

et j'aimerais séparer chaque lien par un pipe ( | )

Voici mon code html et css:

 <div id="menu">
 <ul>
		   <li><a href="page4.html">Accueil</a></li>
		   <li><a href="page5.html">Forum</a></li>
		   <li><a href="page6.html">Bases</a></li>
		   <li><a href="page6.html">Exercices</a></li>
	   </ul>
</div>

#menu ul
{
padding-top: 10px; /* Pour centrer en hauteur sur la barre */
text-align: center; /* Aligner le texte horizontalement sur la barre */
}

#menu li
{
display: inline; /* Disposer la liste à puces de manière horizontale */
list-style-type: none; /* Aucune image */
padding-right: 20px; /* Les séparer */
}

C'est peut-être tout bête, mais bon...

Merci d'avance,

Ludo29

Modifié 13 Janvier 2008 par Ludo29

[Sarc]

Bonjour,

Il me semble que la meilleure solution pour ça est de mettre les | dans ton code HTML directement, avant les liens, mais dans les <li>...

[karnabal]

Pourquoi ne placerai-tu pas cette séparation via une image de fond ?

[pif_125]

Tu peux les séparer avec une bordure de droite exemple :

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000000;

par contre il faut mettre a ton dernier li un border:none; pour qu'il n'y ai pas de séparation à la fin de ta liste.

[Ludo29]

Bonjour,

Il me semble que la meilleure solution pour ça est de mettre les | dans ton code HTML directement, avant les liens, mais dans les <li>...

Merci sarc, j'ai utilisé cela, et puisque le pipe collait au texte (ce qui est normal), j'ai ajouté 4-5 espaces juste après.

Merci aussi aux autres d'avoir répondu, j'essayerai.

[SpeedAirMan]

Tu peux les séparer avec une bordure de droite exemple :

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000000;

par contre il faut mettre a ton dernier li un border:none; pour qu'il n'y ai pas de séparation à la fin de ta liste.

C'est en effet la meilleure solution selon moi.

Des exemples de menus en listes ici : http://css.maxdesign.com.au/listamatic/

[karnabal]

C'est une des solutions, mais j'en proposais une qui soit la plus fidèle possible (graphiquement) au résultat obtenu grâce à l'usage du symbole |.

Pas de réponse à ma question Ludo29 ?

[Ludo29]

Désolé, je ne me connecte pas souvent à cause du boulot,

J'ai à peu près essayer toutes les méthodes que vous m'avez proposés, et elles fonctionnent toutes bien.

PS: Karnabal, j'ai essayé ça aussi.

Merci à tous pour l'attention que vous avez prêtée au sujet,

Ludo29