Bonjour à tous
J'essaye de faire défiler des images en boucle dans un cadre. Les images feront toutes 92px de hauteur et de largeur. Le cadre fait lui la même hauteur, mais est assez large pour afficher 4 images.
J'essaye de placer les imagesune à côté de l'autre, mais si je mets plus de 4 images, les suivantes se placent en dessous. Sauriez-vous comment forcer le placement des images?
Voici mon code actuel :
<div id="CadreLsProjets" onmouseover="arreter()" onmouseout="defiler()">
<?php
$i = 1;
$qProjet = mysql_query ("SELECT * FROM projet WHERE ref_projet=$id ORDER BY num_projet;");
$nbProjets = mysql_num_rows ($rProjet);
while ($rProjet = mysql_fetch_array ($qProjet)) {
....
?>
<a href="projet?php?id=<?=$rProjet['id_projet']?>" title="">
<div id="Projet<?=$i?>" class="Projet" onmouseover="survol(this, '<?=$titre?>', <?=$marge?>)" onmouseout="sortie(this, '<?=$titre?>', '<?=$rProjet['img_projet']?>')">
<img src="images/projets/vignettes/<?=$rProjet['img_projet']?>" alt="<?=$titre?>" />
</div>
</a>
<?php
$i++;
}
?>
</div>
CadreLsProjets est le cadre dans lequel les images vont défiler. La boucle PHP liste les infos récupérées dans une base de donnée.
Chaque image est dans un DIV (car il faut également une action au survol de l'image : un texte la remplace), lui même dans une balise A.
Et voici le CSS qui me pose problème :
#CadreLsProjets {
position: absolute;
left: 440px;
top: 425px;
width: 368px;
height: 96px;
border: none;
overflow: hidden;
margin: 0px;
padding: 0px;
}
.Projet {
float: left;
background-color: #aac605;
color: #fff;
width: 92px;
height: 92px;
text-align: center;
}
La classe Projet est appliquée à chaque cadre contenant une image.
Quelqu'un aurait une idée?
Merci d'avance