28172 sujets

CSS et mise en forme, CSS3

Mise en couleur d'une liste

Bonjour,

Alors je vais vous exposer mes envies Smiley lol

J'utilise Wordpress, et sur ma homepage j'ai une liste des titres de mes derniers articles, j'utilise pour la présenter <ul><li>... Maintenant j'aimerais simplement qu'une ligne sur deux le background-color soit différent, par exemple la première ligne avec un fond #fff puis la seconde avec un fond #ccc.

Je ne sais pas si c'est possible d'attribuer cela en CSS (je n'ai pas trouvé en tout cas), ou si il faut que ma liste génère des <li> avec des .class différentes une fois sur deux (si c'est le cas... bah je ne sais pas le faire non plus Smiley fache )...

Alors si quelqu'un par ici saurait m'aiguiller, je lui en serais extrèmement reconnaissant Smiley lol
Bonsoir,

J'ai bien peur que cela ne soit effectivement pas possible sans attribuer au minimum une classe sur les <li> "alternatives"... Smiley confus

On pourrait quand même imaginer contourner le problème en ajoutant un <span> dans les éléments de la liste où il faut changer le fond :

HTML :

<ul id="menu">
    <li>Article 1</li>
    <li><span>Article 2</span></li> <!-- élément de liste dont on veut changer le fond -->
    <li>Article 3</li>
</ul>


CSS :

ul#menu li {
    background-color: red;
}

ul#menu span {
    display: block;
    background-color: green;
}


Néanmoins ça reste de la bidouille qui induit l'ajout d'une balise supplémentaire et je ne sais même pas si tu as la possibilité d'ajouter librement cette balise ? Smiley sweatdrop

Mieux vaut trouver le moyen d'ajouter une classe !

Bon courage !
Salut,
J'ai dû faire un truc semblable sur mon site pour la présentation de tableau.

La méthode la plus simple serait d'appliquer une couleur à l'ensemble de tes li, ensuite tu ajoute un class à un li sur 2.
ça donnerais une truc comme ça:
<ul>
    <li>bla</li>
    <li class="bleu">bla</li>
    <li>bla</li>
    <li class="bleu">bla</li>
    <li>bla</li>
    <li class="bleu">bla</li>
</ul>


le CSS:
ul li {background: #ffffff;}
ul li.bleu {background: #0066ff;}


C'est sûr c'est pas super pratique à mettre en place, mais c'est la meilleure méthode que je connaisse.
Bonjour,

On peut également se tourner vers la pseudo-classe :nth-child en CSS3 dont le support doit être correct sur l'ensemble des navigateurs actuels (à vérifier sur caniuse.com pour le support d'IE, pas avant IE9 me semble t-il).


li:nth-child(odd){
        background: yellow;
    }
li:nth-child(even){
        background: red;
    }



<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis id elit consequat erat tristique viverra.</li>
<li>In congue semper lectus.</li>
<li>Nulla imperdiet augue vel urna.</li>
<li>Integer nec lacus quis sem faucibus semper.</li>
<li>Donec bibendum tincidunt nisi.</li>
</ul>
Parfait Igor, c'est exactement ce que je voulais !

Merci Julie et Maliki pour vos réponses, le problème étant que ma liste <li> est généré par la boucle wordpress, il m'était impossible de lui assigner directement des .class une ligne sur deux, ou j'aurais du passer par du php pour justement pouvoir assigner ces propriétés.

Je savais qu'ils y avaient pensé pour le css3 ahah Smiley lol !
Merci Igor!
Je connaissait cette propriété mais ignorait sont fonctionnement! Est-ce que ça serait applicable aussi pour des tableaux?

LEGHUMAIN: De rien! Mais effectivement il nous manquait le petit détails que tu mentionne. Bonne chance pour la suite!
Sujet clos
Aller à