[Résolu] Séparateurs verticaux dans une liste horizontale

Bonjour,

J'aimerais mettre de séparateurs verticaux répartis entre les liens de ma barre de navigation horizontale. Je voudrais que ces séparateurs soient environ de 2 px de large, de haut en bas et qu'ils soient transparents (qu'ils permettent de voir le fond de l'image en dessous).

La barre de liens est fait d'une liste mais je ne sais pas comment mettre des éléments transparents entre les <li>.

Voici les liens de la page et de la css :
http://connaisances.org/site2/
http://connaissances.org/web.css

Est-ce que quelqu'un une solution ?

Merci pour votre aide
GJ

P.S. : Je viens tout juste de découvrir ce forum. Ça fait plusleurs heures que je passe à lire des contenus très intéressants. Bravo à tous!
Modifié par gj123 (26 Apr 2006 - 03:53)

Bonjour et bienvenue,

Un détour par pompage.net et en particulier par l'article sur les listes s'impose. Remarque: les liens de ton message ne fonctionnent pas.

Bon courage
Modifié par geba (25 Apr 2006 - 07:34)

Mes excuses pour les urls.

Corrigées :
http://connaissances.org/site2/
http://connaissances.org/site2/web.css

J'ai fais le détour conseillé par geba sur pompage.net. J'ai essayé ces conseils sur mon cas et ça ne fonctionne pas très bien.

Dans IE j'ai réussi à mettre des séparateurs, c'est une chose. Je n'ai pas trouvé la façon de les mettre transparents. J'ai même essayé de les mettre en rouge et il y a toujours la couleur de mes liens texte qui apparaissent en gris à la place. En ligne présentement il est "border-left: solid #ff0000" mais c'est toujour du gris par dessus.

J'ai aussi essayé d'enlever la première bordure à gauche avec une "class" comme le propose pompage.net et ça ne fonctionne pas.

Pour Firefox, rien ne fonctionne.

Je dois faire une erreur quelque part mais je ne sais pas où

Merci.

Salut,

Il est impossible de mettre des bordures en transparent. En effet, cette valeur est disponible que pour la propriété background.
Dans ton cas, pour séparer les liens, le mieux est d'utiliser les marges. En effet, il suffit d'attribuer une marge (gauche ou droite) de 2px à chaque élément de ta liste.

Voici le code pour le menu :

#nav {
        position: relative;
	margin: 0;
	padding: 0;
	height: 0.9em;
	top: 120px;
	z-index: 2;border-left: 5px solid #ff000;
}
#nav li {
	list-style-type: none;
	float: right;
	margin-left: 2px;
	line-height: 16px;
}		
#nav li a { 
	text-decoration: none; 
	color: #cdcdcd;
	background-color: #666;
	padding: 0px 28px 0px 15px;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	border-left: 3px solid #ff000;
	
}
#nav li a.premier { 
	margin-left: 0;
}

J'ai remplacer le display: inline par float: right dans le bloc #nav li. J'ai également supprimer les propriété redondantes qu'il y avait dans le bloc #nav li a.premier.

Voila, j'éspère que ca sera bon .

Super!

Un gros merci ymhotepa. Merci en plus d'avoir fait le nettoyage que je n'ai su faire.

GJ