Willkommen ~Gast!
Registrieren || Einloggen || Hilfe/FAQ || Staff
Probleme mit der Registrierung im Forum? Melde dich unter registerEin Bild.
Autor Beitrag
000
02.11.2009, 16:02
chriss

Joa, folgendes Problem:

Ich habe einen DIV-Container der via JavaScript mit einem Flashfilm belegt wird. Dieser liegt, absolut positioniert, hinter dem eigentlichen Inhalt der Seite und soll nun am Ende der Seite erscheinen.

Google bringt mir zwar diverse Lösungsvorschläge, aber diese setzen alle auf eine relative Positionierung. Das macht aber mein tolles Konzept mit dem z-index kaputt …

Soweit so gut:

Quellcode:html, body {
    height: 100%;
}
body {
    margin:      0;
    padding:     0;
    font-family: Verdana, Sans-Serif;
    font-size:   65%;
    background:  #e3e3e8 url(../images/bg_autmn_top.jpg) top no-repeat;
    color:       #525252;
}
#wrap-all {
    position: absolute;
    width:    90%;
    z-index:  42;
}
#flash {
    width:      100%;
    height:     720px;
    position:   absolute;
    bottom:     0;
    z-index:    23;
    background: red;
}
/* […] */
 Und der dazugehörige HTML-Code (beschränkt aufs Wesentliche):

Quellcode:<!DOCTYPE html>
<html>
    <head>
        <title>Flashtest</title>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars  = {};
            var params     = {
                                wmode: "transparent",
                                scale: "noscale",
                                align: "middle"
                             };
            var attributes = {};
            swfobject.embedSWF("flash/autumn_bg.swf", "flash", "100%", "720", "9.0.0","expressInstall.swf", flashvars, params, attributes);
        </script>
        <!-- […] -->
    </head>
    <body>
        <h1><!-- […] --></h1>
        <div id="wrap-all">
            <!-- […] -->
        </div>
        <div id="flash">
            <h2>Fehler</h2>
            <p>Tz, tz, tz. Du Nase hast entweder keinen Flash-Player installiert oder JavaScript deaktiviert.</p>
        </div>
    </body>
</html>
 Nun richtet sich #flash auch hervorragend an der unteren Browserkante aus. Soll er aber gar nicht, er soll am Seitenende erscheinen. Jemand eine Idee?

--

Dieser Beitrag wurde am 02.11.2009 um 16:06 von chriss bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
001
03.11.2009, 10:01
chriss

Mein bisheriger Lösungsansatz:

Quellcode:<style type="text/css" media="screen">
    body {
        margin: 0;
        height: 100%;
    }
    #flash {
        position:   fixed;
        bottom:     0;
        width:      99%;
        height:     300px;
        z-index:    0;
    }
    #content {
        position: static;
        z-index:  42;
    }
</style>

<!--[if lt IE 7]>
<style type="text/css" media="screen">
    html, body {
        padding:    0;
        overflow-y: hidden;
    }
    #container {
        height:   100%;
        width:    100%;
        overflow: auto;
    }
    #flash {
        z-index:  0;
        position: absolute;
    }
</style>
<![endif]-->
 Und wieder das HTML-Dokument dazu:
Quellcode:<!DOCTYPE html>
<html>
    <head>
        <title>Flashtest</title>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars  = {};
            var params     = {
                                wmode: "transparent",
                                scale: "noscale",
                                align: "middle"
                             };
            var attributes = {};
            swfobject.embedSWF("flash/autumn_bg.swf", "flash", "100%", "720", "9.0.0","expressInstall.swf", flashvars, params, attributes);
        </script>
        <!-- […] -->
    </head>
    <body>
        <div id="container">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <!--[…]-->
            </div>
        </div>
        <div id="flash">
            <h2>Fehler</h2>
            <p>Tz, tz, tz. Du Nase hast entweder keinen Flash-Player installiert oder JavaScript deaktiviert.</p>
        </div>
    </body>
</html>
 Die Positionierung läuft damit, aber jetzt habe ich den Flashfilm, ganz egal was ich mit dem z-index mache, immer im Vordergrund. (Ich krieg’ graue Haare!)

Ich schätze Mal der Browser holt fixed vor static. Den z-index gibt’s halt nur bei position: absolute;… hat da vielleicht jemand eine Idee? Den Blindtext bitte so oft kopieren das man scrollen muss. Ich hab’ das der Übersicht halber mal gekürzt.

--

Dieser Beitrag wurde am 03.11.2009 um 11:05 von chriss bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
002
03.11.2009, 18:01
Krifitze

Z-Index appliziert auch auf relativ-positionierte Elemente, nicht nur absolut; eigentlich auf alles außer static.

Dass der Film immer oben ist, liegt wahrscheinlich an der Bugginess von Flash. Ich werd aber deinen Code mal ausprobieren und so. Uno Momento ...

*edit
Nope, liegt wohl daran, dass der z-index bei static keine Wirkung hat, caste ich den Content nach relative, ist #flash im Hintergrund.

--

Website

Dieser Beitrag wurde am 03.11.2009 um 18:16 von Krifitze bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche
003
04.11.2009, 08:08
chriss

Jupp, das hatte ich auch schon… nur dann funktioniert das tolle Konstrukt halt nicht mehr.

Na ja, ich bastel jetzt an einer JS-Lösung für die IE-Geschwister, mal schauen was dabei herumkommt.

--
zum Seitenanfang zum Seitenende Profil || Suche
004
04.11.2009, 09:24
chriss

Nicht toll, aber funktioniert:

CSS:
Quellcode:html, body {
    height: 100%;
}
#background {
    position: absolute;
    top:      0;
    width:    100%;
    height:   100%;
    z-index:  42;
    margin:   0 auto -720px;
}
#meinFlash3 {
    position: fixed;
    height:   100%;
    width:    100%;
}

#meinFlash2 {
    height:   100%;
    position: relative;
}

#meinFlash {
    position: absolute;
    bottom:   0;
}
 CSS nur für den IE 7:
Quellcode:<!--[if IE 7]>
    <style type="text/css" media="screen">
        #background {
            position: absolute !important;
            z-index:  42       !important;
            }
        #meinFlash3 {
            position: absolute !important;
            bottom:   0        !important;
            z-index:  23       !important;
        }
    </style>
<![endif]-->
 JavaScript-Kram für IE 6 und IE 7:
Quellcode:function getSize() {
    var myWidth = 0, myHeight = 0;

    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth  = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        myWidth  = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        myWidth  = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }

    return myHeight;
}

function moveFlashBg() {
    if(getSize() < 720) {
        var to = document.body.scrollTop + (getSize() - 720);
    } else {
        var to = document.body.scrollTop + (getSize() - 720);
    }

    document.getElementById('meinFlash').style.top = to + 'px';
}

var WLinksTimer;
var IE = document.all?true:false;

if(IE) {
    window.onload   = moveFlashBg;
    window.onscroll = moveFlashBg;
}

--
zum Seitenanfang zum Seitenende Profil || Suche