CSS DIV - Flash Integrierung - Scrollbalken "erweitern"

hanussen · #1 (**permalink**) 13.02.2010, 01:28

Hallo,

habe schon mehrfach Google bemüht, komme aber leider nicht auf die Lösung meines Problems. Muss dazu sagen, dass ich mich mit der Materie sehr wenig auskenne. Habe meine Homepage komplett in Flash erstellt und stehe nun vor einem kleinen "Schonheitsfehler" bei der Integrierung in HTML.

Habe das Flash File über ein div-Element in den HTML Index eingebaut und die Seite auf eine Bildschirmauflösung von (bzw. ab) 1280x960 optimiert.

Bei dieser Auflösung und einem komplett geöffneten Browser wird die Seite auch korrekt (also komplett) und ohne Scrollleisten angezeigt. Bei höheren Auflösung bleibt das Flash auch richtig in der Mitte - also so, wie es sein soll.

Das Problem liegt nun in Auflösungen unter 1280x960 beziehungsweise tritt ebenfalls auf, wenn man bei höheren Auflösungen einfach das Browser Fenster kleiner zieht. Das Flash passt folglich nicht mehr komplett auf die Seite, sodass Scrollbalken erscheinen. Soweit so gut - allerdings kann ich mit diesen Scrollbalken nicht in jede Ecke der Seite gelangen. Nach links und nach oben ist die Seite angeschnitten und verschwindet zum Teil im Nichts.

Wenn ich richtig liege, müssten eigentlich die in der Breite 620 und in der Höhe 420 Pixel fehlen - eben die Werte aus margin-top und -left. Ich vermute daher, das dies ein gängiges Problem ist und hoffe auf eine simple Lösung.

Hier der Quellcode:

<html>
<head>
<title>Manuel Sulzer Photography</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div style="position: absolute; width: 1240px; height: 800px; top: 50%; left: 50%; margin-left: -620px; margin-top: -420px;">
<div id="flashcontent"></div>
<script type="text/javascript">
var fo = new SWFObject("index.swf", "index", "1240px", "800px", "8", "#ffffff");
fo.write("flashcontent");</script>
</div>
</body>
</html>

und die Seite:

Hoffe auf Hilfe.

Danke im Voraus.

Beste Grüße
Manuel

EvT · #2 (**permalink**) 13.02.2010, 01:45

So zentrierte absolut positionierte Elemente haben genau die Nachteile, die du in deinem Posting beschreibst. Die in unserer FAQ unter Punkt 5 beschriebene Methode "Vertikales und horizontales zentrieren einer kompletten Webseite" hat diese Nachteile nicht.

hanussen · #3 (**permalink**) 13.02.2010, 02:02

Danke dir für die schnelle Antwort.

Freut mich natürlich zu lesen, dass es eine Lösung gibt. Allzu simpel scheint das aber auf den ersten Blick nicht zu werden. Wie gesagt, eigentlich habe ich (so gut wie) keine Ahung von der Materie. Ich werde mir es aber genau durchlesen und mal schauen, ob ich es hinbekomme.

Vielleicht weiß in der Zwischenzeit ja noch jemand eine "fertige Lösung". Meine Voraussetzungen werden ja bestimmt nicht selten sein.

Grüße

hanussen · #4 (**permalink**) 13.02.2010, 03:21

So, zumindest hatte ich durch den Link ein paar neue Stichworte erhalten nach denen ich suchen konnte.

Bin letztlich dann auf eine Methode von dieser Seite gestoßen:
pipwerks Vertical centering — without using tables!

Habe meine Quellcodes dann folgendermaßen angepasst:

index.html:

<!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" />
<title>Manuel Sulzer Photography</title>
<link href="centering-swf.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>

<div id="outer">
<div id="container">
<div id="inner"></div>
</div>
</div>

<script type="text/javascript">

var so = new SWFObject("index.swf", "index", "1240px", "800px", "8", "#ffffff");
so.addParam("wmode", "transparent");
so.write("inner");

</script>

</body>
</html>

centering-swf.css:

* {
margin: 0;
padding: 0;
}

/* macs won't see this! \*/
html, body {
height:100%;
width:100%;
}
/* END mac */

#outer {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}

#container {
display:table-cell;
vertical-align:middle;
}

#inner {
text-align: center;
width: 1240px;
height: 800px;
margin-left:auto;
margin-right:auto;
}

centering-IE.css:

#container {
height: 800px; /* required for IE to properly center vertically */
position:relative;
top:50%
}
#inner {
position:relative;
top:-50%;
}

