Comment en hover prendre une case entière ?

Résolu

petit bibi Messages postés 250 Date d'inscription Statut Membre Dernière intervention -
d - 16 mai 2012 à 08:06

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 ;

}

Afficher la suite

A voir également:

Comment en hover prendre une case entière ?
Capture d'écran page entière - Guide
Prendre une photo avec son pc - Guide
Prendre une photo avec son mac - Guide
Comment prendre une capture d'écran sur samsung - Guide
Aller à la ligne dans une case excel - Guide

12 réponses

Réponse 1 / 12

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

.menu li a:hover, #menu li a:focus, #menu li a:active
{
background-image:url(fond.gif);
text-decoration: none ;
display:block;
}

Réponse 2 / 12

petit bibi Messages postés 250 Date d'inscription Statut Membre Dernière intervention 4

j'ai déjà essayé la fonction display:block; mais ça n'a rien changé :(

Réponse 3 / 12

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

.menu li {
background-image:url(fond.gif);
}

.menu a:hover, #menu a:focus, #menu a:active
{
text-decoration: none ;
display:block;
}

essayes comme çà

Réponse 4 / 12

petit bibi Messages postés 250 Date d'inscription Statut Membre Dernière intervention 4

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

Réponse 5 / 12

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

met le code html et explique a quoi dois resembler la liste

si il y a du code pour ul tu met aussi

Réponse 6 / 12

petit bibi Messages postés 250 Date d'inscription Statut Membre Dernière intervention 4

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%;
}

Réponse 7 / 12

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

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;
}

Réponse 8 / 12

petit bibi Messages postés 250 Date d'inscription Statut Membre Dernière intervention 4

Malheureusement pas de changement. En tout cas je te remercie de te pencher sur mon problème.

Réponse 9 / 12

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

.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 çà ??

Réponse 10 / 12

petit bibi Messages postés 250 Date d'inscription Statut Membre Dernière intervention 4

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.

Réponse 11 / 12

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

donc la solution , c'est de bien séparer le css du li et du a

Réponse 12 / 12

je vois pas les reponses??

Discussions similaires

[C] Extraire partie entière et partie décimal

"prendre un instantané" disparu version gratuite A Reader

fonction du type "CASE" dans excel

Problème colissimo suivi

"Cet utilisation a été adopté" sur Adopte Un Mec

Votre réponse

Discussions similaires