[html / css/ js] Glassbox toont niet 100% height & width div

[Verwijderd]

Goedenavond,

Ik probeer met verwoedde pogingen Glassbox te implementeren.
Maar om eerlijk te zijn wil het niet bepaald lukken.

GlassBox JS homepage
http://www.glassbox-js.com/

Het eerste pogingkje dat wil wel lukken. (met veel gepruts al dan wel krijg ik het voor elkaar om het algeheel op het scherm te tonen... _{Af en toe vraag ik me heel erg af waarom die script developers bij het tonen van een voorbeeld niet gewoon een basis voorbeeld tonen maar een enorme spaghettihoop aan code in elkaar proppen en vaak zonder uitleg en zoiets hebben... mooi he.. zoek maar uit!}

Maar goed...

Nu toont het script zich prima.

Zie het voorbeeld:
voorbeeld werkend exemplaar zonder achtergrond
http://www.poging2.nl/test/glassbox/standaard.htm

Zodra ik echter een div wil toevoegen met een afbeelding om de algehele achtergrond te bedekken met een foto.
Dan gaat het mis.

Deze toont zich direct voor de tekst en alles. Alsof de z-index van de 2e div op 1000 staat.
Maar dit is gewoon 0.

De CSS code van de div die de achtergrond moet bedekken is als volgt:

Cascading Stylesheet:

.bg {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    visibility: visible;
}
.bg img {
    width: 100%;
    height: 100%;
}

En daarbij de HTML code van de div en de afbeelding is:

HTML:

<div class="bg">
    <img alt="achtergrond" src="images/bg114.jpg" />
</div>

Echter zodra ik het visibility argument in het css instel op visible dan overlapt het gelijk alles.
En hier loop ik vast.

Kijk zo ziet het er dan uit
http://www.poging2.nl/test/glassbox/adaptation.htm

Ondanks dat ik duidelijk in het Javascript configuratie bestand aangeef dat de z-index hoger dan 0 moet zijn weigert hij.

JavaScript:

<script type="text/javascript">
path_to_root_dir = "";

window.onload = function(){
    
    var leftBox = new GlassBox();
    leftBox.init( 'leftBox', '200px', '', 'visible' );
    leftBox.zindex('200');
    leftBox.ipos();
        
    var mainBox = new GlassBox();
    mainBox.init( 'mainBox', '650px', '', 'hidden' );
    mainBox.zindex('200');
    mainBox.ipos();
    
};
</script>

Ziet iemand misschien het probleem?

Bij voorbaat hartelijk dank!

[ Voor 195% gewijzigd door BtM909 op 09-02-2011 15:19 ]

[NMe]

Als je nu je vraag had laten staan en het antwoord ook had gepost dan had iemand anders er misschien nog wat aan gehad. Je vraag weghalen en weigeren het antwoord te posten is bijzonder egoïstisch: je hebt er geen moeite mee om zelf hulp te vragen maar als je anderen kan helpen gooi je hen de deksel op de neus door je topic onklaar te maken. Ik hoop dat je dat een volgende keer beter aanpakt...

[BtM909]

Aangezien popolskuprosze beloofd heeft zijn oplossing toe te voegen, wordt dit topic weer geopend

[ Voor 3% gewijzigd door BtM909 op 09-02-2011 15:40 ]

[Verwijderd]

BtM909 schreef op woensdag 09 februari 2011 @ 15:40:
[mbr]Aangezien popolskuprosze beloofd heeft zijn oplossing toe te voegen, wordt dit topic weer geopend :)[/]

edit:

Het probleem is inmiddels opgelost.
Zat hem in de cache van FF.

In het FF menu
Extra -> Recente Navigatie geschiedenis wissen -> Alles wissen

Maar ben er helaas uiteindelijk achter gekomen dat het probleem niet op te lossen is in IE daar IE uberhaupt nog wel wat bugjes heeft met het Glassbox JS script. Helaas genoeg.

Want het is een bijzonder mooi script. Maar kan het helaas uiteindelijk toch niet gebruiken.