Menu avec bordure

Résolu/Fermé
petit bibi Messages postés 250 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 3 avril 2023 - 10 sept. 2010 à 14:02
petit bibi Messages postés 250 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 3 avril 2023 - 12 sept. 2010 à 13:53
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 23647 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 3 octobre 2024 2 382
10 sept. 2010 à 18:12
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 samedi 21 août 2010 Statut Membre Dernière intervention 3 avril 2023 4
10 sept. 2010 à 20:07
maintenant j'ai un bord à droite ET a gauche :-)
0
bg62 Messages postés 23647 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 3 octobre 2024 2 382
11 sept. 2010 à 10:04
donc erreur de css ...
0
petit bibi Messages postés 250 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 3 avril 2023 4
11 sept. 2010 à 10:31
merci pour ton aide, j'hésite quand même à mettre résolu :-)
0
petit bibi Messages postés 250 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 3 avril 2023 4
11 sept. 2010 à 13:37
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 samedi 21 août 2010 Statut Membre Dernière intervention 3 avril 2023 4
12 sept. 2010 à 09:59
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