Discussion :

[BlindeKinder]

Salut,
Il y a quelque chose que je ne comprends pas bien:
Je dois faire défiler des images horizontalement. J'ai fait un div, positionné, et dimensionné en hauteur, avec un "overflow:auto". Si je met du texte en largeur, il dépasse bien sur la droite, et le scroll apparait en-bas, ok. Mais si je met des images, elles retournent à la ligne, et le scroll apparait sur le côté...
Pourtant <img /> est de type inline?

Comment faire? (sans tableau bien sûr )

[Bisûnûrs]

Tu rajoutes un div qui encadre tes images et qui prend pour largeur la somme des largeurs de tes images.

[BlindeKinder]

Merci...
masi j'ai oublié de préciser qu'il s'agit de galeries dynamiques...

[Bisûnûrs]

Dans ce cas-là tu es obligé de calculer dynamiquement la taille de ce div en Javascript ou en PHP.

[BlindeKinder]

c'est bien ce que je pensais... J'ai vu un exemple de cette mise en page, qui utilise des cadre... Je crois que ça va être plus simple
Merci quand même...

[Bisûnûrs]

Je viens de trouver une solution qui fonctionne.

Rajoute white-space:nowrap sur le div en overflow:auto. Tu n'as plus besoin du div avec une taille fixe :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="defil">
   <img src="logo1.gif" alt="" /><img src="logo2.gif" alt="" /><img src="logo3.gif" alt="" /><img src="logo4.gif" alt="" /><img src="logo5.gif" alt="" /><img src="logo6.gif" alt="" /><img src="logo7.gif" alt="" /><img src="logo8.gif" alt="" /><img src="logo9.gif" alt="" />
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#defil{
   width:500px;
   height:100px;
   overflow:auto;
   white-space:nowrap;
}

[BlindeKinder]

Et la vie est belle
En plus j'ai appris l'existence d'un propriété

Merci infiniment...