Gregor 0 Posted March 6, 2012 Share Posted March 6, 2012 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
Ernestine 11 Posted March 6, 2012 Share Posted March 6, 2012 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
yuston 3 Posted March 6, 2012 Share Posted March 6, 2012 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
Ernestine 11 Posted March 6, 2012 Share Posted March 6, 2012 Je ne connaissais pas, au temps pour moi. Ça m'apprendra à chercher un peu avant de dire un truc Link to post Share on other sites
Gregor 0 Posted March 6, 2012 Author Share Posted March 6, 2012 (edited) 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 March 6, 2012 by Gregor Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now