[Resolu] Separation dans un menu

bonjour,
je suis sur un menu horizontal. entre les diferents liens du menu j'ai mis une barre verticale (sous forme d'image.)
j'ai donc dans mon css utilisé :

background: url(images/barre-menu.png) center right no-repeat;

mon petit soucis est que en fesant comm ça, j'ai donc également une barre en fin de menu (au dernier lien) que je ne souhaite pas voir.

Comment faire disparaitre cette derniere barre ?

voici mon css :

/* Le Menu du site */
#menuho ul{
margin: 0;
padding: 0;
float: left;
width: 800px;
background: url(images/bg-menu.jpg) repeat-x top;
}

* html #menuho ul{ /*règle pour IE seul*/
width: 99%;
}

#menuho ul li{
display: inline;
}

#menuho ul li a{
float: left;
color: #191205;
padding: 0 12px;
text-decoration: none;
font-family:"Times New Roman", Times, serif;
font-size: 16px;
height:45px;
line-height: 45px;
background: url(images/barre-menu.png) center right no-repeat;
}

#menuho ul li a:visited{
color: black;
}

#menuho ul li a:hover{
color: black;
background-color: #ffe84f;
}

Modifié par fabrice88 (28 Jul 2009 - 12:25)

Salut,

Il te suffit d'ajouter une classe à la fin de ton dernier li du type

<li class="dernier"></li>

puis dans ton css tu mets :

#menuho ul li a.dernier{ 

background-image:none; 
}

Ça devrait suffire

Une class pour un seul cas ? Un id=dernier me semble plus approprié...

Bob33 a écrit :
Une class pour un seul cas ? Un id=dernier me semble plus approprié...

Aucune importance, parfois on a besoin de plusieurs fois du premier/dernier éléments dans une page web donc comme je ne connais pas le reste de la page, je préconise la classe.

bonsoir,
j'ai essayé avec background-image:none; mais j'ai toujours mon image (ma barre) qui s'affiche en dernier.

Re',

il faudrait voir ton code.

Au passage s'il s'agit d'une simple barre verticale il suffit d'utiliser border plutôt qu'une image.

voici mon code css :

/* Le Menu du site */
#menuho ul{
margin: 15px 0 1px 0;
padding: 0;
float: right;
width: 655px;
background: url(images/bg-menu.jpg) repeat-x top;
}

* html #menuho ul{ /*règle pour IE seul*/
width: 99%;
}

#menuho ul li{
display: inline;
}

#menuho ul li a{
float: left;
color: #191205;
padding: 0 24px;
text-decoration: none;
font-family:"Times New Roman", Times, serif;
font-size: 16px;
height:45px;
line-height: 45px;
background: url(images/barre-menu.png) center right no-repeat;
}

#menuho ul li a:visited{
color: black;
}

#menuho ul li a:hover{
color: black;
background-color: #ffe84f;
}

#menuho ul li a.dernier{   background-image:none;  }

et le code html :

<div id="menuho">
<ul>
<li><a href="#" title="xxx">Présentation</a></li>
<li><a href="#" title="xxx">Mes références</a></li>
<li><a href="#" title="xxx">Actualités</a></li>
<li><a href="#" title="xxx">Cadeaux</a></li>
<li><a href="#" title="xxx">Contact</a></li>        
<li class="dernier"><a href="#" title="xxx">Liens</a></li>
</ul>
</div><!-- fin du menuho -->

fabrice88 a écrit :

voici mon code css :

/* Le Menu du site */
....
#menuho ul li a.dernier{   background-image:none;  }

et le code html :

<div id="menuho">
<ul>
...        
<li class="dernier"><a href="#" title="xxx">Liens</a></li>
</ul>
</div><!-- fin du menuho -->

En css, tu cibles un lien portant la classe "dernier" dans une liste d'item...
En html, tu donnes cette classe au dernier li...
Le navigateur n'a aucune raison d'enlever le background du dernier lien de ta liste, puisque rien ne lui indique de la faire...CQFD

Comme suggéré par Heyoan, si l'image n'est pas très élaborée, une bordure pourrait éventuellemnt suffire (un pipe à la limite : | ) on pourra également se tourner vers la pseudo-classe :last-child (qu'IE6 ne gère pas si je me souviens bien...) ou plus généralement vers les sélecteurs css
Cdt,
Sylvain
Modifié par 6l20 (28 Jul 2009 - 12:10)

En repassant : Un petit lien pour tester le support des sélecteurs css par votre navigateur

Cdt,
Sylvain
Modifié par 6l20 (28 Jul 2009 - 12:10)

6l20 a écrit :
on pourra également se tourner vers la speudo-classe :last-child (qu'IE6 ne gère pas si je me souviens bien...)

Si ce n'était qu'IE6…
(IE8 ne l'implémente toujours pas)

Benjamin D.C. a écrit :

Si ce n'était qu'IE6…
(IE8 ne l'implémente toujours pas)

Oui, je me suis aperçu de cela
(je tentais de "rattrapper le coup" avec le lien de test... )

oui effectivement sa fonctionne maintenant en placent la class au bon endroit.
merci
Modifié par fabrice88 (28 Jul 2009 - 12:24)

fabrice88 a écrit :
ma barre n'est pas un simple trait.
j'ai modifié mon css pour que se soit le dernier li qui soit prie en compte

#menuho ul li.dernier{   background-image:none;  }

mais la syntaxe ne doit pas etre bonne car sa ne fonctionne tjs pas.

<li><a class="dernier" href="#" title="xxx">Liens</a></li> 

Et comme cela ?...(en gardant les premières déclarations de styles)
Modifié par 6l20 (28 Jul 2009 - 12:27)