Discussion :

[jmde]

Bonsoir,

Je voudrais avoir une photo centré sur ma page, et en dessous 3 photos côte à côte.

Pour la 1ere photo pas de problème. (Est-ce que cela est correct de centrer la photo
De cette façon ?)

La 2ème se positionne au dessous mais n’est pas décaler « margin-left:19.5%; »

La 3ème et 4ème se positionnent au dessous de la 2ème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.photo-1 {
     margin-top:4%;
     margin-left:39%;
     width:22.3%;
     height:175px;
   }
 
.photo-2 {
    float:left;
    margin-left:19.5%;
    width:19%;
    height:150px;
 
}
.photo-3-4 {
     float:left;
     width:19%;
     height:150px;
   }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="photo-1">
<img src="Photos-1.gif" width="250" height="175" />
</div>
 
<div class="photo-2">
<img src="Photos-2.gif" width="175" height="250"/>
</div>
 
<div  class="photo-3-4">
<img src="Photos-3.gif" width="175" height="250"/>
</div>
 
<div  class="photo-3-4">
<img src="Photos-4.gif" width="175" height="250"/>
</div>

Merci pour votre aide.

Salutations

[Macmillenium]

Bonsoir,

Je dirais que tu t'es un peu compliqué la vie pour rien

Je voudrais avoir une photo centré sur ma page, et en dessous 3 photos côte à côte.

Il faut savoir que img est un élément de rendu inline (en-ligne) conféré par les feuilles de styles par défaut (celles des navigateurs) via un display:inline.
Le comportement par défaut des éléments inline c'est de s'aligner côte à côte.

Dans ce cas pas de soucis pour tes 3 images si tu fais simplement :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<img src="Photos-2.gif" width="175" height="250" alt="" />
<img src="Photos-3.gif" width="175" height="250" alt="" />
<img src="Photos-4.gif" width="175" height="250" alt="" />

Et pour les centrer, il suffit de les englober dans un bloc avec un text-align:center;

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#conteneur {
text-align:center;
}

Code XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="conteneur">
  <img src="Photos-2.gif" width="175" height="250" alt="" />
  <img src="Photos-3.gif" width="175" height="250" alt="" />
  <img src="Photos-4.gif" width="175" height="250" alt="" />
</div>

Pour la 1ere image que tu veux garder sur une seule ligne, il faudrait modifier son comportement naturel via un display:block afin qu'elle se comporte comme un élément block et occupe toute la largeur de son conteneur parent, renseigner sa largeur (déjà fait dans le HTML) et la centrer avec les marges automatiques (Dsl pas le temps pour détailler peut-être plus tard )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.Ma1erImg {
display:block;
margin:4% auto 0;
}

Ton code en conclusion :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#conteneur {
text-align:center;
}
 
.Ma1erImg {
display:block;
margin:4% auto 0;
}

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="conteneur">
  <img class="Ma1erImg" src="Photos-1.gif" width="250" height="250" alt="" />
 
  <img src="Photos-2.gif" width="175" height="250" alt="" />
  <img src="Photos-3.gif" width="175" height="250" alt="" />
  <img src="Photos-4.gif" width="175" height="250" alt="" />
</div>

[jmde]

Bonjour Macmillenium,

Merci pour ta réponse le résultat est super.

Par contre comme je ne m'attendais pas à ce code
je n'ai pas précisé dans mon premier post que j'avais
deux autres rangées de trois photos et la je ni arrive pas.
De même que pour régler les espaces entre la 1er rangée
et la 2ème rangée, et entre les photos de la 2éme rangée.

Salutations.

[Macmillenium]

je n'ai pas précisé dans mon premier post que j'avais
deux autres rangées de trois photos et la je ni arrive pas.
De même que pour régler les espaces entre la 1er rangée
et la 2ème rangée, et entre les photos de la 2éme rangée.

Oui je vois

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#conteneur {
text-align:center;
}
 
.Ma1erImg {
display:block;
margin:4% auto 0;
}
 
.conteneurImg {
margin-top:2%; /* Un peu d'espace entre le conteneur des img */
}
 
.conteneurImg img {
margin-right:2%; /* Un peu d'espace à droite des img */
}

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div id="conteneur">
   <img class="Ma1erImg" src="Photos-1.gif" width="250" height="250" alt="" />
 
  <div class="conteneurImg">
    <img src="Photos-2.gif" width="175" height="250" alt="" />
    <img src="Photos-3.gif" width="175" height="250" alt="" />
    <img src="Photos-4.gif" width="175" height="250" alt="" />
  </div>
 
  <div class="conteneurImg">
    <img src="Photos-5.gif" width="175" height="250" alt="" />
    <img src="Photos-6.gif" width="175" height="250" alt="" />
    <img src="Photos-7.gif" width="175" height="250" alt="" />
  </div>
 
  <div class="conteneurImg">
    <img src="Photos-8.gif" width="175" height="250" alt="" />
    <img src="Photos-9.gif" width="175" height="250" alt="" />
    <img src="Photos-10.gif" width="175" height="250" alt="" />
  </div>
</div>

[jmde]

Re Bonjour,

Encore une fois merci.

Par contre je n'arrive pas à mettre la 1er photo en alignement
de la 2ème photo de la 2ème rangée ou vice versa.

A-tu une solution ?

Salutations

[Macmillenium]

Par contre je n'arrive pas à mettre la 1er photo en alignement
de la 2ème photo de la 2ème rangée ou vice versa.

Il suffit de jouer sur les marges :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.conteneurImg img {
margin-right:2%; /* Un peu d'espace à droite des img */
}

Sa devrait aller si tu enlèves le margin-right.
Le code proposé est à adapté selon tes besoins