• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Flash im Background

M

memento

Neues Mitglied

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: screen_design.jpg


Die Anforderungen:
  • Der gesamte Navigations- und Contentbereich sollte sich - wie jetzt bereits - individuell an die Bildschirmbreite zentrieren.
  • Die Flash sollte wie auf dem Foto immer etwas versetzt im Hintergrund "mitgehen" und 100% an die Bildschirmhöhe anpassen.

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!
 
Zuletzt bearbeitet:
Index.php

HTML: 
<?php
    if(isset($_POST['send'])) {
    if($_POST['leer'] == '') {
    mail('[email protected]', '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");
    }
    }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  <link rel="shortcut icon" href="http://www.html.de/images/favicon.ico" />
  <script type="text/javascript">swfobject.registerObject("FlashID");</script>
  <script src="scripts/swfobject_modified.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>

  <title>Raw Matters - Ein ungeschliffener Performanceabend</title>
  <meta name="description" content="Raw Matters ist ein Projekt von  Künstlern für Künstler im Bereich Tanz, Performance und  Choreographie."/>
  <meta name="keywords" content="tanz wien, improvisation, choreographie, performance, kunstverein wien,"/>
  <meta name="robots" content="index,follow"/>
  <meta name="revisit-after" content="7 days"/>
  <meta name="language" content="de"/>
  <meta name="zipcode" content="1160"/>
  <meta name="city" content="Wien"/>
  <meta name="state" content="Wien"/>
  <meta name="country" content="AT"/>
  <meta name="author" content="www.rawmatters.at"/>
</head>
    
<?php
    if(!isset($_GET['go'])) {
        $_GET['go'] = 'home';
    }
?>
    
<body>
    <div class="wrapper">
        <div class="navigation">    
            <ul class="menue">
                <li><a href="index.php?go=idee"><img  src="http://www.html.de/images/idee.png" alt="IDEE"  /></a></li>
                <li><a href="index.php?go=wir"><img  src="http://www.html.de/images/ueber_uns.png" alt="ÜBER UNS"  /></a></li>
                <li><a  href="index.php?go=teilnehmen"><img  src="http://www.html.de/images/teilnehmen.png" alt="TEILNEHMEN"  /></a></li>
                <li><a  href="index.php?go=rueckschau"><img  src="http://www.html.de/images/rueckschau.png" alt="RÜCKSCHAU"  /></a></li>
                <li><a href="index.php?go=netzwerk"><img  src="http://www.html.de/images/netzwerk.png" alt="NETZWERK"  /></a></li>
                <li><a href="index.php?go=contact"><img  src="http://www.html.de/images/kontakt.png" alt="KONTAKT"  /></a></li>
            </ul>
        </div>
    <div> 
        <div id="logo_header">
                <a href="index.php"><img  src="http://www.html.de/images/logo_big.png" alt="raw matters  logo"/></a>
        </div>
        <iframe id="fb"
             src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FKunst-und-Kulturverein-Raw-Matters%2F216313485072611&amp;send=false&amp;layout=button_count&amp;width=150&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21"  scrolling="no" frameborder="0" style="border:none; overflow:hidden;  width:150px; height:21px;" allowTransparency="true">
        </iframe>

    </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>
 
Zuletzt bearbeitet:
Css

Code: 
 @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;
 }
 
Zuletzt bearbeitet:
Du bist fast auf dem richtigen Weg.
Dein CSS:
HTML: 
#FlashID {      position: absolut;      z-index: -1;      height: 100%;  }
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;   }
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.
Zum Vergrößern anklicken....
Jetzt hast mich aber aufgeklatscht, was ich so in meiner Freizeit scheinbar mach (...) ;)


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:

flash_orientierung.jpg
 
Als Lösung sehe ich nur eine Mindestbreite (min-width) für das <body> 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.
 
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.


Code: 
#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: 
<div id="wrapper_hero">
            <div class="wrapper_flash">    
                <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1100" height="1097" >
                        <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="1100" height="1097">
                        <!--<![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>
            </div>
        </div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben