Flash im Background


Willkommen in der Welt des Flash/Background Mysteriums!

Ich glaub das ist insgesamt ein leidiges Thema… ich hab in vielen Foren Lösungsvorschläge gesehen, aber funktioniert hat bei mir nichts wirklich 100%ig.

Es geht hier wieder um diese Seite und das ist der letzte Punkt an dem ich hänge. Die Flash purzelt - wie man sieht - ganz unten herum.

So sollte es jedoch eigentlich aussehen: [ATTACH]2415.vB[/ATTACH]


Die Anforderungen:

[ul]
[li]Der gesamte Navigations- und Contentbereich sollte sich - wie jetzt bereits - individuell an die Bildschirmbreite zentrieren.[/li][li]Die Flash sollte wie auf dem Foto immer etwas versetzt im Hintergrund „mitgehen“ und 100% an die Bildschirmhöhe anpassen.[/li][/ul]

Leider hab ich bis jetzt immer nur 1 der beiden Anforderungen hinbekommen. :sad:

Ich hab es mit „position: absolute; z-index…“ probiert, aber dann hab ich wieder Probleme mit der Zentrierung.
Desweitere zusätzlich mit value=„transparent“.

Ich weiß einfach nit, wie das hinhaut, dass BEIDES funktioniert.
DANKE für eure Hilfe!

:idea: Index.php und CSS siehe hier unterhalb!

Index.php

[HTML]

<?php if(isset($_POST['send'])) { if($_POST['leer'] == '') { mail('office@rawmatters.at', 'Neue Website-Anfrage', 'Vorname Nachname: '.$_POST['name']."\r\n".'E-Mail: '.$_POST['email']."\r\n".'Telefon: '.$_POST['telefon']."\r\n".'Nachricht: '.$_POST['message']); header("Location: index.php?go=contact&action=thanks"); } } ?> Raw Matters - Ein ungeschliffener Performanceabend <?php if(!isset($_GET['go'])) { $_GET['go'] = 'home'; } ?>
  • IDEE
  • ÜBER UNS
  • TEILNEHMEN
  • RÜCKSCHAU
  • NETZWERK
  • KONTAKT
raw matters  logo
</div>
    <div class="content">
        <?php include($_GET['go'].'.php'); ?>
    </div>
    <div id="footer">
            <a  href="index.php?go=impressum">IMPRESSUM</a>  |  <a  href="index.php?go=contact">KONTAKT</a>
    </div>
</div>
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="341" height="340" >
        <param name="wmode" value="transparent" />
        <param name="movie" value="fla/wurzel.swf" />
        <param name="quality" value="high" />
        <param name="swfversion" value="6.0.65.0" />
        <!-- Dieses param-Tag fordert Benutzer von Flash Player  6.0 r65 und höher auf, die aktuelle Version von Flash Player  herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese  Aufforderung sehen, löschen Sie dieses Tag. -->
        <param name="expressinstall" value="scripts/expressInstall.swf" />
        <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
        <!--[if !IE]>-->
        <object data="fla/wurzel.swf" type="application/x-shockwave-flash" width="341" height="340">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="scripts/expressInstall.swf" />
        <!-- Im Browser wird für Benutzer von Flash Player 6.0  und älteren Versionen der folgende alternative Inhalt angezeigt. -->
        <div>
            <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
            <p><a  href="http://www.adobe.com/go/getflashplayer"><img  src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"  alt="Adobe Flash Player herunterladen" width="112" height="33"  /></a></p>
        </div>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
    </object>
</body>
[/HTML]

