Discussion :

[ketzaldev]

Bonjour,

Sur Firefox:

Je suis en train de faire une liste, mais je ne comprends pas le fonctionnement du css.

Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id=category-content>
  <ul>
    <li>...</li>
    <li>
      <a href="http://test" target="_blank" class="bookmark-id">Test1</a>
      <a href="?edit"><img src="images/edit.png" border=no style="float:right;padding-top:5px;padding-left:5px;"/></a>
      <a href="?delete"><img src="images/delete.png" border=no style="float:right;padding-top:5px;padding-left:5px;"/></a>
    </li>
    <li>...</li>
  </ul>
</div>

le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#category-content ul li:hover{
	background-color:#DDD;
}

Lorsque je passe la souris sur la ligne, elle se met dans la couleur désirée, c'est parfait.

Lorsque je passe la souris sur les images en bout de ligne, la couleur de survolement s'en va, et c'est la case du dessus qui devient colorée?

Savez vous pourquoi, et comment régler ce problème?
Merci

[ketzaldev]

Petite rectification:

En fait, ce que je ne voyais pas, vu que j'ai plusieurs lignes dans la liste et que je n'avais pas mis les images sur toutes les lignes, c'est que les images sont décalées d'une ligne vers le bas.

Comment faire dans ce cas pour insérer une image dans un li, et pour qu'elle soit dans la même ligne que le texte?

[ketzaldev]

J'utilisais le "display:block", qui faisait un mauvais comportement.

En enlevant ce display, le texte n'est pas actif sur l'ensemble de la ligne, mais les boutons se placent bien. C'est un bon compromis.