[CSS] DIV layer positie

[Ripley]

Voor een oefenwebsite wil ik verschillende afbeeldingen en flash animaties in DIV layers op één bepaalde positie weergeven. Met een show/hide layer script worden de objecten om beurten op deze positie getoond.

Nu heb ik dit voor IE en FF 'werkend' gekregen. Hiervoor heb ik echter "position:relative;" gebruikt. Met absolute kreeg ik het niet voor elkaar om de objecten in IE en FF op dezelfde locatie te tonen.

Nu heeft deze methode twee nadelen. Ten eerste is het lastig omdat voor elk nieuw object de "top" waarde veranderd. Ten tweede 'flikkerd' het scherm even als in IE een nieuwe flash animatie geladen wordt. Zie de site. Dit gebeurd niet als ik "position: absolute;" gebruik.

Volgens mij doe ik iets niet goed. Welke positioneringmethode kan ik het best gebruiken om de layers in zowel IE als FF goed weer te geven?

Dit is de CSS code van twee (foto) layers:

code:

#l_photo_01 {
    position: relative;
    left: 57px;
    top: 30px;
    width: 400px;
    height: 300px;
    z-index: 1;
    visibility: hidden;
}
#l_photo_02 {
    position: relative;
    left: 57px;
    top: -270px;
    width: 400px;
    height: 300px;
    z-index: 2;
    visibility: hidden;
}

[Milt]

De oplossing is om je id="box_m3" layer de stijl position:relative te geven. Die layer vormt dat de basis waarop de absolute layers met de flash movies zich aan positioneren. Overigens heeft de stijl display:inline geen zin bij de box_m3 layer want je hebt ook float:left en dat betekent dat het altijd een block element is. Maar goed... Probeer deze code eens:

Cascading Stylesheet:

#box_m3 {
    position:relative;
    float:left;
    width:550px;
    height:455px;
    padding-left:30px;
    padding-top:25px;
    background-attachment:scroll;
}

#box_m3 .flashplaceholder {
    position:absolute;
    width:400px;
    height:300px;
    left:57px;
    top:30px;
    visibility:hidden;
    z-index:1;
}

HTML:

<div class="flashplaceholder">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="300" title="Bounce">
        <param name="movie" value="../fla/bounce.swf" />
        <param name="quality" value="high" />
        <embed src="../fla/bounce.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed>
    </object>
</div>

<div class="flashplaceholder">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="300" title="Crusher">
        <param name="movie" value="../fla/crusher.swf" />
        <param name="quality" value="high" />
        <embed src="../fla/crusher.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed>
    </object>
</div>

<div class="flashplaceholder">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="300" title="Drawing">
        <param name="movie" value="../fla/drawing.swf" />
        <param name="quality" value="high" />
        <embed src="../fla/drawing.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed>
    </object>
</div>

Kan zijn dat je positie van de flashplaceholder nog iets moet verschuiven want volgens mij wordt de padding van box_m3 genegeerd voor de positie van de placeholder layers. Dus je moet dan nog even de padding-left en padding-top van de box_m3 layer bij respectievelijk left en top van de placeholder layers optellen.

[Ripley]

Dat was 'm Milt! Ontzettend bedankt dat je de moeite hebt genomen de code door te spitten en te antwoorden.

Ben hier welgeteld 1 dag mee bezig geweest. Ook op websites als positioniseverything.net kon ik het verlossende antwoord niet vinden. Ik denk dat ik me toch nog wat meer moet verdiepen in de basics van het positioneren.

[Milt]

Ik kan van harte het boek CSS - The Definitive Guide van Eric Meyer aanbevelen. Fantastisch boek wat je eigenlijk gewoon van begin tot eind gelezen moet hebben als je veel HTML'ed.