Alignement de 4 images horizontalement

[programmeur400]

bonjour, j essai d'aligner 4 images horizontalement, voici le code:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id="lampions">
 
	  <div id="lampion1">
           <img src="l1.jpg">
      </div>
	  <div id="lampion2">
           <img src="l2.jpg">
      </div>
	  <div id="lampion3">
           <img src="l3.jpg">
      </div>
	  <div id="lampion4">
          <img src="l1.jpg">
      </div>
 
    </div>
 
.... et le css:
#lampions
{
   width: 600px;
   height: 120px;
   margin-bottom: 10px;
}
 
#lampion1
{
   float:left;
}
#lampion2
{
   margin-left: 140px;
}
#lampion3
{
   margin-left: 280px;
 
}
#lampion4
{
   margin-left: 420px;
}

chaque image fait 130 en width et 120 en height

je constate que pour les deux premieres en partant de la gauche elles sont alignees par contre les deux autres ne sont pas sur la meme ligne elles sont en dessous, pourquoi?

[jreaux62]

Bonjour,
tu n'as besoin que de ca :

Code :

1
2
3
4
#lampion1, #lampion2, #lampion3, #lampion4
{
   float:left;
}

Mais tu peux ajouter ca :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
#lampion1, #lampion2, #lampion3, #lampion4
{
   float:left;
   margin:0; padding:0;
   width: 130px;
   height: 120px;
}
#lampion1 img, #lampion2 img, #lampion3 img, #lampion4 img
{
   border:0; text-decoration:none;
   width: 130px;
   height: 120px;
}

Et pour finir, il faut mettre des attributs alt="..." et un / de fermeture dans les <img ... />

Code :

<img src="l1.jpg" alt="..." />

Cela dit, si ce sont juste 4 images accolées (genre bandeau), cela suffit :

Code :

1
2
3
<div id="lampions">
           <img src="l1.jpg" alt="" /><img src="l2.jpg" alt="" /><img src="l3.jpg" alt="" /><img src="l4.jpg" alt="" />
</div>

[programmeur400]

ok j ai compris, cependant je desire mettre un espace entre chacune des 4 images qui doivent remplir 600 de largeur du coin gauche de la premiere au coin droit de la derniere.comment faire avec le code que tu m as proposé qui est celui là.(car je le repete encore ton code aligne quatre images à la suite mais il ne decide pas de l'espace qu'on met entre chacune d'elles):

Code :

1
2
3
4
5
6
7
 
<div id="lampions">
	<img src="l1.jpg" alt=""/>
        <img src="l2.jpg" alt=""/>
        <img src="l1.jpg" alt=""/>
        <img src="l2.jpg" alt=""/>
</div>

[jreaux62]

Le plus simple :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
	.lampion
	{
	   float:left;
	   margin:0 10px; /* 10px a droite et a gauche de l image */
	   padding:0;
	   width: 130px;
	   height: 120px;
	}
</style>
<div id="lampions">
	<img class="lampion" src="l1.jpg" alt="" />
	<img class="lampion" src="l2.jpg" alt="" />
	<img class="lampion" src="l3.jpg" alt="" />
	<img class="lampion" src="l4.jpg" alt="" />
</div>

[programmeur400]

desolé je comprends pas ta theorie, pourquoi tu mets un float left à chaque image?en effet chaque image est à gauche de quoi exactement?et que veut dire margin :0 10px (c'est 0 ou 10?)

[jreaux62]

Ici, tu es sur le formum css.
-> Fais une recherche gogole sur "margin css" et float css" ...
-> Ou un peu de lecture : cours et tutoriels CSS
-> et je pense que ceci n'est pas de trop : Les bases du HTML