Discussion :

[blackmario]

Bonjour à tous !!

J'ai un gros soucis avec mon projet actuel, voici sa structure :

html:

Code :

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

1
2
3
4
5
6
7
 
<div id="div1">
     <div id="div2">
           <div id="div3">
           </div>
     </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
 
div {
margin:3px;
padding:10px;
}
 
#div2 {
position:absolute;
top:600px;
left:450px;
}
 
#div3 {
position:static;
}

Et le problème est que mon div3, au lieu d'être a 10 px du bord haut du div2, est a 24 px :/ Je ne vois pas du tout pourquoi... Peut être que vous pourrez m'amener sur une piste qui me permettrais de régler le problème ?

Merci d'avance :/

[elfamine]

Bonjour,

en considérant {} comme étant la margin et [] le padding

Code :

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

margin: 0; padding: 0;

{0[0]div1[0]0}
{0[0]div2[0]0}
{0[0]div3[0]0}

Code :

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

margin: 3; padding: 10;

{3px[10px]div1[10px]3px}

{3px[10px]div2[10px]3px}

{3px[10px]div3[10px]3px}

[blackmario]

Oui c'est le comportement que je devrais normalement avoir...

Mais au lieu de ça j'ai :

{3px[10px]div1[10px]3px}
{3px[10px]div2[10px]3px}
{3px[24px]div3[10px]3px}

(En supposant que les chiffres de droites sont les valeurs top)

Voilà un screen pour que vous puissiez mieux vous rendre compte :


On voit que le div 3 n'est pas centré par rapport au 2 or que normalement ça devrait être le cas...

[elfamine]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{
	margin: 10px; /* si tu veux 10px de marge il faut mettre 10 pas 3 */
	}
#div2{
	position:absolute;
	top:600px;
	left:450px;
	width: 220px;height: 220px; /* valeurs d'exemple */}
#div3{
	position:absolute;
	top: 0px;
	left: 0px;
/* par défaut les div ont une position static donc c'est en trop dans le code. Si tu veux centrer div3 sans prendre en considération le contenu de div2 tu va devoir mettre position en absolute et initialiser à top 0 et left 0 */
	width: 200px;height: 200px; /* l’élément a centrer doit etre de taille inférieure*/}