Liste avec deux couleurs

Bonjour,
Est-il possible avec une CSS de réaliser une liste dont chaque ligne aurait une couleur différente ?
Par exemple deux couleurs qui changeraientt à chaque ligne :

Première ligne, rouge
Deuxième ligne, verte
Troisième ligne, rouge
Quatrième ligne, verte
Etc

Je voudrais réaliser cet effet pour une meilleure lisibilité.
Merci pour vos conseils
Modifié par pan (06 Sep 2008 - 09:57)

Bonjour pan,

Je ne sais pas si cela va améliorer la lisibilité de ta liste, mais il est effectivement possible d'alterner les couleurs des lignes de ta liste en utilisant une classe par exemple :

html :

<ul>
	<li>truc</li>
	<li class="verte">truc</li>
	<li>truc</li>
	<li class="verte">truc</li>
</ul>

css :

li { background:red;}
li.verte {background:green;}

Ceci reste valable quelque soit le type de liste que tu vas utiliser, mais également pour tout ce que tu souhaites (ligne de tableau, ligne de paragraphe (soyons dingue )

Cdt,
Sylvain
Modifié par 6l20 (06 Sep 2008 - 15:22)

En fait la liste est issue d'entrées de ma base de donnée, donc le nombre des lignes est aléatoire.
Du coup, je ne peux pas intervenir sur le code qui est généré par php donc impossible de désigner chaque ligne de la liste avec une classe et j'ai bien peur de devoir intervenir sur le code source de la boucle php...

Bonjour,

pan a écrit :
En fait la liste est issue d'entrées de ma base de donnée, donc le nombre des lignes est aléatoire.

je crois pas que ce soit important, à moins que tu aies une pagination et qu'elle soit bizarrement faite. Il suffit d'énumérer pair/impair/pair/...

pan a écrit :
Du coup, je ne peux pas intervenir sur le code qui est généré par php donc impossible de désigner chaque ligne de la liste avec une classe et j'ai bien peur de devoir intervenir sur le code source de la boucle php...

En PHP, la solution est simplement de rajouter le texte ' class="pair"' (sans les apostrophes) juste avant le chevron fermant de <li> une fois sur 2.
Le plus simple pour ça est d'utiliser la fonction modulo dans un if présent dans ta boucle:

// Compteur $i et opérateur ternaire $var = (test) ? valeur_si_true : valeur_si_false;
$i = 0;
echo "<ul>\n";
foreach($retours_mysql as $resultat_mysql) {
$classe = ($i % 2) ? ' class="pair"' : '';
echo "\t<li$classe>$resultat_mysql['texte']</li>\n";
}
echo "</ul>\n\n";

Autre variante sans compteur:

// !false = true et !true = false ...
$flag = false;
echo "<ul>\n";
foreach($retours_mysql as $resultat_mysql) {
$classe = ($flag) ? ' class="pair"' : '';
$flag = !$flag;
echo "\t<li$classe>$resultat_mysql['texte']</li>\n";
}
echo "</ul>\n\n";

Une solution différente est de le faire en Javascript: http://www.alistapart.com/articles/zebratables/ mais bon ceux qui désactivent JS ne verront rien du tout alors que cela ne demande que 3 lignes de PHP ...
Modifié par Felipe (06 Sep 2008 - 14:41)

Et pour avoir eu ce problème, ce simple code javascript cause du souci à IE6 de sorte que la page mets deux fois plus de temps à se charger.

Sinon, à l'avenir...

li{background:red}
li:nth-child(even){background:green}