28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Après quelques essais infructueux, je n'arrive pas à faire en sorte que la couleur de fond au survol d'un lien dans une liste li, occupe tout l'espace de la zone de menu sans se limiter au texte.

Le résultat actuel est visible dans le menu de gauche à l'adresse :
http://www.magix.fr/new/tours-salon-scene/tours-salon-scene-rubriques1.htm
et j'aimerais que le fond rouge aille de gauche à droite de la zone en dégradé.

La liste se présente de la manière suivante :

    <ul id="menugauche">
      <li class="liniv1"><a href="#">CARTOMAGIE</a></li>
      <li class="liniv1"><a href="#">CLOSE-UP</a></li>
      <li class="liniv1"><a href="#">SALON/SC&Egrave;NES</a></li>
      <li class="liniv2"><a href="tours-salon-scene-tours1.asp">Tours</a></li>
      <li><a href="#">Grandes illusions</a></li>
      <li class="liniv1"><a href="#">ACCESSOIRES</a></li>
      <li class="liniv1"><a href="#">TOURS DIVERS</a></li>
      <li class="liniv1"><a href="#">LIVRES</a></li>
      <li class="liniv1"><a href="#">DVD FR</a></li>
      <li class="liniv1"><a href="#">DVD US</a></li>
      <li class="liniv1"></li>
    </ul>


et le CSS associé :

[/code]
/* Caractéristiques Menu gauche */

#menugauche {
	list-style-type: none;
	margin: 0px;
	padding:0px;
	display: block;
}

#menugauche li.liniv1 {
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 2px;
	display: block;
	/*text-align: center;*/
}

#menugauche li.liniv2 {
	font-size: 1em;
}

#menugauche li.liniv3 {
	font-style: italic;
	font-size: 0.8em;
	margin-left: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#menugauche a {
	margin: 0px;
	color: Black;
	text-decoration: none;
}
#menugauche a:hover {
	color: white;
	background-color: #CC0033;
}




Merci de toute aide !
Modifié par Blue James (19 Jul 2006 - 11:30)
Salut,

C'est normal, <a> est une balise en ligne, sa taille est en fonction de ce qu'elle contient : là c'est le texte.

Je pense que tu devrais pour l'effet recherché, passer tes <a> en


display :block


Et là tu pourras leurs donner des dimensions.
Quel nul !! (moi bien sur... Smiley confused )

J'avais mis les <li> en

display: block;


et pas les <a>

et maintenant ça marche !!

Merci beaucoup !