Liste et image

Bonjour,

Voilà j'ai bâti une page de listing avec des listes. Jusque là c'était nickel et tout était bien.

Aujourd'hui on me demande de mettre une icone à fond à droite de chaque ligne de mes listes qui le nécessite.

J'ai essayé d'incorporer un div avec une class spécifique, j'ai essayé par des balises standards type h ou p ou img. Mais rien ne fait.

Donc est-il possible d'avoir sur chaque <li> au bout a droite une image ? si oui comment ?

Les listes sont ici. Regardez dans les e il y a une société qui possède l'icone qui aujourd'hui est juste une image posée à côté du texte.

Merci beaucoup pour votre aide.

bonsoir,

en regardant le code source, tu peux voir

<li class=""><img src="images/icon/greencam.png" alt="Fiche entreprise contenant une vidéo" /> - <a href="?memberId=3">Evos</a></li>

Bonsoir,

Oui je vois, et je ne vois pas

C'est ce que j'ai explqué plus haut. Pour le moment j'ai mis une image a gauche. Ce que j'aimerais (parce qu'on me le demande) c'est d'avoir cette icone toujours collé au côté droit de ma ligne tout en gardant le texte à gauche.

bonjour,
as tu essayer de placer ton image en background a droite avec un padding a droite correspondant a la largeur de ces images ? (dans les <li> ).
a plus

edit
sinon, sans rien changer, applique un float:right; aux image de liste.
Modifié par gcyrillus (14 Dec 2005 - 23:33)

Effectivement, comme je génère tout par code php, je me prenais la tête à manipuler les css avec le code php. Alors que c'était tout simple de créer 2 classes supplémentaires et de mettre une condition supplémentaire

Par contre si dans ma liste, le nom est trop grand, il chevauche l'icone en background. Y-a-t-il un moyen de laisser la le width de la liste mais de mettre à la ligne à partir d'un nombre données de caractères en CSS ?

Je vais le fair en php, mais je suis curieux de savoir si c'est possible ?

Encore merci à vous.
Modifié par plugman (14 Dec 2005 - 23:44)

rebonsoir,
en fait le padding a droite proposé est une marge interieur sur laquelle le texte ou autre element (dans le flux) ne viendra pas s'y superpose.
attention, la valeur du padding s'ajoute a la largeur deja donneés dans le css.(si largeur indiquée est 10px et le padding-right 10px, la largeur totale sera 20px).
Effectivement sans fixer de hauteur a <li>, celle s'etirera selon le nombre de lignes contenues.
bon dev

Je ne me suis pas servis du padding.

J'ai simplement appliqué un url a mon background avec les types center et right.

.bgGreyIcon{
  background: #E4E4E4 url(redcam.png) no-repeat center right;
}
.bgTransIcon{
   background: transparent url(redcam.png) no-repeat center right;
}
.bgGrey{
  background: #E4E4E4;
}
.bgTrans{
   background: transparent;
}

Je gère donc mes background de liste selon 4 cas.

Encore merci.