Position mini (photo) pour galerie

Bonjour,

A la base j'ai pris un tutoriel sur http://www.katlea-art.com/188_galerie-dimages-en-css-uniquement pour faire ma galerie.

Pour 4-5 photo il est parfait pour ce que je veux en faire. Mais quand je souhaite en rajouter d'autres, je suis dépassé dans la modification du CSS. (j'ai "bidouillé" sans résultat)

Ne pouvant pas poster de commentaire sur le tuto et que mon mail par le formulaire de contact reste sans réponse depuis un moment, je me tourne vers vous ^^.

Note : je reprends ici l'exemple de katlea-art.com

Mon soucis :

- Quand je met une 5° (et plus) miniature qui servent de liste dans ma page html, elles apparaissent quasiment en bas de cette page (voir les imprime écran plus bas)
- Je débute en CSS et j'ai du mal à m'améliorer (^^)

Ce que je souhaite faire :

Que toutes les mini apparaissent sur la gauche comme par exemple mon 2° imprime écran (carré blanc)

Les imprime écran : https://www.dropbox.com/sh/od3mzg976ajth0m/AABj8nEceLPqHB12hRcMyIZ0a


Mon CSS :

body    
{   
 background-image: url(img/bg.png);   
 background-repeat: repeat;   
 text-align: center;   
 margin-top: 0;   
 margin-bottom: 0;    
}   
div#gallery_div   
{   
 width:400px;   
 margin:50px auto;    
}   

 ul#gallery, ul#gallery li   
  {   
   margin:0;   
   padding:0;   
   list-style:none;   
  }   
 ul#gallery   
  {   
   width:400px;    
   height:335px;   
   position:relative;    
   background:url(img/5.jpg) no-repeat center;    
  }   
 ul#gallery li   
  {   
   float:left;    
   display:inline;   
   margin-top:268px;   
  }   
 ul#gallery  span   
  {   
   display:none;   
  }   
 ul#gallery a:hover span   
  {   
   position:absolute;   
   width:400px;   
   height:268px;   
   float:left;   
   top:0;   
   left:0;   
   display:block;   
  }

Si quelqu'un peut me donner une solution, cela m'aiderai beaucoup.

Merci d'avance à ceux qui pourront m'aider

Et merci dans tous les cas d'avoir lu mon post ^^

Bonne journée à tous.

Dracknard