Marge automatique dans un bloc

Bonjour,

j'ai un ptit problème en css (vous vous en doutez vu que je poste ici )

J'ai un bloc de 800px de largeur et à l'intérieur j'aimerai y mettre 4 images de 150px de large.

ce qui me donne un pour résultat; Elles sont toutes alignées à gauche et collée les unes aux autres.
----------800px---------
150px150px150px150px

Comment faire pour que la première soit alignée à gauche mais que les suivantes s'espacent automatiquement en fonction de la largeur et que la dernière soit collée à droite.
----------800px---------
150px 150px 150px 150px

J'ai tout essayé:margin-left: auto; margin-right: auto; etc sans succès

Merci de votre aide
Modifié par Sp4tz (09 Apr 2010 - 08:54)

La marge que tu applique sur ton bloque va avoir pour effet de rajouter de l'espace a L'EXTERIEUR de ton bloc.

Je ne sais pas si cela va fonctionné, tu peux tenter de jouer avec margin-left et margin-right au niveau de tes images.

Par contre, ce ne sera pas automatique comme tu le souhaites.


D'ailleurs si quelqu'un peux donner une astuce pour un alignement automatique en fonction de la largeur du conteneur, je serais vraiment curieux de le savoir

bon courage SP4tz

Bonjour,

Obtenir ce résultat automatiquement n'est pas possible, il faut un peu "bidouiller".

L'astuce consiste à utiliser deux conteneurs parents :
- Le parent le plus haut a une largeur fixe de 800px + overflow:hidden,
- Le second a une largeur qui vaut : 4 x 150px (espace occupé par les images) + 4 x Y.

Y est la marge gauche (ou droite) nécessaire aux images pour que dans 800px la première soit collée à gauche et la dernière à droite. Petit schéma (qui pique bien les yeux) :


En résolvant l'équation on trouve Y = 66,66... px.

Pas de chance, mais pas très grave non plus. Tu auras un jeu d'à peine 2px entre la dernière image et l'extrémité droite du conteneur.

<div id="conteneur">
     <div id="conteneur_full">
          <img src="#" alt=""/>
          <img src="#" alt=""/>
          <img src="#" alt=""/>
          <img src="#" alt=""/>
     </div>
</div>

div#conteneur {
overflow:hidden;
width:800px; }

div#conteneur_full {
width:866px; }

div#conteneur_full img {
float:left;
margin-right:66px; }

J'ai mis un float:left sur les images pour qu'elles aient un pseudo-rendu "block". En effet, les éléments "inline" posent problème à cause des espaces insécables.

A noter que si l'on utilise cette astuce avec une liste <ul> / <li>, le <ul> sert de second conteneur (pas besoin de #conteneur_full).
Modifié par BeliG (09 Apr 2010 - 10:40)

L'astuce précédente fonctionne sur tous les navigateurs, et également dans le cas où les images sont générées dynamiquement (et donc s'il y a plusieurs "lignes").

Voici une technique plus simple, mais qui ne fonctionne pas sur IE6 et les galeries comportant plus d'une "ligne".

<div id="conteneur"> 
     <img src="#" alt=""/> 
     <img src="#" alt=""/> 
     <img src="#" alt=""/> 
     <img src="#" alt=""/> 
</div>

div#conteneur {
overflow:hidden;
width:800px; }

div#conteneur img {
float:left;
margin-left:66px; }

div#conteneur img:first-child {
margin-left:0; }

Une technique alternative, qui fonctionne sur IE6 et adaptable sur une galerie dynamique :

<div id="conteneur">  
     <img class="sans_marge" src="#" alt=""/>  
     <img src="#" alt=""/>  
     <img src="#" alt=""/>  
     <img src="#" alt=""/>
     <img class="sans_marge" src="#" alt=""/>  
     <img src="#" alt=""/>  
     <img src="#" alt=""/>  
     <img src="#" alt=""/>  
</div>

div#conteneur { 
overflow:hidden; 
width:800px; } 
 
div#conteneur img { 
float:left; 
margin-left:66px; } 

div#conteneur img.sans_marge { 
margin-left:0; }

Modifié par BeliG (09 Apr 2010 - 11:28)

BeliG a écrit :
Salut,

C'est gentil de remercier les gens qui prennent de leur temps pour te proposer des solutions à ton problème.

Hey BeliG,

Je sens une frustration de ta part et vu le travail fourni pour répondre à ma question, je te comprends totalement.

je ne vais pas chercher 1000 excuses, c'est purement un oubli de ma part. Entre temps j'avais trouvé une autre parade et je n'ai plus pensé à revenir ici pour voir les réponses.

Quoi qu'il en soit, MERCI de ton aide.

Sans rancune j'espère