Deux liens avec un background-image dans chaque lien

Bonjour,

J'ai un souci qui m'a pris la tête tout l'après-midi et je n'ai toujours pas la solution !
Voici un bout de mon code :

<ul>
      <li>
        <a class="sub" href="">Incomer</a>
        <a class="link_facility" href=""></a>
      </li>
      <li>
        ...
      </li>
</ul>

J'aimerais mettre une image de fond sur le a portant la class "sub" et une autre image de fond sur le a portant la class "link_facility".

Voici donc ce que j'ai fait en CSS :

ul li a.sub
{
	color: black;
	text-decoration: none;
	width: 100%;
	display: block;
	margin: 0;
	background: url(../images/fleche_enroule2.png) no-repeat;
	background-position: 98%;
}

ul li a.link_facility
{
	width: 100%;
	display: block;
	margin: 0;
	background: url(../images/picto_link.png) no-repeat;
	background-position: 90%;
}

Malheureusement, il n'y a qu'une image sur les deux qui apparaît (la 1ère)!

Comment faire en sorte d'afficher les deux images ?

Merci !
Modifié par Yuuko (10 Oct 2012 - 16:11)

Salut,

Tes éléments a sont déclarés en display:block (jusqu'ici tout va bien), ils prennent donc toute la largeur, seulement quand un élément de type block ne posséde pas de hauteur, sa hauteur est égale à 0, du coup, le premier s'affiche car il y a du texte dedans qui lui force une hauteur, mais le 2eme est vide donc il a une hauteur de 0.

Solutions:

-Mettre du texte dans les 2
-mettre une hauteur en CSS

Je tiens à rajouter que tu peux déclarer les abscisses et les ordonnées dans ton background position, ça mange pas de pain.