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 -
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
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:
- Menu avec bordure
- Menu déroulant excel - Guide
- Bordure de page word - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
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 ?
<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;
}