28220 sujets

CSS et mise en forme, CSS3

Bonjour,

En créant un menu avec bordure inférieur, j'ai un problème au moment du hover.

En effet, un décalage se forme, étant donné que je supprime ma bordure.
voici le code

a:link {
	color: #E94F1A;
	text-decoration:none;
	border-bottom: #E63324 1px dotted;

}
a:visited {
	color: #E94F1A;
	text-decoration:none;
	
}
a:hover {
	color: #E63324;
	text-decoration:none;
	border-bottom: #E63324 1px dotted;
	
}
a:active {
	color: #E94F1A;
	text-decoration:none;
}


et mon menu

#sousmenu {
	width: 194px;
	height: auto;
	float: right;
	margin: 10px 0 0 0;
	padding: 0;
	text-decoration:none;
}
.element_menu {
	padding: 0;
	color: #ffffff;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
	position: relative;
	float: right;
	
}
/* Quelques effets sur les menus */
.element_menu h3 {
	color: #9523E7;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight:bold;
	padding: 0;
	margin: 0;
	top: -10px;
	position: relative;
	letter-spacing: 0.2em;
	text-align: center;
}
.element_menu ul {
/* Toutes les listes  Ô¡ puces se trouvant dans un menu */
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0 0 5px 2px;
	text-decoration:none;
}
.element_menu a {
/* Tous les liens se trouvant dans un menu */
	display: block;
	padding: 3px 0px 3px 0px;
	width: 180px;
	border-bottom: 1px solid #ffffff;
	border-left: none;
	color: #E94F1A;
	font-weight: bold;
	text-align: center;
	text-decoration:none;
}
.element_menu a:hover
/* Quand on pointe sur un lien du menu */
 {	background-color:#E9EAE9;
	color: #E63324;
	text-decoration:none;
	border: none;
	
}

et html

<div id="sousmenu">
        <!-- sousmenu-->
        <div class="element_menu">
          <h3>ACCUEIL</h3>
          <ul>
            <li>
            <a href="#" accesskey="1">hgfhgf</a></li>
            <li>
            <a href="#" accesskey="2">hgfhgfhgf</a></li>
            <li>
            <a href="#" accesskey="3">hgf</a></li>
            <li>
            <a href="#" accesskey="4">ghf</a></li>
          </ul>
        </div>
      </div>
      <!-- fin sousmenu-->


merci de votre aide Smiley biggrin
Modifié par loicdu (16 Aug 2005 - 15:47)
Bonjour.
Tu pourrais mettre un border-bottom de la même couleur que l'arrière plan ( au lieu de blanc tu mets #E9EAE9 ) dans ta règle ".element_menu a:hover". Ainsi, plus de décalage et ta bordure semblera disparaître au survol.
A+
Administrateur
Guiom a écrit :
Oui ou juste un souligné, enfin si c'est l'effet que tu veux, text-decoration:underligne;

underline Smiley cligne