28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

j'ai un site ou les internautes vont pouvoir uploader leur photos.

Mais j'ai un petit souci pour afficher les photos de façon ordonnée.

J'aimerais les afficher par ligne de 3 photos, mais ça ne fonctionne que si les photos ne dépassent pas une certaine taille.

Si elles sont trop large par exemple, et bien je vais me retrouver avec une ligne de deux photos, la suivante de 3 photos, etc..

Avez-vous une solution pour palier à ce problème.

Voici mon code html :



<div class="up_photo">

<img src="images/photo/1gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/2gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/3gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/4gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/5gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/6gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/7gd.jpeg">

</div>


<div class="up_photo">

<img src="images/photo/8gd.jpeg">

</div>





et le CSS :




.up_photo
{
float:left;
margin-left:10px;
margin-top:10px;
}



Merci pour votre aide.
Bonjour,

Là tu as typiquement besoin d'un tableau. Tout vouloir transformer en div est un leurre.

pense à indiquer summary=""
Salut,

Le soucis c'est que si tu as des images plus grandes, elles vont étendre leur conteneur à la largeur qui leur est nécessaire, et si dans ta mise en page, les largeurs cumulées sont plus importante que la largeur totale, il y aura automatiquement des sauts d'images sous les précédentes.

Une des possibilités si tu ne peux pas redimensionner tes images (soit à la main, soit à la volée via php), serait d'utiliser la propriété overflow, pour cacher la partie de l'image qui dépasse de la largeur que tu auras précisé. Seulement, si l'image est très grande, tu n'en apercevra qu'un petit bout, qui ne sera pas significatif de l'image.