Css

 @charset "utf-8";
 
 body { font-family: Verdana, Geneva, sans-serif; color: #404040; font-size: 0.95em; line-height: 1.5em; margin: 0px; }
 
 p { padding: 0 0 15px 0; }
 a { color: #e00079; text-decoration: none;  }
 a:visited { text-decoration: none; }
 a img { border: none;}
 li { list-style-type: none;}
 
 table { border: none; }
 td { font-family: Verdana, Geneva, sans-serif; font-size: 0.95em; width: 160px; }
 th { font-family: Verdana, Geneva, sans-serif; font-size: 0.95em; }
 
 h1 { font-family: Verdana, Geneva, sans-serif; font-size: 1.6em; text-align: left; line-height: 1.05em; }
 h2 { font-family: Verdana, Geneva, sans-serif; font-size: 1.3em;  padding: 0 0 15px 0; }
 h3 { font-family: Verdana, Geneva, sans-serif; font-size: 1.2em; }
 h4 { font-family: Verdana, Geneva, sans-serif; font-size: 1.3em;  padding: 15px 0 0 0; color: #e00079; }
 
 .large { font-family: Verdana, Geneva, sans-serif; font-size: 1em; line-height: 1.5em; }
 .small { font-family: Verdana, Geneva, sans-serif; font-size: 0.75em; line-height: 1.25em; }
 
 .pink { font-family: Verdana, Geneva, sans-serif; font-size: 1em; color: #e00079;  font-weight: bold; }
 .pink_std { font-family: Verdana, Geneva, sans-serif; font-size: 0.95em; color: #e00079;  }
 
 .justified { font-family: Verdana, sans-serif; text-align: justify; }
  
 /* Schrift ENDE */
 
 
 .wrapper {
     width: 750px;
     margin: 0px auto;
     min-height: 100%; 
 }
 
 #logo_header {
     margin: 120px 0 25px 0;
 }
 
 #fb {
     float: left;
     padding: 20px 0 0 0;
 }
 
 .content {
     width: 585px;
     margin: 0 0 25px 0;
     float: right;
     text-align: justify;
     font-size: 0.95em;
     line-height: 1.5em;
 }
 
 .artikelbild {
     margin: 0 0 20px 25px;
     border: solid 0.1em #999;     
 }
 
 .linie {
     border-bottom: 0.95em solid #e00079;
 }
 
 #FlashID {
     position: absolut;
     z-index: -1;
     height: 100%;
 }
 
 #footer {
     clear: both;
     text-align: right;
     padding: 20px 0 20px 0;
     color: #e00079;
     font-size: 0.7em;
 }
 
 
 /* NAVIGATION */
 
 ul.menue { display: inline; } /* Breite muss noch angepasst werden */
 ul.menue  li { background: #e00079 ; color: #FFF ; float: left ;  list-style-type: none ; text-align: center ;  font-size: 0.9em; }
 ul.menue  li a { color: #FFF ; text-decoration: none ; display: block ;  width: 125px ; height: 40px ; line-height: 35px ; font-weight: bold ; }   /* Breite und Höhe eines Menüpunktes */
 ul.menue  li:hover a { border-bottom: 12px solid #e00079 ; } /* Ausbuchtung unten */
 
 
 /* GALERIE */
 
 .container {
     width: 585px;
     float: left;
     padding: 0 0 50px 0;
 }
 
 ul.gallery li a {
     float: left;
     padding: 15px 15px 40px 15px;
     background: #FFF;
     border: 1px solid #828181;    
 }
 
 ul.gallery li a.pic-1 {
     z-index: 5;
     -ms-transform: rotate(-3deg);
     -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
     -o-transform: rotate(-3deg);
 }
 
 ul.gallery li a.pic-2 {
     z-index: 3;
     transform: rotate(4deg);
     -ms-transform: rotate(4deg);
     -webkit-transform: rotate(4deg);
     -moz-transform: rotate(4deg);
     -o-transform: rotate(4deg);
 }
 
 ul.gallery li a.pic-3 {
     z-index: 4;
     transform: rotate(-10deg);
     -ms-transform: rotate(-10deg);
     -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
     -o-transform: rotate(-10deg);
 }
 
 ul.gallery li a.pic-4 {
     z-index: 7;
     transform: rotate(-8deg);
     -ms-transform: rotate(-8deg);
     -webkit-transform: rotate(-8deg);
     -moz-transform: rotate(-8deg);
     -o-transform: rotate(-8deg);
 }
 
 ul.gallery li a.pic-5 {
     z-index: 6;
     transform: rotate(6deg);
     -ms-transform: rotate(6deg);
     -webkit-transform: rotate(6deg);
     -moz-transform: rotate(6deg);
     -o-transform: rotate(6deg);
 }
 
 ul.gallery li a.pic-6 {
     z-index: 8;
     width: 200px;
     height: 150px;
     transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
 }
 
 ul.gallery li a:hover {
     z-index: 10;
     -moz-box-shadow: 3px 5px 15px #333;
     box-shadow: 3px 5px 15px #333;
 }
 
 
 /* KONTAKTFORMULAR */
 
 input { 
     width: 250px;
     height: 20px;
     margin: 0 0 5px 0;
 }
 
 textarea {
     min-width: 250px;
     height: 50px;
     max-width: 600px;
 }
 
 .leer {
     visibility: hidden;
     max-height: 10px;
 }
 
 .absenden input {
     height: 30px;
     width: 256px;
 }
 

Du bist fast auf dem richtigen Weg.
Dein CSS:
[HTML]#FlashID { position: absolut; z-index: -1; height: 100%; }[/HTML]
Du musst dem Wrapper einen höheren Z-Index geben, damit er auch immer darüber liegt. Zum Beispiel 100.
Wenn du absolute Positionen verwendest, nimmst du das Element aus dem Fluss der Darstellung heraus. Dazu musst du aber auch mitteilen wo genau dein Element, hier ID FlashID, genau hin soll.
Zudem hast du den Wert beim Attribut position falsch geschrieben, es muss absolute heissen, das ist doch kein Vodka.
siehe auch:position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Da du es oben rechts haben willst schreibst du es auch so:
[HTML]#FlashID { position: absolute; z-index: -1; top:0; right:0; }[/HTML]
Die Höhe ergibt sich aus dem Flash und dort steht eine Höhe von 340 Pixeln drin.

Danke! Danke! Danke!
Ich weiß nit, wie lang ich da dabei gesessen bin und probiert hab (…) *augenringe
Wegen dem z-index hat es zwar kurz Interferenzen mit der Galerie gegeben, aber das passt jetzt auch.

… es muss absolute heissen, das ist doch kein Vodka.

Jetzt hast mich aber aufgeklatscht, was ich so in meiner Freizeit scheinbar mach (…) :wink:

Das einzige Problematik was noch ist:
Der Wrapper zentriert sich ja je nach Browserbreite automatisch. Das passt ideal.

Besteht jedoch die Möglichkeit, dass sich die Flash immer an den Wrapper orientriert und man einen bestimmten Abstand definiert?
Da es mit dem Lesen dann Probleme geben gibt, für User mit anderen Bildschirmgrößen.

Ich hab dir hier eine Grafik gemacht zum leichteren Verständnis:

[ATTACH]2420.vB[/ATTACH]

Als Lösung sehe ich nur eine Mindestbreite (min-width) für das Element von vielleicht 1200pixel oder etwas mehr.
Dann erscheinen bei kleinerem Viewport halt Scrollbalken.

Die richtige Breite muss durch auspropbieren ermittelt werden denke ich.

Separaten Wrapper für das Flash, CSS-Angaben auf width: 100% und min-width in Pixelgröße des Movies, würde ich mal auf vermuten.

Ich werde es mal probieren. Danke, vorerst!

Auf diese Weise hab ich es auch schon versucht, jedoch lässt das das Flash völlig kalt. :sunglasses:

Trotzdem danke für deinen Lösungsvorschlag!

Lösung

Kurzes Update über meine endgültige Lösung zur „Flash“ Problematik.
Hoffe es ist schlussendlich keine Pfusch Lösung geworden und weiterhin konform, aber nun rutscht es schön automatisch mit und es zeigt durch „hidden“ auch keinen horizontalen Scroller mehr an.
Danke Tronjer für den Tipp mit dem Wrapper.

#wrapper_hero {
    overflow: hidden;
}

.wrapper_flash {
    position: fixed;
    width: 100%;
    min-width: 1100px;
    top: 0px;
    z-index: -2;
    padding: 0 0 0 440px;
}

#FlashID {
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
}

[PHP]

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

[/PHP]