LIGNES ALTERNEES PHP CSS [Résolu]

[pp_le_moko]

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

[Blount]

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

[Eric2a]

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

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";
?>

[pp_le_moko]

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.

[stealth35]

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

Code :

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