Images alternées pour liste à puces

[Gregor]

Bonjour,

Je me posais une question. J'utilise souvent des listes à puces sur mes sites, et souvent je remplace la puce par une image pour que ça soit plus joli. Jusque là, rien de bien compliqué.

Mais je me posais une question : est-ce possible de proposer une alternance dans les images ? Je m'explique : par exemple, rendre que les puces impaires soit l'image A et les puces paires l'image B. Ou encore, décider que toutes les 5 images, l'image ne soit pas A mais B.

Si vous avez une solution HTML/CSS, je prends, même si je ne pense pas qu'elle existe.

Si vous avez une solution en PHP (en comptant le nombre de puces et en faisant un changement de classe tous les X <li>), je prends aussi .

Merci d'avance !

[Ernestine]

Salut,

Impossible en CSS.

Changer la classe de certains li avec php, pourquoi pas, mais ce n'est pas terrible, faire du php pour de la décoration... Mieux vaut le faire en javascript.

Déjà, dans le css, mettre une puce commune à tous les li, à l'aide non pas de "list-style-image", mais tout simplement un background-image aux <li>.

Ensuite, avec jQuery, il est très facile de sélectionner certains li (par exemple un sur deux) et de lui appliquer un changement de propriété, en l'occurence modifier la valeur de la propriété background-image.

[yuston]

Si si, tout à fait possible en CSS. Il faut utiliser les pseudos-classes issues des travaux sur la CSS3 !

li:nth-child(odd) /* impair */
li:nth-child(even) /* pair */

/* ou encore */
li:nth-child(2n+1)
li:nth-child(2n)

Défaut? Seuls les navigateurs récents supportent ces sélecteurs.

Personnellement, je préfère ajouter une classe en PHP que le faire via Javascript. En PHP il suffit de faire une condition en vérifiant si le nombre est modulo de 2 ou pas

[Ernestine]

Je ne connaissais pas, au temps pour moi. Ça m'apprendra à chercher un peu avant de dire un truc

[Gregor]

Ta solution en CSS 3 est très intéressante, yuston J'ai adopté celle-là, car elle est très simple à mettre en oeuvre, permet un contrôle du design absolu uniquement dans la CSS (donc pas de PHP et pas besoin de créer des classes supplémentaires) et puis, si ça ne s'affiche pas partout, ce n'est pas grave puisque j'ai quand même mis une puce par défaut.

Pour info, ta solution fonctionne sur Google Chrome (17.0.963.56) et Firefox (10.0.2) mais pas sur Internet Explorer (9.0.5).

merci pour vos réponses (et votre rapidité)

Modifié 6 Mars 2012 par Gregor