Discussion :

[Décibel]

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 :

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
<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>

[NoSmoking]

Bonsoir,
supprimes les DIV qui contiennent tes images

Code html :

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

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>

[Décibel]

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

Code :

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

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