Discussion :

[CLeBeR]

Bonjour,
J'essaye depuis plusieurs heures de centrer trois images que j'ai de façon à ce qu'il y ait toujours le même espacement entre elles (pour cette parie ça va). Là ou vient le problème c'est que je voudrais que la largeur du vide entre "l'écran" et le premier carré soient la même (que tous les carrés soient centrés pour faire plus simple). Lorsque j'essaye de les centrer le troisième carré passe en dessous... Un vrai casse tête. Le dernier problème c'est lorsque la page est réduite, le carré de droite passe en dessous mais n'est pas aligné avec le premier(donc celui du haut à gauche).
Je vous donne le code que j'ai fait :
HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="conteneurcarre"> <!-- Div que je voulais utiliser pour centrer -->
	<div id="carre1">
	    <img src="images/carre1.jpg" alt="Mon premier carré">
	</div>
	<div id="carre2">
	    <img src="images/carre2.jpg" alt="Mon deuxième carré">
    	</div>
	<div id="carre3">
	    <img src="images/carre3.jpg" alt="Mon troisième carré">
	</div>
<div>

CSS :

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
20
21
22
23
24
#carre1{
    width:400px;
	height:400px;
	float:left;
	margin-left:2em;
	margin-right:1em;
	margin-top:1em;
}
#carre2{
    width:400px;
	height:400px;
	float:left;
	margin-left:1em;
	margin-right:1em;
	margin-top:1em;
}
#carre3{
    width:400px;
	height:400px;
	float:left;
	margin-left:1em;
	margin-right:1em;
	margin-top:1em;
}

Merci de votre aide !

[Invité]

Bonjour,
utilise plutôt des pourcentages que des valeurs en pixels.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#carre1,#carre2,#carre3{
  width:31.33%;
  margin:1%; 
  min-width:400px;
  height:400px;
  text-align:center;
  float:left;
}
#carre1 img,#carre2 img,#carre3 img {
  width:400px;
  height:400px;
}

Exemple : http://codepen.io/jreaux62/pen/yyLOQZ

N.B. Dans cet exemple, au lieu de 3 ids, on pouvait utiliser une seule class "carre" pour les 3 éléments.

Plus simple encore :

Code html :

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

1
2
3
4
5
<div id="conteneurcarre">
	<div><img src="images/carre1.jpg" alt="Mon premier carré" /></div>
	<div><img src="images/carre2.jpg" alt="Mon deuxième carré" /></div>
	<div><img src="images/carre3.jpg" alt="Mon troisième carré" /></div>
<div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#conteneurcarre div{
  width:31.33%;
  min-width:400px;
  height:400px;
  text-align:center;
	float:left;
	margin:1%;
}
#conteneurcarre div img {
  width:400px;
  height:400px;
}

CSS signifie en effet : Cascading Style Sheets

[CLeBeR]

Bonjour,
Merci beaucoup pour ta réponse ! Elle m'a été d'une grande aide. J'ai cependant modifié le code. Je n'utilise pas d'image directement mais un background. Le principe est le même sauf que je peux écrire du texte par dessus.

HTML :

Code html :

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

1
2
3
4
<div id="carre1">
	<h1>Titre</h1>
	<p id="MonParagraphe">Paragraphe</p>
</div>

CSS :

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
#conteneurcarre div{
	width:31.33%;
	margin:1%; 
	min-width:400px;
	height:400px;
	text-align:center;
	float:left;
}
#conteneurcarre img {
	width:400px;
	height:400px;
}
#carre1{
	background-image: url(../images/carre1.jpg)
}

Par contre si je veux pousser un peu et adapter la largeur du carré, de façon à ce que dès que le dernier de la ligne descend, la largeur des carrés restants s'agrandit pour remplir la page et combler le vide laissé, je dois utiliser des Media Queries ?
Merci de ton aide !

[CLeBeR]

Bonjour à tous !
J'ai réussi à utiliser les media queries, mon site s'adapte maintenant à tous les types d'écran.
Voici le code CSS :

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
20
21
22
@media screen and (min-width: 1px) and (max-width: 1300px){
#conteneurcarre div{
	width:98%;
	margin:1%;
	min-width:400px;
	height:400px;
	text-align:center;
	float:left;
}
}
 
 
@media screen and (min-width: 1300px) and (max-width: 1450px){
#conteneurcarre div{
	width:48%;
	margin:1%;
	min-width:400px;
	height:400px;
	text-align:center;
	float:center;
}
}

Sujet résolu, merci de votre aide !