Css background d'un li au survol

Css background d'un li au survol - HTML/CSS - Programmation

Marsh Posté le 27-12-2006 à 23:22:06    

Bonjour a tous !
 
Voilà mon problème, je tapais quelques lignes de codes (x)html + css et je rencontre le problème suivant :  
pour faire un menu par exemple...
Voila mon code html :  

Code :
  1. <ul>
  2. <li><a href"#">bla bla bla bla</a></li>
  3. <li><a href"#">bla bla bla bla</a></li>
  4. <li><a href"#">bla bla bla bla</a></li>
  5. <li><a href"#">bla bla bla bla</a></li>
  6. </ul>


css :

Code :
  1. .li a:hover{
  2. background-color:#000000;
  3. color:#FFFFFF;
  4. text-decoration:none;
  5. }


 
Avec ce code (que j'ai vraiment simplifié), au survol de la souris, seulement l'arriere plan du texte change et pas toute la cellule li qui fait par exemple 200 pixels de large. Donc comment faire pour que toute la cellule change de couleur (arriere plan) ?
 
ps : je trouve ce (petit) problème tellement bête que je me demande si c'est parce que je suis fatigué ou pas, mais ça fait Une heure et demi que je tente dans tous les sens pour le faire, sans passer par des cellule de tableaux...


Message édité par kl14582 le 28-12-2006 à 21:35:40
Reply

Marsh Posté le 27-12-2006 à 23:22:06   

Reply

Marsh Posté le 28-12-2006 à 07:53:40    

La balise a est de type en-ligne. Ajoute la propriété display:block à celle-ci pour avoir un effet de changement de fond (ou d'autre chose) sur la totalité de l'élément qui contient a (en l'occurence, li).

Reply

Marsh Posté le 28-12-2006 à 11:20:26    

Ah bah voila, c'est donc ça, je te remerice. En plus je connaisais l'element display block, in-line etc... en tout cas merci beaucoup !!
 
Autre petite question, est-ce possible de preciser que le changement d'arriere plan de mon li se fasse vraiment en arriere plan par rapport a une image qui, elle ausi est en arriere plan de mon li ?
 
Concretement, j'ai une petite image en gif en arriere plan de mon li et je voudrais que le changement de couleur au survol de la souris se fasse en dessous de l'image et non par dessus. je ne sais pas si j'ai bien reussit a me faire comprendre là ?

Reply

Marsh Posté le 28-12-2006 à 13:33:38    

Bien sur : un background reste un background.

Reply

Marsh Posté le 28-12-2006 à 17:06:13    

c'est bon j'ai réussit, il suffisait de specifier l'image d'arriere plan sur le li:hover et non sur le li...  
;)


Message édité par kl14582 le 28-12-2006 à 21:38:52
Reply

Marsh Posté le 28-12-2006 à 21:39:05    

Par contre sous IE6, le lien se fait que sur le texte mais pas sur toute la longueur de la cellule alors que Firefox lui marche nickel...  
Comment ça se fait ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed