marge auto entre plusieurs images

marge auto entre plusieurs images - HTML/CSS - Programmation

Marsh Posté le 15-06-2012 à 11:32:22    

Bonjour,
 
Mon objectif est de réaliser ceci => http://jquerytools.org/demos/scrollable/gallery.htm.
Je n'ai pas eu de problème pour que cela fonctionne.
cependant mon problème ce trouve sur le positionnement css des vignettes (carré rouge "illustration") dans la scrollbar.
Je souhaiterai leur donner des marges "left-right" automatique selon la taille du div (cadre noir "illustration").
 
Puisque j'ai des largeurs d'images aléatoire comment faire en sorte quelles prennent tjs toutes la largeur du div.
Pour le moment j'ai mis une marge gauche de 4% qui fonctionne si les quatres images on une largeur de 200px.
Si l'une des images est plus petite j'ai un espace vide a droite.
 
Mon résultat actuelle:
 
illustration
http://img4.hostingpics.net/thumbs/mini_46010476ex.jpg
 
 

Code :
  1. <div class="scrollable" id="navigator">
  2.    <div class="items">
  3.          <div>
  4.             <img src='' />
  5.             <img src='' />
  6.             <img src='' />
  7.             <img src='' />
  8.          </div>
  9.           <div>
  10.              <img src='' />
  11.              <img src='' />
  12.              <img src='' />
  13.              <img src='' />
  14.          </div>
  15.     </div>
  16. </div>


 

Code :
  1. .scrollable .items {
  2.     width:20000em;
  3.     position:absolute;
  4.     clear:both;
  5.    
  6. }
  7. .items div {
  8.     float:left;
  9.     display:block;
  10.     width:845px;
  11. }
  13. .items img{
  14. max-width:200px;
  15. height:90px;
  16. margin: 0 0 0 4%;
  17. border:2px solid #666;
  18. }


 
Merci pour votre aide.

Reply

Marsh Posté le 15-06-2012 à 11:32:22   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed