[RESOLU]Obtenir un scroll horizontal sur un bloc.

Salut,
j'ai cherché au préalable et ai trouvé des choses sur le sujet mais je m'en sort pas.
Je veux faire un bloc de la largeur de la page, qui contient des vignettes alignées horizontalement ds le bloc qui afficherait un scrollbar horizontal pour les faire defiler.
Quoique je fasse, j'ai un scroll vertical sur mon bloc et mes vignettes passent à la ligne sans que je comprenne pourquoi.
Merci.
Pour voir où j'en suis.
HTML

<div id="galerie">
 
 <div id="photo"><dl>
<dt>Les courroies de carnelle photos 2000</dt>
<dd><img id="big_pict" src="../images/gall00_3.jpg" alt="lebon" /></dd>
	                       </dl>
  </div>	
	

<div id="galerie_mini">
 
<p class="">2000</p>

  <a href="../images/gall00_1.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_1mini.jpg" alt="Le titre de la photo 3" /></a>
 <a href="../images/gall00_2.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_2mini.jpg" alt="Le titre de la photo 3" /></a>
<a href="../images/gall00_3.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_3mini.jpg" alt="Le titre de la photo 3" /></a>
 <a href="../images/gall00_4.jpg" title="Hi JackX">
   <img class="floatleft" src="../images/gall00_4mini.jpg" alt="Le titre de la photo 5" /></a>
  <a href="../images/gall00_5.jpg" title="Titre de la photo 7">
  <img class="floatleft" src="../images/gall00_5_mini.jpg" alt="Le titre de la photo 7" /></a>
 <a href="../images/gall00_6.jpg" title="Titre de la photo 8">
   <img class="floatleft" src="../images/gall00_6_mini.jpg" alt="Le titre de la photo 8" /></a>
<a href="../images/gall00_7.jpg" title="Titre de la photo 2">
   <img class="floatleft" src="../images/gall00_7_mini.jpg" alt="Le titre de la photo 2" /></a>
 <a href="../images/gall00_8.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_8_mini.jpg" alt="Le titre de la photo 3" /></a>
<a href="../images/gall00_9.jpg" title="Titre de la photo 4">
   <img class="floatleft" src="../images/gall00_9_mini.jpg" alt="Le titre de la photo 4" /></a>
 <a href="../images/gall00_10.jpg" title="Titre de la photo 2">
   <img class="floatleft" src="../images/gall00_10_mini.jpg" alt="Le titre de la photo 2" /></a>
 <a href="../images/gall00_11.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_11_mini.jpg" alt="Le titre de la photo 3" /></a>
  <a href="../images/gall00_12.jpg" title="Titre de la photo 4">
   <img class="minih" src="../images/gall00_12_mini.jpg" alt="Le titre de la photo 4" /></a>
 <a href="../images/gall00_13.jpg" title="Titre de la photo 2">
   <img class="floatleft" src="../images/gall00_13_mini.jpg" alt="Le titre de la photo 2" /></a>
<a href="../images/gall00_15.jpg" title="Titre de la photo 4">
   <img class="floatleft" src="../images/gall00_15_mini.jpg" alt="Le titre de la photo 4" /></a>
 <a href="../images/gall00_16.jpg" title="Titre de la photo 2">
   <img class="floatleft" src="../images/gall00_16_mini.jpg" alt="Le titre de la photo 2" /></a>
 <a href="../images/gall00_19.jpg" title="Titre de la photo 2">
   <img class="floatleft" src="../images/gall00_19_minii.jpg" alt="Le titre de la photo 2" /></a>
 <a href="../images/gall00_20.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_20_mini.jpg" alt="Le titre de la photo 3" /></a>
 <a href="../images/gall00_17.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_17_mini.jpg" alt="Le titre de la photo 3" /></a>
   
                        <!--Imagettes verticales -->
 <a href="../images/gall00_14.jpg" title="Titre de la photo 3">
   <img class="floatleft" src="../images/gall00_14_mini.jpg" alt="Le titre de la photo 3" /></a>
<a href="../images/gall00_18.jpg" title="Titre de la photo 4">
   <img class="floatleft" src="../images/gall00_18_mini.jpg" alt="Le titre de la photo 4" /></a>
  <a href="../images/gall00_21.jpg" title="Titre de la photo 4">
   <img class="floatleft" src="../images/gall00_21_mini.jpg" alt="Le titre de la photo 4" /></a>
<a href="../images/gall00_22.jpg" title="Titre de la photo 2">
   <img class="floatleft" src="../images/gall00_22_mini.jpg" alt="Le titre de la photo 2" /></a>




</div>
</div>

<div id="de">
    <a href="photos05.html" title="">Année 2005</a><br /><br />
	<a href="photos01.html" title="">Année 2003</a><br /><br />
	<a href="photos03.html" title="">Année 2004</a><br /><br />
	<a href="photos04.html" title="">Année 2001</a><br /><br />
</div>	

CSS

/* GALERIE PHOTOS MINIATURES*/
div#galerie{   
    height: 480px;
	width:100%;
	top: 90px;
	background-color:transparent ;
    padding: 0px ;
	margin: auto auto ;
    font: 0.9em Georgia, serif ;
	background:url();
	background-repeat: no-repeat;}

div#galerie_mini{  
     background: url(./images/fond_vignettes.png) ;
	 position:absolute;
	 left: 0px;
	 top: 85%;
	 float: bottom;
	 border-width: thin;
	 border-style: solid; 
	 border-color: #666600;
	 border-size: 1px;
     overflow: scroll;
	 width:95%; 
	 height: 65px;
	 margin: 0 ;
	 padding: 4px ;}

div#galerie_mini a{        padding: 0;
				           margin: 0;}

div#galerie_mini a img {   margin: 0;padding:0;}
div#galerie_mini a     {   margin: 0 ;padding:0;}

div#photo{ position:absolute; 
           left: 0px;
		   top:95px;
           height: 400px;
		   width: 100%;
           text-align:center; 
           margin:0 auto; 
           display:inline; background: url(./images/tracesdepneus.png);}		

div#photo h1{font: italic 1em/1em Georgia, serif ;
            padding:0; text-align:center;
			margin:0px 15px 0px 0px;
            color: #dcb ;}

div#photo p{ top:0px; margin: 0; height:480px ;text-align:center;}

div#photo img{  margin:0px 0px 0px 0px;}

dd { padding:0; margin: 0 auto;}
dt { padding:0; margin: 0 auto;  }
dl {padding:0; margin: 0 auto;}
div#galerie_mini a img.minih {margin: 0px 3px 0px 0px ;padding:0; text-align:center;}

div#de       {   margin: 0; 
                 padding:0;
                 position:absolute;
				 left:92%; 
				 top:50%;}

Modifié par Hum (12 Feb 2006 - 15:13)

Salut,
je galere toujours avec cette histoire de scroll horizontal que je souhaite obtenir pour faire défiler horizontalement ma ligne de vignette...

J'ai lu dans un vieux sujet que c'etait pas forcement facile a faie et qu'une solution efficace serait de faire un tableau, ce que je viens d'essayer et j'ai le meme resultat, il passe a la ligne le contenu du td au bout de la page alors que je lui ai donné 100% de largeur. Cela dit le scroll horizontal est là.

Merci

Hello :

Probleme resolu avec la propriété

white-space:nowrap;

en plus du

overflow: auto;

Merci.
Modifié par Hum (12 Feb 2006 - 15:13)