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
Voici le code HTML
Voici le code CSS
Si vous avez une solution,
Merci par avance
Modifié par majo82 (10 Jan 2012 - 10:05)
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)