Bonjour,

J'aimerais savoir comment alterner une div à l'intérieur d'une boucle while.

En effet pour chaque bloc, j'ai un background image différent.

Si j'utilise le code suivant (for) j'ai bien mes 3 background image mais chacun est répété 3 fois

Voici le code PHP

while($polaroid = mysql_fetch_object($result)) {
		for ($i=0; $i<3;$i++) {
		print "<div class='item".$i."'>"; 
		print '<p><img width="170" height="140" src="img/accueil/polaroid/'.$polaroid->id_polaroid.'.jpg" alt="'.$polaroid->nom.'"/></p';    
		print '<ul class="text">';                      
        print '<li class="sstitre">'.$polaroid->nom.'</li>';
        print '<li class="prix">'.$polaroid->prix.' €</li>';
        print '<li><a  class="detail" href="polaroid_zoom.php?id_polaroid='. $polaroid->id_polaroid .'"><span>En savoir +</span></a></li>';
        print '</ul>';
		print '</div>';
	}} 


Voici le code HTML

<div class="item0"><br />
	<p><img src="img/boucle.png" width="170" height="140" alt="boucle"/></p>      
			<ul class="text">                       
                       <li class="sstitre">Boucles d'oreilles</li>
                       <li class="prix">12 €</li>
                        <li><a  class="detail" href="savoir.html"><span>En savoir +</span></a></li>
              </ul>
</div> <!--fin class item-->        
        
<div class="item1"><br />
			<p><img src="img/boucle.png" width="170" height="140" alt="boucle"/></p>             
<ul class="text">                       
                       <li class="sstitre">Boucles d'oreilles</li>
                       <li class="prix">12 €</li>
                        <li><a  class="detail" href="#"><span>En savoir +</span></a></li>
            </ul>
</div> <!--fin class item-->              			
        
<div class="item2"><br />
			<p><img src="img/boucle.png" width="170" height="140" alt="boucle"/></p>      
			<ul class="text">                       
                       <li class="sstitre">Boucles d'oreilles</li>
                       <li class="prix">12 €</li>
                        <li><a  class="detail" href="#"><span>En savoir +</span></a></li>
            </ul>
</div> <!--fin class item--> 


Voici le code CSS

.item0{
	float:left;
	background:url(../img/contenu/diapo1.png) no-repeat center;
	width:240px;
	height:310px;
	display:block;
	
}

.item1 {
	float:left;
	background:url(../img/diapo2.png) no-repeat center 5px;
	width:240px;
	height:310px;
	display:block;
	margin-top:4px;

}

.item2{
	float:left;
	background:url(../img/diapo3.png) no-repeat center;
	width:240px;
	height:310px;
	display:block;

}


Si vous avez une solution,

Merci par avance
Modifié par majo82 (10 Jan 2012 - 10:05)
Bonjour,

Je ne sais pas si tu es au courant, mais sur Internet, un texte écrit en majuscule signifie qu'il est crié...

Comme crier sur les gens n'as jamais été un bon moyen de leur demander de l'aide, je te demanderais de bien vouloir éditer ton titre.

Dans le même temps, il serait appréciable que tu utilise les bbcode de colorisation syntaxique pour encadrer tes portions de code. Cela rendra ton code plus lisible.

Merci d'avance.