alignement d'img avec scroll horizontal

Version imprimable

Bonjour,

Je souhaiterais avoir une div contenant des images alignées à l'horizontal avec une scrollbar à l'horizontal qui s'affiche s'il y a trop d'image pour le conteneur.
Pb:Les images étant en float : left, si elles n'ont pas assez de place dans le conteneur elles passent à la ligne. La, je souhaiterai que la scroll horizontal apparaisse...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 #conteneur //le div conteneur qui s adapte à 60% de la taille de la fenêtre { height : 150px; margin : 0 auto ; margin-top : 30px; padding-top : 10px; background-color: white; overflow-x:auto; overflow-y:hidden; width: 60%; } #conteneur .content{ //le conteneur de chaque image float: left; width: 115px; height : 130px; align : center; }
Merci d'avance!

10/10/2013, 14h32
Bovino

Code:

white-space: nowrap;

?
10/10/2013, 14h33
Torgar

La propriété align n'existe pas en CSS. À supprimer.

Et si tu passes en scroll plutôt que auto ça change quelque chose ?
10/10/2013, 14h46
wpast

Merci pour vos reponses,

Alors j'ai viré align.

nowrap n'agit que sur les libellés sous les images mais ne positionne pas les images les unes après les autres :/

me faudrait-il deux conteneur?
Un conteneur qui visuellement fait 60% de la page et un conteneur qui s’étend en fonction du contenu et qui affiche une scroll le long de sa largeur?

Bonjour,
un truc dans ce style

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
#conteneur{
  width:100px;
  overflow-x:auto;
  border:1px solid blue;
}
ul{
  white-space: nowrap;
}
ul li{
  display:inline-block;
  width:50px;
}
</style>
</head>
<body>
<div id="conteneur">
 <ul>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
  </ul>
</div>
</body>
</html>

11/10/2013, 14h22
wpast

Parfait ! Merci bcp NoSmoking :)

(j'prends ton pseudo comme un signe hah )
11/10/2013, 14h35
NoSmoking

Je n'ai fait que d'appliquer la solution de Bovino mais au bon endroit ;)