plusieurs divs dans un overflow

Version imprimable

Bonjour,

Pas très doué avec le CSS...
J'essaye de faire une liste de photos sur la même ligne et mettre un overflow si il ya trop d'images pour qu'elles n'étirent pas la page.
Petit problème, les photos passent à la ligne au bout d'un certain nombre et l'overflow ne marche pas...
Voici mon code...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div style="overflow-x:scroll;overflow-y:hidden;clear:both;white-space: nowrap;">          
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
          <div style="width:150px;background-color:#494D4E;padding:8px;text-align:center;float:left"><img src="maphoto.jpg" alt=""></div>
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
          <div style="width:150px;background-color:#494D4E;padding:8px;text-align:center;float:left"><img src="maphoto.jpg" alt=""></div>
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
          <div style="width:150px;background-color:#494D4E;padding:8px;text-align:center;float:left"><img src="maphoto.jpg" alt=""></div>
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
          <div style="width:150px;background-color:#494D4E;padding:8px;text-align:center;float:left"><img src="maphoto.jpg" alt=""></div>
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
          <div style="width:150px;background-color:#494D4E;padding:8px;text-align:center;float:left"><img src="maphoto.jpg" alt=""></div>
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
          <div style="width:150px;background-color:#494D4E;padding:8px;text-align:center;float:left"><img src="maphoto.jpg" alt=""></div>
          </div>
          <div style="width:15px;height:90px;background-color:#565B5C;float:left">&nbsp;</div>
    </div>

Bonsoir,
supprimes les DIV qui contiennent tes images

Code:

1
2
3
4
5
6
7
8
<div style="overflow-x:scroll;overflow-y:hidden;white-space: nowrap;">
  <img src="maphoto.jpg" alt="">
  <img src="maphoto.jpg" alt="">
  <img src="maphoto.jpg" alt="">
  <img src="maphoto.jpg" alt="">
  <img src="maphoto.jpg" alt="">
  <img src="maphoto.jpg" alt="">
</div>

Oui, merci la chose marche bien il fallait aussi rajouter des choses dans le overflow, voici le bon code dans sa totalité :
Code:

1 2 3 4 5 6 7 8 <div style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;width:750px;height:120px;"> <img src="maphoto.jpg" alt=""> <img src="maphoto.jpg" alt=""> <img src="maphoto.jpg" alt=""> <img src="maphoto.jpg" alt=""> <img src="maphoto.jpg" alt=""> <img src="maphoto.jpg" alt=""> </div>
Une largeur oblige le scroll à s'afficher, sinon toutes les images sont sur une ligne droite et la page est étirée,
la hauteur donne un peu de beauté à la chose...

Merci :ccool: