Flashfilm mit swfobject als Hintergurnd in einer Tabelle

Södele, jetzt hab ich mal folgendes statt 100 % geändert im Quellcode:

PHP: 
 swfobject.embedSWF("test.swf", "myAlternativeContent", "1000", "550", "6", false, flashvars, params, attributes);

Nun wird die swf zwar sehr schön bzw. von der Größe her korrekt angezeigt, aber sie klebt am linken Bildrand leider. Wie blöd, was mach ich denn da jetzt****? :rolleyes:

Was ich auch nicht verstehe ist das mit dem "myAlternativeContent". Teste ich die Seite auf IE ohne Flash Player, zeigt er mir logischerweise die swf nicht an, dafür aber nach wie vor den div Container mit dem Textinhalt. Darunter dann den Adobe Flashbutton, der zur Adobe Download Site führt, der ist aber auch links oben in die Ecke gequetscht. Das Alternativbild "bea01", das ich dafür eigentlich gedacht hatte unter

PHP: 
var flashvars = { imageFileName: "bilder/bea01.jpg", logo: "false"};

taucht gar nicht auf. Liegt aber im richtigen Verzeichnis. Ich würde es allerdings grundsätzlich viel lieber so programmieren, dass man, wenn kein Flash Player vorhanden ist, automatisch auf eine andere (ganz neue) Seite verlinkt wird. Auf der könnte ich dann individuell einen Text, ein Hintergrundbild und einen Buttton einfügen, der den Link zum Adobe Download anbietet.

Oha, Fragen über Fragen ;-) Liebe Grüße, Steffi
 
Steffiberlin hat gesagt.:
Nun wird die swf zwar sehr schön bzw. von der Größe her korrekt angezeigt, aber sie klebt am linken Bildrand leider.Wie blöd, was mach ich denn da jetzt****? :rolleyes:
Zum Vergrößern anklicken....
Die CSS-Regeln der beiden Boxen umformulieren, damit die Boxen sich wie von dir gewünscht in der Fenstermitte ausrichten.

Ich hoffe, das CSS erschreckt dich jetzt nicht so früh am Abend :D

CSS: 
#container,  #myAlternativeContent {
 position:absolute; /* absolute Positionsart */
 top:50%; /* Der obere Elementrand wird in der Fenstermitte positioniert */
 height:550px;
 margin-top:-275px; /* Die negative Hälfte von height:550px rückt das Element um die Hälfte seiner Höhe nach oben */
 left:50%; /* Der linke Elementrand wird in der Fenstermitte positioniert */
 width:1000px;
 margin-left:-500px; /* Die negative Hälfte von width:1000px rückt das Element um die Häfte seiner Breite nach links */
}
#container {
z-index:2;
}
#myAlternativeContent {
z-index:1;
}
Das Resultat http://d-graff.de/selfhtml/center1.html kommt auf den ersten Blick meiner ersten Linkempfehlung http://d-graff.de/fricca/center.html gleich. Auf den zweiten Blick offenbart diese Positionierungstechnik aber einen nicht unerheblichen Nachteil, sobald die Browserfenstergröße die Boxendimension unterschreitet, und die äußeren Seitenbereiche aus dem Sichtfeld verschwinden, wo sie für den Besucher (per Srcolllaufleiste) nicht greifbar sind.

Das Boxenverhalten bei einem zu kleinen Viewport kannst du in den beiden Demos miteinander vergleichen.
 
Zuletzt bearbeitet:
Hey Spice, nochmal vielen Dank! Ich brauchte gestern Abend ne kleine Verschnaufspause. Hatte den ganzen Tag vor dem Compi gesessen, Kopfweh. :( Jetzt hock ich schon wieder mehr als 3 Stunden davor, und ich muss leider sagen, das ist ganz schön schwer für mich alles. Ich habe deinen sehr brillianten Vorschlag versucht nachzubauen. Das Ergebnis ist, dass jetzt zwar der Text zentriert erscheint und der Adobe Button, aber die swf ist nun leider gar nicht mehr zu sehen, :eek: weder im Firefox noch im IE. Heul! Was mache ich denn da bloss wieder falsch? Kannst du dir bitte meinen Quelltext nochmal ansehen bitte? ;-) Hier ist er:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test01</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<link href="bea01.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="bilder/favicon.ico">
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
            var mode;
            
            if (navigator.appName.indexOf("Internet Explorer") != -1)
               mode="transparent";
            else if (navigator.userAgent.indexOf("Opera") != -1)
               mode="transparent";
            else
              mode = "direct";
              
   var flashvars = { imageFileName: "bilder/bea01.jpg", logo: "false"};
   var params = {};
   params.play = "true";
   params.loop = "true";
   params.menu = "false";
   params.quality = "high";
   params.scale = "showall";
   params.wmode = mode;
   params.allowscriptaccess = "always";
   params.allownetworking = "all";
   var attributes = {};
   attributes.align = "top";
   swfobject.embedSWF("test.swf", "myAlternativeContent", "1000", "550", "6", false, flashvars, params, attributes);
  </script>
<style type="text/css">
<!--

html, body{
  height:100%;
  margin:0;
  padding:0;
}

#spacer, #center{
  position:absolute;
  margin:0;
  padding:0;
}

#spacer{
  width:100%;        
  height:100%;
min-width:1006px;
min-height:556px;
}

html #IEspacer {
width:1006px;
height:556px;
}

#center {
padding:0;
border:1px solid #FFFFFF;
width:998px;
height:548px
position:absolute;
  top:50%;                  
  left:50%;
margin:-150px 0 0 -225px;
}

html #center {
  height:548px;
}

p, h1 {
  padding:0.5em;
  margin:0;
}

h1 {
  font-size:1.2em;
}
-->
</style>

</head>
<body>
<div id="spacer">
<div id="IEspacer">
<div id="center">
<div id="myAlternativeContent">
   <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
   </a>
  </div>
<div id="container">
<div id="content" class="blau">
Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />
</div>
<br /><br /><br />
</div>
</div>
</div>
</div>
</body>
</html>

Grundsätzlich verstehe ich etwas ganz Wichtiges noch nicht: Womit positioniere ich eigentlich genau den Hintergrund mit dem Flash Film und womit den Div-Container mit dem Text?

Diesen Unterschied zu erkennen und zu begreifen ist momentan mein größter Wunsch, der Kasus Knaktus sozusagen. Momentan steig ich da leider noch gar nicht durch!

Das ist vor allem auch deshalb so wichtig, weil der Hintergrund mit der swf zentriert im Browserfenster erscheinen soll. Der darauf liegende Div-Container mit dem Text soll sich diesen vorgegeben Maßen (Breite 1000px / Höhe 550px) natürlich anpassen, aber, er soll individuell mal links oder mal rechts mit einem Abstand von circa 70px zum jeweiligen Seitenrand positioniert werden, innerhalb des div-Containers soll der Text dann zentriert und mit einer bestimmten CSS-Klasse (zum Beispiel class="blau") ausgestattet sein.
Oha...ich hoffe, du kannst mir folgen und weiterhelfen. :rolleyes: Grüße****** Steffi

Edit: Oh, ich hab eben erst gesehen, dass man sich auch für die Hilfe bedanken kann unten in der Spalte, das habe ich natürlich sofort nachgeholt, lach! Falls das geht, ich könnte dir auch eine PN schicken mit einem Link , den ich aber nicht öffentlich posten darf, weil die Site offiziell noch nicht publiziert werden soll.
 
Zuletzt bearbeitet:
Ohne den schliessenden </style>-Tag muß <style> hier entfernt werden:
HTML: 
<style type="text/css">
<link href="bea01.css" rel="stylesheet" type="text/css">

Ansonsten wäre es hilfreich, den Link zur Online-Fassung zu nennen, damit wir auch im Bilde sind ;-)
 
Hab ich entfernt. Jetzt sieht man zwar den Flashfilm aber nu er ist voll abgerutscht nach unten rechts. Lach! Ohje. Ich werde jetzt mal eine Version bauen, die ich über meinen Webaccount ins Netz stelle. Bis gleich. Grüßli, Stef
 
Wie wäre es, wenn du meinen Vorschlag einfach in deinen Code übernimmst? Der flutscht störungsfrei :D

So lautet meine modifizierte Fassung deines Codes von eben, die im HTML-Code mit 4 <div>-Elementen weniger auskommt, mit der ich soweit keine Probleme registrieren kann ;-)

Der Zusatz border:1px solid #ddd diente mir hier fix zur Visualisierung der Boxendimensionen und -positionierung im Browserfenster, da mir die Flash- und alternative Bilddatei nicht vorliegt.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test01</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<link href="bea01.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="bilder/favicon.ico">
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
            var mode;
            
            if (navigator.appName.indexOf("Internet Explorer") != -1)
               mode="transparent";
            else if (navigator.userAgent.indexOf("Opera") != -1)
               mode="transparent";
            else
              mode = "direct";
              
   var flashvars = { imageFileName: "bilder/bea01.jpg", logo: "false"};
   var params = {};
   params.play = "true";
   params.loop = "true";
   params.menu = "false";
   params.quality = "high";
   params.scale = "showall";
   params.wmode = mode;
   params.allowscriptaccess = "always";
   params.allownetworking = "all";
   var attributes = {};
   attributes.align = "top";
   swfobject.embedSWF("test.swf", "myAlternativeContent", "1000", "550", "6", false, flashvars, params, attributes);
  </script>
<style type="text/css">
<!--
html, body{
  height:100%;
  margin:0;
  padding:0;
}
#container,  #myAlternativeContent {
 position:absolute;
 top:50%; 
 height:550px;
 margin-top:-275px; 
 left:50%; 
 width:1000px;
 margin-left:-500px;  
 border:1px solid #ddd;
}
#container {
z-index:2;
}
#myAlternativeContent {
z-index:1;
}

p, h1 {
  padding:0.5em;
  margin:0;
}

h1 {
  font-size:1.2em;
}
-->
</style>

</head>
<body>

<div id="myAlternativeContent">
   <p><a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
   </a> </p>
   <p>Ich bin der alternative Inhalt zum Bild.</p>
</div>
<div id="container" class="blau">
Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />
</div>

</body>
</html>
 
Zuletzt bearbeitet:
*Seufz*

Hallo Spicelab! Der Flashfilm liegt nun super mittig im Browserfenster, klasse, das sieht echt gut aus, ganz großen Dank nochmals! :-) So, nun zum Text: Der soll in der Regel links oder analog auf der rechten Seite erscheinen, zentriert in der Text-Div. Ich könnte es natürlich auch ganz in Flash machen, aber mir gefallen die mit CSS formatierten Schriftbilder sehr viel besser!

Habe diese Version offline und online getestet, im IE sieht man den Text, er klebt jedoch leider links oben in der Ecke. In Firefox ist er bei mir gar nichts zu sehen. In Chrome blitzt er am Anfang einmal kurz auf und ist dann verschwunden. Verflixt und zugenäht.

Im IE erscheint - bei nicht vorhandenem Flash Player - der Adobe Download-Button auch ganz links oben in die Ecke gequetscht, direkt darüber liegt dann der Text aus dem Div-Container und darüber der Alternativtext. Ohje. Lach! Bin schon ganz wuschig lach! Also ja, da möchte ich so gerne erreichen, dass statt dem Flash Film an selber Stelle ein Hintergrundbild erscheint (es liegt im Verzeichnis "bilder" und heißt "bea01.jpg"). Im Alternativtext soll dann statt dem eigentlichen Text ein Hinweis erscheinen, dass man für diese Website den Adobe Flash Player benötigt und mittig darunter dann der Adobe Button mit dem Link zum Download. Unlösbar? Hab dir das jetzt mal online reingestellt. Am Besten du schaust es dir zuerst mal im Firefox an, weil da ist der Text bei mir jedenfalls gar nicht zu sehn. Ich danke dir! Sehr! Liebe Grüße, Steffi

Achso und hier der Link:
http://www.stefaniecordey.de/testversion/test01.html
 
Zuletzt bearbeitet:
Steffiberlin hat gesagt.:
In Firefox ist er bei mir gar nichts zu sehen. In Chrome blitzt er am Anfang einmal kurz auf und ist dann verschwunden.
Zum Vergrößern anklicken....
Setz mal dieses Javascript ein :)
Javascript: 
   var flashvars = { imageFileName: "bilder/bea01.jpg", logo: "false"};
   var params = {};
   params.play = "true";
   params.loop = "true";
   params.menu = "false";
   params.quality = "high";
   params.scale = "showall";
   params.wmode = "transparent";
   params.allowscriptaccess = "always";
   params.allownetworking = "all";
   var attributes = {};
   attributes.align = "top";
   swfobject.embedSWF("test.swf", "myAlternativeContent", "1000", "550", "6", false, flashvars, params, attributes);
 
Jaaa bestens, jetzt ist es gut zu sehen in Chrome, Firefox und im IE. Oh Mann Danke! :D So, dann werde ich mich jetzt mal genauer mit der genauen Positienierung des Textcontainers befasssen. Hoffe ich krieg da eine brauchbare Lösung hin ohne dein Hilfe. Kopfweh bereitet mir nach wie vor die Sache mit dem Dingens, wenn kein Flash Player vorhanden ist. Ich teste das auch nur im und für den IE, weil da ja häufiger der Flash Player nicht installiert bzw. geblockt ist als bei Firefox und Chrome. Das Ersatzbild erscheint leider immernoch nicht.:rolleyes: Noch ne Idee dazu? ;-) Grüße und Danke nochmals. Super coool von dir, deine Hilfe und alles, Steffi :p
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück