[CSS] Positie div's binnen <div>

[me1299]

Ik ongeveer de volgende code:

code:

<div style='width: 755px; height: 411px;'>
    <div id='tekst' style='margin-top: 92px; margin-left: 501px; height: 140px; width: 230px;'>bla bla bla</div>
    <div id='navigatie' style='margin-top: 343px; margin-left: 191px; height: 189px; width: 49px;'>nog meer bla</div>
</div>

Het is de bedoeling dat ik binnen een DIV een paar andere div's positioneer. Alleen gaat nu de 2e DIV zich positioneren aan de hand van de bovenstaande ipv aan z'n parent.

Ik wil dus dat alle div's zich positioneren binnen de eerste (parent) <div>

Nu staat de laatste div 342 pixels naar beneden vanaf de onderkant van de 2e div ipv de 1e.

Weet iemand hoe ik dat kan oplossen?

Mocht het verhaal een beetje verward zijn dan geef ik graag extra toelichting.

[Verwijderd]

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

[coubertin119]

Extra toelichting is inderdaad gewenst .

Maar voor zover ik het nu snap, doe je het verkeerd met je margin-top in je 2e child-div. Als je daar de margin op 343px zet, is het normaal dat hij naar ondergaat.

Als je je verhaaltje trouwens uit de doeken doet met de benamingen parent-div en child-div gaat het een pak beter .

[ReallyStupidGuy]

Kun je niet een margin bottom gebruiken om dat voor elkaar te krijgen? Of natuurlijk 342-140=202px. Volgens mij kun je niet positioneren n.a.v. de parent en kijkt margin gewoon naar de afstand tussen het object en het dichtstbijzijnde object.

[me1299]

coubertin119 schreef op 21 januari 2004 @ 13:31:
Extra toelichting is inderdaad gewenst .

Maar voor zover ik het nu snap, doe je het verkeerd met je margin-top in je 2e child-div. Als je daar de margin op 343px zet, is het normaal dat hij naar ondergaat.

Als je je verhaaltje trouwens uit de doeken doet met de benamingen parent-div en child-div gaat het een pak beter .

Ik heb zeg maar 3Div's.

1 = {Parent}
2 = {Child 1}
3 = {Child 2}

Nu wil ik graag binnen {Parent}, {Child 1} & {Child 2} zetten. Alleen nadat ik {Child 1} heb gepositioneerd en {Child 2} wil positioneren, positioneerd {Child 2} zich aan de hand van {Child 1} ipv {Parent}.

Hier een plaatje: http://www.theforumisdown...les/1203/situatie_pic.JPG

De buitenkant is dan {Parent}

ReallyStupidGuy schreef op 21 januari 2004 @ 13:36:
Kun je niet een margin bottom gebruiken om dat voor elkaar te krijgen? Of natuurlijk 342-140=202px. Volgens mij kun je niet positioneren n.a.v. de parent en kijkt margin gewoon naar de afstand tussen het object en het dichtstbijzijnde object.

Ik kan ook negatieve margins gebruiken om het op te lossen. Dat is het probleem opzich niet.

Ik vind het alleen makkelijk bewerken als het een absolute waarde is vanaf de parent div in plaats van de bovenstaande.

[ Voor 26% gewijzigd door me1299 op 21-01-2004 13:41 ]

[Verwijderd]

DeathKnight schreef op 21 januari 2004 @ 13:39:
Ik vind het alleen makkelijk bewerken als het een absolute waarde is vanaf de parent div in plaats van de bovenstaande.

Dit is de normale flow van alle HTML elementen! Als je wilt dat iets t.o.v. z'n parent wordt gepositioneerd, i.p.v. z'n previous sibling gebruik je absolute positioning. In het linkje wat ik eerder heb gepost staat er vanalles over.

[me1299]

Verwijderd schreef op 21 januari 2004 @ 13:45:
[...]

Dit is de normale flow van alle HTML elementen! Als je wilt dat iets t.o.v. z'n parent wordt gepositioneerd, i.p.v. z'n previous sibling gebruik je absolute positioning. In het linkje wat ik eerder heb gepost staat er vanalles over.

De binnenste div is ook eigenlijk weer een child dus dan kan je het niet absoluut positioneren.

Maargoed bedankt voor de link. Die had ik via google dus ook al gevonden. Alleen wordt ik daar weinig wijs uit. Komt misschien omdat m'n hoofd een beetje verward is omdat ik niet helemaal lekker ben. (werk vandaag thuis)

[crisp]

ok, voorbeeldje dan:

HTML:

<div style="width: 755px; height: 411px; position: relative;">
    <div id="tekst" style="position: absolute; top: 92px; left: 501px; height: 140px; width: 230px;">bla bla bla</div>
    <div id="navigatie" style="position: absolute; top: 343px; left: 191px; height: 189px; width: 49px;">nog meer bla</div>
</div>