Jump to content

Images alternées pour liste à puces


Recommended Posts

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 !

Link to post
Share on other sites

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.

Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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é) ;)

Edited by Gregor
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...