Comment en hover prendre une case entière ?
Résolu
petit bibi
Messages postés
267
Statut
Membre
-
d -
d -
Bonjour,
Je me fais un petit site et dans mon menu quand je passe la souris il n'y a que la zone du lien qui réagit mais pas toute la case.
Je sens que c'est un problème classique... mais je n'arrive pas à trouver la solution.
Voici mon css du hover :
.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
}
Je me fais un petit site et dans mon menu quand je passe la souris il n'y a que la zone du lien qui réagit mais pas toute la case.
Je sens que c'est un problème classique... mais je n'arrive pas à trouver la solution.
Voici mon css du hover :
.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
}
12 réponses
-
.menu li a:hover, #menu li a:focus, #menu li a:active { background-image:url(fond.gif); text-decoration: none ; display:block; } -
j'ai déjà essayé la fonction display:block; mais ça n'a rien changé :(
-
.menu li { background-image:url(fond.gif); } .menu a:hover, #menu a:focus, #menu a:active { text-decoration: none ; display:block; }
essayes comme çà -
En .menu li j'ai déjà un background-image qui est celui du fond permanent des boutons. J'ai quand même testé en rajoutant l'autre, celui du hover mains ça ne change rien.
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
met le code html et explique a quoi dois resembler la liste
si il y a du code pour ul tu met aussi -
J'ai mis des background-image mais cela pourrait être des background-color. J'ai testé cela ne change rien.
Voilà le code html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>titre</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="../AC_RunActiveContent.js" language="javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design11.css"/>
</head>
<body>
<div class="titre">
<h1>gros titre</h1>
<h2>petit titre</h2><br>
</div>
<div class="contenu">
<div class="menu">
<ul>
<li class="logo_menu2"><img src="logo_menu2.jpg" /></li>
<li><a href="#" title="111 111111111">111 11111111</a></li>
<li><a href="#" title="222 22222 22 222">222 22222 22 222</a></li>
<li><a href="#" title="33333">33333</a></li>
<li><a href="#" title="444444444444">444444444444</a></li>
<li><a href="#" title="5555555 5555555555">5555555 5555555555</a></li>
<li><a href="#" title="66 666666">66 666666</a></li>
<li><a href="#" title="7777777777">7777777777</a></li>
<li><a href="#" title="8888888">8888888</a></li>
</ul>
</div>
</div>
</body>
</html>
et le css :
.titre
{
font-family:"Times New Roman", "Arial Black", Arial, Verdana, serif;
text-align:center;
width:1100px;
margin:auto;
}
.contenu
{
width: 1100px;
margin:auto;
}
.menu
{
margin-left:10%;
}
.menu li
{
float: left ;
border: 1px solid #000000 ;
background-image:url(degrade_bleu5.gif);
font-size:15px;
list-style: none ;
padding:3px;
margin-left:3px;
}
.menu li a
{
color: #fff ;
text-align: center ;
text-decoration: none ;
}
.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
display:block;
}
.menu li.logo_menu2
{
background-image:none;
border: none ;
margin-top:-2%;
} -
donc display:block; tu le met dans .menu li a
.menu { margin-left:10%; } .menu li { float: left ; border: 1px solid #000000 ; background-image:url(degrade_bleu5.gif); font-size:15px; list-style: none ; } .menu li a { color: #fff ; text-align: center ; text-decoration: none ; display:block; padding:3px; margin-left:3px; } .menu li a:hover, #menu li a:focus, #menu li a:active { background-image:url(fond.gif); text-decoration: none ; } menu li.logo_menu2 { background-image:none; border: none ; margin-top:-2%; padding:3px; margin-left:3px; } -
Malheureusement pas de changement. En tout cas je te remercie de te pencher sur mon problème.
-
.menu { margin-left:10%; } .menu li { float: left ; border: 1px solid #000000 ; background-image:url(degrade_bleu5.gif); font-size:15px; list-style: none ; } .menu a { color: #fff ; text-align: center ; text-decoration: none ; display:block; padding:3px; margin-left:3px; } .menu a:hover, #menu a:focus, #menu a:active { background-image:url(fond.gif); text-decoration: none ; } .menu li.logo_menu2 { background-image:none; border: none ; margin-top:-2%; padding:3px; margin-left:3px; }
et comme çà ?? -
C'est bon !!! Alors toi t'es un boss. J'ai juste changé une petite bidouille mais grâce à toi je me sors de ce casse tête.
Merci encore. -
donc la solution , c'est de bien séparer le css du li et du a
-
