[Résolu] Lien sur un <li> carré

Bonjour tout le monde,

Je viens solliciter votre aide car je n'ai trouvé de réponse à un problème qui me parrait simple nulle part.

J'ai :

<div id="menuboutique">
<ul>
<li class="accueil"><a href="index.php" title="Aller &agrave; l'accueil" accesskey="1">ACCUEIL</a></li>
</ul>
</div>

#menuboutique ul li {
	font-size: 70%;
	display: inline;
	margin: 80px 15px 0 15px;
	padding: 10px 10px 65px 10px;
	border: 1px solid #03517f;
}
#menuboutique ul li.accueil {
	background-image: url("images/sources/menu-accueil copie.jpg");
}
#menuboutique ul li:hover {
	background: #72b8e1;
}

Cela donne donc un carré avec un hover qui marche plus ou moins bien selon les navigateurs.
Mais ce qui serait intéressant serait de mettre le lien sur le <li> entier, et non pas uniquement sur le texte... mais là, ça coince. Décaler le <a> ne marche pas, et j'ai des doutes quant à l'utilisation d'un onMouseHover...

Vous auriez une idée ?

Merci
Modifié par Alcarion (06 Apr 2008 - 19:33)

Salut Alcarion ,

Alcarion a écrit :

Mais ce qui serait intéressant serait de mettre le lien sur le <li> entier, et non pas uniquement sur le texte...

Ben non, pas vraiment ! Le hover ne fonctionnera partout (sous-entendu sur IE6 également) que s'il est associé au lien <a> et pas au <li>. La solution en général consiste à passer le <a> en display:block; afin de pouvoir lui donner les dimensions de son élément conteneur.

Et si ça ne convient pas dans ton cas il faudra effectivement regarder du côté de Javascript !

A+

Bonjour,

1. Passer le lien dans le li en display: block;
2. ne pas utiliser de padding pour le li, mais utiliser ce padding sur le lien lui-même.

Un exemple de menu simple utilisant ce principe:

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul#menu li {
	float: left;
	margin: 0 10px;
}
ul#menu li a {
	display: block;
	padding: 15px;
	border: 1px solid black;
	color: black;
	background: white;
}
ul#menu li a:hover,
ul#menu li a:focus {
	color: white;
	background: black;
}

Ce n'est bien sûr qu'un exemple et pas une solution exacte à ton problème.

Ok, le coup de padding dans le <a> marche du tonerre, j'ignorais qu'on pouvait l'appliquer dessus.

Merci