Das Ganze funktioniert halbwegs. Allerdings müsste das Flash File noch ein paar Pixel (vll. 20-40) weiter hoch - das bekomme ich nicht hin. Habe verschiedene height Werte probiert.

Des weiteren scheint es etwas größere Probleme mit dem IE (hier IE acht) zu geben. Dort stimmt zwar die horizontale Mitte, vertikal bekomme ich es aber auch nicht weit genug nach oben. Außerdem ist der Scrollbalken anscheinend immer unnötig lang.
EDIT: Ok, das mit der zu langen Scrollbar im IE scheint bekannt und steht auch so auf der Seite.

Insgesamt bin ich fast zufrieden. Vielleicht kann sich also jemand kurz die Mühe machen und mir versuchen weiterzuhelfen den Flash Content noch ein wenig höher zu bekommen.

Danke.

hanussen · #5 (**permalink**) 13.02.2010, 17:38

Hat sich erledigt.

Kann zu.

Danke.

Manfred62 · #6 (**permalink**) 13.02.2010, 18:28

Schön, dass es sich für dich erledigt hat.

Ein Hinweis mit der Lösung würde eventuell auch anderen hier im Forum helfen...

Gruß Manfred

hanussen · #7 (**permalink**) 13.02.2010, 19:20

Klar natürlich, sorry.

Im Prinzip war es aber recht einfach. Ein Freund hat mir weitergeholfen.

Die erforderlichen Quelltexte habe ich ja oben schon gepostet. Den Link woher diese stammen ebenfalls.

Dass in meinem Fall z.B. bei 1280x960 das Flash File nicht weit genug oben war, lag einfach daran, das dieses selbst 800px hoch ist und dadurch einfach schon ganz oben am Rand war. Es musste dann sozusagen weiter nach oben in den "negativen Raum" verschoben werden. Weiß nicht, wie ich es sonst ausdrücken soll. Bei höheren Auflösungen hat das mit "negativem Raum" natürlich nichts zu tun, sondern das Flash File wird schlicht und einfach aus der Mitte ein wenig nach oben verschoben. Ich hoffe, ich gebe alles richtig wieder.

Im obigen centering-swf.css File die #inner verändern:

Zur Erinnerung, das Flash File hat eine Größe von 800px. Mit "top: -40px" schiebe ich dieses also um 40 Pixel nach oben aus dem #inner Container heraus. Dazu noch erforderlich "position: relative;". Von der height ziehe dann eben diese 40 Pixel ab.

#inner {
text-align: center;
width: 1240px;
height: 760px;
margin-left:auto;
margin-right:auto;
top: -40px;
left: 0px;
position: relative;

Für den IE sieht die ganze Sache dann etwas anders aus. Hier habe ich es einfach durch rumprobieren passend postioniert. Warum diese Werte passen und ich "top: 0px" (glaube sogar egal wieviel Pixel man hier einträgt) brauche - keine Ahnung.

Das komplette centering-IE.css:

#container {
height: 80px; /* required for IE to properly center vertically */
position:relative;
top:50%
top: 0px;
}
#inner {
position:relative;
top:-50%;
}

Funktioniert unter Win7 mit FF und IE8, WinXP mit FF und irgendein Linux mit dazugehörigem Browser (kenne ich mich nicht aus, sorry).

Beste Grüße

EDIT: Wenn der Thread jetzt aber wirklich hilfreich für andere sein sollte, wäre es besser den Threadtitel noch zu ändern. Vielleicht kann man das veranlassen. Mit Scrollbar erweitern hat die Lösung ja nichts mehr zu tun. Eher sowas wie 'Flash vertikal und horizontal zentrieren'.

hanussen · #8 (**permalink**) 13.02.2010, 21:12

Habe gerade erfahren, dass meine Lösung für den IE leider im 6er nicht zu funktionieren scheint...

mgutt · #9 (**permalink**) 14.02.2010, 10:40

Kompakt, ist valide und funktioniert in jedem Browser:
CSS: Horizontal and vertical centering

Und falls Beschwerden kommen:
Es ist genauso semantisch wie ein div mit display:table zu einem table zu machen :P

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
div mit css über andere elemente platzieren	ping	CSS	6	20.08.2009 13:54
DIV über Flash Object Legen	tichy	CSS	2	03.03.2009 19:02
Scrollbalken im div container statt im frame	Cassiopaia	CSS	1	27.06.2008 18:29
div mit scrollbalken	rtx05	CSS	2	08.05.2008 09:01
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12