Discussion :

[grimmjow jaggerjack]

Bonjour voici mon problème:
Je n'arrive pas à mettre un margin-bottom à ma première section:

Code html :

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

1
2
<section id="conteneurPrincipal"></section>
<section id="conteneurResultat"></section>

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
#conteneurPrincipal {
	background-image: url("../img/fond.jpg");
	background-repeat: no-repeat;
	border: solid 7px white;
	clear: left;
	height: 360px;
	margin-bottom: 50px;
	margin: auto;
	width: 970px;
}
 
#conteneurResultat {
	border: solid 7px white;
	background-color: white;
	margin: auto;
	width: 970px;
}

[sk8matt]

Bonjour,

Essaye de déclarer ton margin-bottom seulement après ton margin : auto.
Ça devrais résoudre ton problème.

Par contre je ne saurais pas vraiment expliquer pourquoi c'est ainsi... Si quelqu'un à la réponse d'ailleurs je suis preneur.

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
#conteneurPrincipal {
	background-image: url("../img/fond.jpg");
	background-repeat: no-repeat;
	border: solid 7px white;
	clear: left;
	height: 360px;
	margin: auto;
	margin-bottom: 50px;
	width: 970px;
}
 
#conteneurResultat {
	border: solid 7px white;
	background-color: white;
	margin: auto;
	width: 970px;
}

[grimmjow jaggerjack]

Merci le problème est résolu.

[rodolphebrd]

Pourquoi cette déclaration ne prend pas en compte le margin-bottom ?

Code :

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

1
2
  margin-bottom: 50px;
  margin: auto;

alors que celle-ci oui :

Code :

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

1
2
  margin: auto;
  margin-bottom: 50px;

Je dirais que la priorité est donnée, par le navigateur, à la dernière déclaration dans le cas d'une redondance de définition. Margin:auto prend donc dans le premier cas la priorité sur margin-bottom.

Cependant cette écriture (même si elle donne un résultat dans le 2ème cas) n'est pas bonne.
Il faudra privilégier celle-ci :

Code :

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

1
2
3
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;

[Candygirl]

Code :

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

margin:0 auto 50px;

Pour la version réduite

[sk8matt]

Merci pour la précision