Positionnements dans une page

Version imprimable

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:

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:

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

Bonsoir,

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

Citation:

Envoyé par jmde

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:

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:

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

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 :P)
Code:

1 2 3 4 5 .Ma1erImg { display:block; margin:4% auto 0; }
Ton code en conclusion :
Code:

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

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>

26/04/2009, 12h27
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.

Citation:

Envoyé par jmde

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:

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:

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>

26/04/2009, 17h04
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
26/04/2009, 17h16
Macmillenium
Citation:

Envoyé par jmde

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:

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 ;)
27/04/2009, 20h41
jmde

Bonsoir MacMillenium,

Merci pour ta réponse c'est bien le margin-right qui m'embêtait.

A l'occasion pourait-tu me dire comment faire pour mettre sur le haut
est le bas un texte différent pour chaque photos (pas à l'exterieur de
la photo mais dans son espace).

Salutations