Divs binnen container positioneren

[BLACKfm]

Hallo,

Voor mij een lastig vraagstuk in de categorie "position: wat-moet-het-zijn".

Ik heb een containerdiv van bijvoorbeeld 500x500 pixels en wil daarbinnen vrij andere divjes plaatsen.

Ik heb de container een position:relative gegeven en een subdiv position:absolute.

Vervolgens speel ik wat met de margins zodat ik de subdiv op de juiste plek heb. Echter wil ik meerdere subdivs toevoegen die eigenlijk weer hun margins baseren op de linkerbovenhoek van de container.

De divopbouw heb ik nu zo:

HTML:

<div class="imagecontainer">
    <div class="verkeersbord">
        <div class="haaientand">
            <div class="asfalt">
                <div class="inspectieput">
                </div>
            </div>
        </div>
    </div> 
</div>

Met de volgende CSS

Cascading Stylesheet:

<style type="text/css">
.imagecontainer {
    margin-left:auto;
    margin-right:auto;
    position:relative;

}

.verkeersbord {
    position: absolute;
}
    
.haaientand {
    position: absolute;
}

.asfalt {
    position: absolute;
}

.inspectieput {
    position: absolute;
}
</style>

Met deze opbouw moet ik de positie echter steeds bepalen, relatief aan de bovenliggende div.
Met een beetje puzzelen kom ik daar wel uit, maar mocht ik daar ooit een wijziging in moeten aanmaken dan moet ik dus op alle onderliggende div's ook een aanpassing toepassen.

Het moet vast mogelijk zijn om zelf het beginpunt te bepalen, maar het liefst houd ik deze vast aan de container.

Iemand die me daar bij op weg kan helpen?

Edit:
Hier een snel voorbeeld dat ik gebouwd heb. Moet nog even met de oprachtgever overleggen of dit het gewenste resultaat is kwa uitwerking, dus let vooral niet op of het mooi is (of voor de kenners, volgens de richtlijnen).

Met de subdivs wil ik dus mouseover images plaatsen.

http://dev.gaim.nl/info/

p.s. ook geen cross-browser check gedaan, in chrome werkt het in ieder geval zoals het moet.

[ Voor 11% gewijzigd door BtM909 op 14-02-2013 23:51 ]

[Beatboxx]

position: relative;

dan kan je positionen tov je parent div

[Beatboxx]

position: relative;

dan kan je positionen tov je parent div

[mcDavid]

Wat is het idee dat je al die divs genest hebt? Als ik het zo bekijk zit er helemaal geen parent-child structuur in wat je weer wilt geven.

En overweeg SVG te gebruiken, lijkt me ook logischer.

[ Voor 17% gewijzigd door mcDavid op 14-02-2013 23:48 ]

[P.O. Box]

als je position: absolute gebruikt, wil het ook wel nut hebben om dan de absolute positie zelf mee te geven.... left, top, bottom e/o right...

[Bosmonster]

Doordat je nu alles genest hebt wordt alles absoluut gepositioneerd ten opzichte van de parent (position:relative en position:absolute doen dit beiden).

Je opzet is op zich dus goed, alleen moet je niet alle div's nesten.

[BLACKfm]

P.O. Box schreef op vrijdag 15 februari 2013 @ 08:27:
als je position: absolute gebruikt, wil het ook wel nut hebben om dan de absolute positie zelf mee te geven.... left, top, bottom e/o right...

Als je even leest zie je dat "ik de positie middels margins dan wel goed krijg". Maar ik noemde alleen even de belangrijkste details, aan margins, achtergrondkleur en Z index hebben we hier niks .

Bosmonster schreef op vrijdag 15 februari 2013 @ 09:27:
Doordat je nu alles genest hebt wordt alles absoluut gepositioneerd ten opzichte van de parent (position:relative en position:absolute doen dit beiden).

Je opzet is op zich dus goed, alleen moet je niet alle div's nesten.

Ik kan het nu niet bekijken, maar ik deed dus eerst alle divjes 'los' in de container;

code:

<div class="container">
   <div class="1"> </div>
   <div class="2"> </div>
   <div class="3"> </div>
   <div class="4"> </div>
</div>

Maar dan begint div 2 dus recht onder div 1, en niet in de linker bovenhoek van de container, wat mijn gewenste effect is.

[Bosmonster]

Je laatste voorbeeld zou moeten kloppen als je container relative is en je div's daarin absolute.

Alleen mogen classes niet met een cijfer beginnen natuurlijk

edit: in je code in je startpost heb je ook geen positie opgegeven (geen left/right/etc). Dan komen ze, ondanks je absolute gewoon na elkaar.

[ Voor 31% gewijzigd door Bosmonster op 15-02-2013 11:34 ]

[BLACKfm]

Dan begrijp ik het bericht van P.O.Box wellicht verkeerd,

Naar mijn idee is dat 'left/right/etc.' een verkorte weergave van bijvoorbeeld 'margin-left/margin-right'

Maar margins heb ik dan wel toegepast (zie bron van voorbeeldlink), echter moet ik dus relatief aan de bovenliggende div deze positie bepalen (als ik de volgende div dus linksboven de vorige wil hebben moet ik met 'margin-left: -200px' werken.

Maar ik krijg het dus niet voor elkaar dat het op basis van de container geplaatst wordt (Waar het 0-punt links bovenin ligt).

Het was ook pas het eerste opzetje, dus ik ga morgen dan maar gewoon even spelen en dan moet het wel lukken. Kan niet moeilijk zijn .

[Bosmonster]

Margin's zijn iets heel anders dan positionering via left/right.

[mcDavid]

BLACKfm schreef op vrijdag 15 februari 2013 @ 15:24:
Dan begrijp ik het bericht van P.O.Box wellicht verkeerd,

Naar mijn idee is dat 'left/right/etc.' een verkorte weergave van bijvoorbeeld 'margin-left/margin-right'

Haha dat idee mag je best hebben, maar gelukkig werken browsers volgens een goed gedefineerde standaard, en niet volgens jouw of mijn idee

De officiële specificatie vind je hier: http://www.w3.org/TR/CSS21/
of een iets leesbaardere vertaling (bijvoorbeeld) hier: http://w3schools.com/cssref/default.asp