Placement, offsetTop d'un élément :/

Bonjour à tous !!

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

html:

Code:

---

1 2 3 4 5 6 7

<div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div>

---

css:

Code:

---

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 :/

Bonjour,

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

Code:

---

margin: 0; padding: 0;

---

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

Code:

---

margin: 3; padding: 10;

---

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

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

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

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 :
http://img15.hostingpics.net/pics/19208816pb.png

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

Code:

---

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*/}

---