LIGNES ALTERNEES PHP CSS

Bonjour,
Je souhaite créer une liste avec style alterné (changement d'image 1 fois sur 2) issue d'enregistrement d'une base de données.

Je dois agir uniquement sur le <a href="#"> du <li>.
Dans ma feuille de style #liste a, j'ai actuellement mon background-image: url(../images/1.png
je souhaite, 1 fois sur 2, avoir mon background-image: url(../images/2.png

Code:

---

<li><span id="liste"><a href="#">M. <?php echo $row_rsEntFro['NomFr']; ?></a></span></li>

---

Je suis à la recherche d'une solution adaptée à cette situation.

Merci

Tu crées deux classes CSS différentes et tu utilises le modulo pour gérer l'alternance.

Code:

---

<li><span id="liste"><a href="#" class="image-<?php echo $i++ % 2; ?>">M. <?php echo $row_rsEntFro['NomFr']; ?></a></span></li>

---

Penses à définir $i avant l'entrée dans la boucle.
Dans ton CSS tu auras quelque chose de ce genre :

Code:

---

1 2 3 4 5 6 7

#liste a.image-0 { background-image: url(../images/1.png); } #liste a.image-1 { background-image: url(../images/2.png); }

---

Salut,

Un Id designe un élément unique dans le document. Dans ton cas, nous pourrions l'associer à la liste (<ul>) entière.

Si nous définissons le style de la liste ainsi...

Code:

---

1 2	#liste a{background-image:url('../images/1.png');} #liste a.odd{background-image:url('../images/2.png');}

---

Le code XHTML ressemblera à ceci...

Code:

---

1 2 3 4 5 6

<ul id="liste"> <li><a href="#">Lien 1</a></li> <li><a href="#" class="odd">Lien 2</a></li> <li><a href="#">Lien 3</a></li> <li><a href="#" class="odd">Lien 4</a></li> </ul>

---

Pour ce faire, on utilise (comme l'a souligné Blount) l'opérateur arithmétique % (modulo).

Code:

---

1 2 3 4 5 6

<?php $i=0;   // Et dans la boucle... echo '<li><a href="#"'.(($i++ % 2)?' class="odd"':'').'>M. '.$row_rsEntFro['NomFr']."</a></li>\n"; ?>

---

Bonsoir,

Grâce à vos précieux conseils, ma patience a été récompensée.
J'ai utilisé avec succès vos codes accompagnés de vos explications.

Merci à vous

Je peux maintenant passer à la suite.

sinon ca se fait direct en CSS3 si t'as pas envie de bidouiller.

Code:

---

1 2	#liste a:nth-of-type(2n+1) { }

---