Ludo29 Posté 13 Janvier 2008 Partager Posté 13 Janvier 2008 (modifié) 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 13 Janvier 2008 Partager Posté 13 Janvier 2008 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>... Lien vers le commentaire Partager sur d’autres sites More sharing options...
karnabal Posté 13 Janvier 2008 Partager Posté 13 Janvier 2008 Pourquoi ne placerai-tu pas cette séparation via une image de fond ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
pif_125 Posté 13 Janvier 2008 Partager Posté 13 Janvier 2008 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Ludo29 Posté 13 Janvier 2008 Auteur Partager Posté 13 Janvier 2008 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
SpeedAirMan Posté 13 Janvier 2008 Partager Posté 13 Janvier 2008 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/ Lien vers le commentaire Partager sur d’autres sites More sharing options...
karnabal Posté 13 Janvier 2008 Partager Posté 13 Janvier 2008 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 ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Ludo29 Posté 14 Janvier 2008 Auteur Partager Posté 14 Janvier 2008 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant