alignement d'img avec scroll horizontal

**wpast** · 10/10/2013, 14h21

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 :

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

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!

**Bovino** · 10/10/2013, 14h32

Code :

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

white-space: nowrap;

?

**Torgar** · 10/10/2013, 14h33

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

Et si tu passes en scroll plutôt que auto ça change quelque chose ?

**wpast** · 10/10/2013, 14h46

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?

**NoSmoking** · 10/10/2013, 19h53

Bonjour,
un truc dans ce style

Code html :

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

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>