Menu avec bordure

Résolu
petit bibi Messages postés 250 Date d'inscription   Statut Membre Dernière intervention   -  
petit bibi Messages postés 250 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Dans mon menu horizontal j'ai défini une bordure transparente de 1px juste à droite de chaque bouton (border-right: 1px solid transparent; )

Sur le dernier bouton je désire ne pas lui mettre de bordure à sa droite.

Est il possible de mettre un css annulant cet effet transparent pour me faire gagner le 1px qui me manque pour aller au bout et enlever ce petit trait blanc que vous pouvez voir sur la photo du lien ?
La mer que vous voyez est le background. Le petit trait est juste à droite de contact et il m'embête bien ! :)

http://cjoint.com/data/jkobRhmpOO.htm

Merci pour vos réponses



A voir également:

1 réponse

bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
et si tu mets dans ta css une bordure à gauche pour chaque onglet ... le dernier n'en aura pas à droite ...
:-)
0
petit bibi Messages postés 250 Date d'inscription   Statut Membre Dernière intervention   4
 
maintenant j'ai un bord à droite ET a gauche :-)
0
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
donc erreur de css ...
0
petit bibi Messages postés 250 Date d'inscription   Statut Membre Dernière intervention   4
 
merci pour ton aide, j'hésite quand même à mettre résolu :-)
0
petit bibi Messages postés 250 Date d'inscription   Statut Membre Dernière intervention   4
 
Chaque onglet à cela,

html:
<li><a href="#">Contact</a></li>

css:
#menu li
{
border-right: 1px solid transparent ;
}

Est il possible de mettre un code css juste pour le bouton contact ?
0
petit bibi Messages postés 250 Date d'inscription   Statut Membre Dernière intervention   4
 
Je vais vous mettre le code du menu en entier au cas où ça donne une idée à quelqu'un car je suis toujours bloqué :(

<div class="contenu">
<ul id="menu">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">2</a>
<ul>
<li><a href="#">1998</a></li>
<li><a href="#">1999</a></li>
<li><a href="#">2000</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul>
<li><a href="#">1999</a></li>
<li><a href="#">2000</a></li>
<li><a href="#">2002</a></li>
</ul>
</li>
<li>
<a href="#">5</a>
<ul>
<li><a href="#">2004-2005</a></li>
<li><a href="#">2005-2006</a></li>
<li><a href="#">2006-2007</a></li>
<li><a href="#">2008-2009</a></li>
<li><a href="#">2009-2010</a></li>
</ul>
</li>
<li>
<a href="#">6</a>
<ul>
<li><a href="#">Quizz n°01</a></li>
<li><a href="#">Quizz n°02</a></li>
<li><a href="#">Quizz n°03</a></li>
</ul>
</li>
<li>
<a href="#">Les alentours</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>

et le css de .contenu et de .menu

.contenu
{
z-index:auto;
width: 1100px;
margin: auto;
text-align : center;
font-family:"Times New Roman", "Arial Black", Arial, Verdana, serif;
background-color:#fff;
min-height:600px;
}

#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défault de la liste */
line-height : 21px; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-size : 14px; /* hauteur du texte */
z-index:20;
}

#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background-image:url(fond_bouton_menu_horizontal.gif); /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défault des liens (la pluspart du temps = souligné) */
width : 136.5px; /* largeur */

}

#menu li /* Elements des listes */
{
float : left;
/* pour ie qui ne reconnait pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparante à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
width:120px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoi loin du champ de vision */
z-index:20;
font-size : 11px; /* hauteur du texte : 10 pixels */
}


#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparante en haut de chaque élément */
}

#menu li ul ul
{
margin : -22px 0 0 111px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */
/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}

/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparante sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #fff; /* On passe le texte en noir ... */
background-image:url(fond_bouton_menu_horizontal_hover.gif); /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug */
}



a
{
text-decoration: none;
color: #ae0000;
}

a:hover
{
font-weight: bold;
}

#menu li.logo_menu
{
background-image:none;
border: none ;
margin-top:-2%;
padding:3px;
margin-left:3px;
}
0