Poser une question

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. :
http://helven.free.fr/pages/photos05.html

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%;}

Réponses

Re: Obtenir un scroll horizontal sur un bloc  dmc 11/2/2006