Overflow:hidden & float left

Bonjour à tous !

Je tatonne sur un problème que je ne comprends pas .
je voudrais aligner horizontalement des block images sous un masque ( overflow:hidden ?).

<div id="gallery">
	<ul>
		 <li ><a class="lightbox" href="http://flickholdr.com/500/500/slip/1" class="lightbox"><img src="http://flickholdr.com/100/100/slip/1" alt="" /></a></li>
				<li ><a class="lightbox" href="http://flickholdr.com/500/500/slip/2" ><img src="http://flickholdr.com/100/100/slip/2"  alt="" /></a></li>
				<li ><a class="lightbox" href="http://flickholdr.com/500/500/slip/3"><img src="http://flickholdr.com/100/100/slip/3" alt="" /></a></li> 
</ul>
	</div>

avec le css suivant:

#gallery {
	width:200px;
	height:120px;
	overflow:hidden;
	background-color:#c30;
}
#gallery ul{
	width:300000px; /*je ne veux pas mettre de taille fixe please */
}
#gallery li{
	
	width:100px;
	height:100px;
	background-color:#0af;
	float:left;
}

mais ça ne fonctionne pas .. je n'ai pas de pistes de reponses .. quelqu'un voudrait il m'aider ?
merci d'avance ...
Modifié par postite (09 Sep 2011 - 15:28)

Salut !

Ta logique semble correcte. J'ai testé ton code, cela fonctionnen, les images sont bien côtes à côtes à l'horizontal.

Je comprends peut être mal ton problème mais si tu veux faire une bande d'images (ce type de structure s’appelle un scroller d'images, si jamais tu as besoin de chercher des scripts pour faire défiler tes images en JS) il faut procéder comme tu l'as fait.

La seule chose qui peux poser problème actuellement c'est que les puces s'affichent encore sur tes li.
Rajoute ceci dans ton CSS :

#gallery li { list-style-position:inside; list-style:none;}

Sinon essai d'expliquer plus clairement ton problème.
Modifié par Spacedementia (09 Sep 2011 - 19:19)

Merci pour ta réponse.
en effet le code fonctionne .mais je voudrais éviterez d'avoir a mettre une width sur mon UL.
Si je l'omets, cela ne fonctionne pas. Et je ne vois pas comment faire autrement.
Merci

Bonjour !
Pour éviter d'avoir a indiquer une largeur, tu peux enlever ta liste :

HTML

<div id="galerie">
            	
          <img src="images/1.jpg" alt="" width="500px" height="500px"/>
          <img src="images/2.jpg" alt=""  width="771px" height="500px" />
           <img src="images/3.jpg" alt=""  width="747px"   height="500px"/>
                
</div>

CSS

#galerie {
         width:200px;
	height:120px;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
	
}
#galerie img {
        width:100px;
	height:100px;
	background-color:#0af;
	white-space: nowrap;

Par contre avec ce code, la ratio des images ne sera pas respecté. Il faudrait plutôt leur attribuer un "height" fixe et laissé un "width" en auto.