✔ Problem mit Flashheader und dahinterliegndem Inhalt

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich hab ein Problem mit einem Flashheader.
Und zwar verschiebt es diesen immer nach unten wenn ich das nachfolgende Div mit margin-top versehe. Der Flashheader steht auf
Code: 
position:fixed
und ist mit einem
Code: 
z-index:1
eine Ebene nachoben verschoben.

index.php
Code: 
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/race/css/template.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/race/css/position.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="<?php echo $mosConfig_live_site; ?>/templates/race/css/layout.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="<?php echo $mosConfig_live_site; ?>/templates/race/css/print.css" rel="stylesheet" type="text/css" media="Print" />
<link href="<?php echo $mosConfig_live_site; ?>/templates/race/js/sfhover.js" rel="stylesheet" type="text/javascript" />
</head>
<body>
<!--Im Film verwendete URLs-->
<!--Im Film verwendeter Text-->
<!-- saved from url=(0013)about:internet -->
<!-- Flashheader Bereich -->
<div id="flasheader">
<?php mosLoadModules('flasheader'); ?>
</div>

<!-- linkes menue -->
<div id="menue">
<?php mosLoadModules('menue'); ?>
</div>
<!-- linkes Menü Div ende -->

<!-- Abstand zum flashheader -->
<div id="space"></div>
<!-- Ende Abstand zum Flashheader -->

<!-- Bannerheader Bereich -->
<div id="header">
<?php mosLoadModules('header'); ?>
</div>
<!-- Ende Bannerheader Bereich -->

<!-- Content Bereich -->
<div id="content">
<?php mosMainBody(); ?>
</div>
<!-- Content Bereich Ende -->

<div id="space2"></div>

<!-- SFIR aktivierung-->
<script type="text/javascript">
if(typeof sIFR == "function"){
  sIFR.replaceElement(".contentheading, .componentheading, h1, h2, h3, h4, h5, h6", named(
    {sFlashSrc: "mambots/system/din.swf", sColor: "#FF7F00", sWmode: "transparent"}
  ));
}
</script>
<!-- Ende SFIR aktivierung-->
</body>
</html>

die von Joomla erzeigte index.php
Code: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>race_donate - Die Route</title>
<meta name="title" content="Die Route" />
<meta name="author" content="Administrator" />
<meta name="description" content="Joomla - the dynamic portal engine and content management system" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="http://localhost/joomla_race/mambots/system/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://localhost/joomla_race/mambots/system/sIFR-print.css" type="text/css" media="print" />
<script src="http://localhost/joomla_race/mambots/system/sifr.js" type="text/javascript"></script>
<script src="http://localhost/joomla_race/mambots/system/sifr-addons.js" type="text/javascript"></script>
			<link rel="alternate" type="application/rss+xml" title="race_donate" href="http://localhost/joomla_race/index2.php?option=com_rss&amp;feed=RSS2.0&amp;no_html=1" />

				<link rel="shortcut icon" href="http://localhost/joomla_race/images/favicon.ico" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://localhost/joomla_race/templates/race/css/template.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/joomla_race/templates/race/css/position.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="http://localhost/joomla_race/templates/race/css/layout.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="http://localhost/joomla_race/templates/race/css/print.css" rel="stylesheet" type="text/css" media="Print" />
<link href="http://localhost/joomla_race/templates/race/js/sfhover.js" rel="stylesheet" type="text/javascript" />
</head>
<body>
<!--Im Film verwendete URLs-->
<!--Im Film verwendeter Text-->
<!-- saved from url=(0013)about:internet -->
<!-- Flashheader Bereich -->
<div id="flasheader">
		<table cellpadding="0" cellspacing="0" class="moduletable">

				<tr>
			<td>
				<link rel="stylesheet" href="components/com_artbannersplus/artbannersplus.css" type="text/css" /><table cellpadding="0" cellspacing="0" class="artbannersplus"><tr><td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" border="0" width="552" height="160" vspace="0"><param name="SRC" value="http://localhost/joomla_race/images/banners/header.swf"><embed src="http://localhost/joomla_race/images/banners/header.swf" loop="false" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="552" height="160"></object></td></tr></table>			</td>
		</tr>
		</table>
		</div>

<!-- linkes menue -->
<div id="menue">
		<table cellpadding="0" cellspacing="0" class="moduletable">

				<tr>
			<td>
				<link rel="stylesheet" href="components/com_artbannersplus/artbannersplus.css" type="text/css" /><table cellpadding="0" cellspacing="0" class="artbannersplus"><tr><td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" border="0" width="251" height="230" vspace="0"><param name="SRC" value="http://localhost/joomla_race/images/banners/test_buttonrace.swf"><embed src="http://localhost/joomla_race/images/banners/test_buttonrace.swf" loop="false" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="251" height="230"></object></td></tr></table>			</td>
		</tr>
		</table>
		</div>
<!-- linkes Menü Div ende -->

<!-- Abstand zum flashheader -->
<div id="space"></div>

<!-- Ende Abstand zum Flashheader -->

<!-- Bannerheader Bereich -->
<div id="header">
		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<img src="http://localhost/joomla_race/images/banners/header_i29.jpg" title="" alt="" class="" />			</td>
		</tr>
		</table>

		</div>
<!-- Ende Bannerheader Bereich -->

<!-- Content Bereich -->
<div id="content">
	
		<table class="contentpaneopen">
				<tr>
			<td valign="top" colspan="2">
				<h1>Die Rally 2009</h1>
<p>
Die Regeln sind einfach: man suche sich ein Fahrzeug mit maximal 1000
cm&sup3; &nbsp;Leistung ( zum Beispiel einen Fiesta, Polo, Trabbi, Panda oder ein

&auml;hnlich kleines Auto), trage eine Spendensumme von ca. 1.500 Euro f&uuml;r
eine Wohlt&auml;tigkeitsorganisation zusammen und fahre damit eine 16.000 km
lange Strecke von London nach Ulan Bator ( Hauptstadt der Mongolei((
neben China)). Dabei gibt es keinerlei weitere Hilfsmittel, alles geht
auf unsere Kappe. Ziel dieser gr&ouml;&szlig;ten privaten Rally der Welt ist es
nicht als erster ans Ziel zu kommen, sondern &uuml;berhaupt ans Ziel zu
kommen und dabei mit der Hilfe von Sponsoren so viel Geld wie m&ouml;glich
zu sammeln. Die Spendensumme dient also nicht unserem Team, sondern
kommt in voller H&ouml;he dem Mercy Korp Mongolia zu Gute.
www.mercycorps.org.mn/ und www.hopeandhomes.org . Der einfache Weg
etwas Gutes zu tun: www.willwemakeit.com/people/kai_sch&auml;der 
</p>
<h2>Die Reiseroute 
</h2>
<p>
Die Reiseroute ist denkbar einfach: <br />
Erst mal nach London kommen von wo die Rally startet. <br />
Anschlie&szlig;end &uuml;ber den Balkan in die T&uuml;rkei, dann durch Iran, Turkmenistan, Usbekistan, Kirgistan, vielleicht noch ein St&uuml;ckchen Russland und dann in die Mongolei. Und fertig.

</p>
<h3><a title="auto" name="auto"></a>Das Auto &nbsp;
</h3>
<p>
Die Regeln sind einfach: man suche sich ein Fahrzeug mit maximal 1000
cm&sup3; &nbsp;Leistung ( zum Beispiel einen Fiesta, Polo, Trabbi, Panda oder ein
&auml;hnlich kleines Auto), trage eine Spendensumme von ca. 1.500 Euro f&uuml;r
eine Wohlt&auml;tigkeitsorganisation zusammen und fahre damit eine 16.000 km
lange Strecke von London nach Ulan Bator ( Hauptstadt der Mongolei((
neben China)). Dabei gibt es keinerlei weitere Hilfsmittel, alles geht
auf unsere Kappe. Ziel dieser gr&ouml;&szlig;ten privaten Rally der Welt ist es
nicht als erster ans Ziel zu kommen, sondern &uuml;berhaupt ans Ziel zu
kommen und dabei mit der Hilfe von Sponsoren so viel Geld wie m&ouml;glich
zu sammeln. Die Spendensumme dient also nicht unserem Team, sondern
kommt in voller H&ouml;he dem Mercy Korp Mongolia zu Gute.
www.mercycorps.org.mn/ und www.hopeandhomes.org . Der einfache Weg
etwas Gutes zu tun: www.willwemakeit.com/people/kai_sch&auml;der
</p>

<h4>
Das Team&nbsp;
</h4>
<p>
Kai Sch&auml;der, Mathias Rau, Mariam Nickbaght <br />
<i>Bilder&nbsp; von uns</i> 
</p>
<p>
&nbsp; 
</p>

			</td>
		</tr>
				</table>

		<span class="article_seperator">&nbsp;</span>

		</div>
<!-- Content Bereich Ende -->

<div id="space2"></div>

<!-- SFIR aktivierung-->
<script type="text/javascript">
if(typeof sIFR == "function"){
  sIFR.replaceElement(".contentheading, .componentheading, h1, h2, h3, h4, h5, h6", named(
    {sFlashSrc: "mambots/system/din.swf", sColor: "#FF7F00", sWmode: "transparent"}
  ));
}
</script>
<!-- Ende SFIR aktivierung-->
</body>
</html><!-- 1209123929 -->

position.css
Code: 
/* ################  Position  ################  */

body
{
         padding: 0;
         margin: 0;
}

#flasheader
{
	position:fixed;
         left: 202px;
        	width: 551px;
         height: 160px;
	padding: 0;
	text-align: left;
	z-index:1;

}

#header
{
	/*position: relative;*/
         width: 443px;
         height: 224px;
	margin: 170px  0  0 290px;
         padding: 0;

}

#space
{
	position:fixed;
	top: 160px;
         width: 463px;
         height: 10px;
	margin-left: 290px;
	padding: 0;
         z-index:1;
}

#space2
{
	/*position:relative;*/
	width: 463px;
         height: 50px;
	margin-left: 290px;
	padding: 0;
}

#content
{
	/*position:relative;*/
	width: 443px;
	margin-left: 290px;
	padding: 2;

}

/* ################ Divs für Menü ################ */

#menue
{
	position:fixed;
         top:188px;

}

layout.css
Code: 
/* ################  Layout  ################  */
body
{
	background-image: url(../images/bg.jpg);
         background-repeat:no-repeat;
         background-attachment: fixed;
         background-color: #ccc;
         font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
         color:#000;
}

#flasheader
{
	background-color:#ccc;
}

#content, #header
{
	background-color:#fff;
         border: solid #fff;
         border-width: 0 10px 10px 10px;

}


#space
{
         background:#fff;
         border:solid 0 #FF0000;

}

#space2
{
         background:#FF0000;
         border:solid 0 #FF0000;
         filter:alpha(opacity=100);
	-moz-opacity: 0.0;
	opacity: 0.0;
}

Viele Grüße
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    84 KB · Aufrufe: 12
Hi,

versuch es mal alternativ mit einer relativen Positionierung:

Code: 
#header
{
        position: relative;
        width: 443px;
        height: 224px;
        top: 170px;
        margin: 0  0  0 290px;
        padding: 0;
}
 
Hi,
also das ist alles etwas strange.
Deine Idee mit
Code: 
position:relative
hatte ich auch schon gehabt. Hatte aber einige andere Verschiebungen zur Folge.
Dann habe ich eigentlich das hier eingefügt
Code: 
html
{
	overflow-x:auto; overflow-y:hidden;
}

body
{
         height:100%; overflow-y:auto;
}

um das Problem das der IE kein
Code: 
position:fixed
unterstützt zu korrigieren, eingefügt. Beim Ie hat das keine positive Auswirkung gehabt aber im FF war plötzlich das Problem mit dem verschobenen Header gefixed.

Aber da das ja eigentlich nicht daafür gedcht war habe ich nochmal versucht das mit
Code: 
position:fixed
zu lösen und nachdem ich
Code: 
top:170px
rausgenommen habe hatts dann auch funktioniert. Zu mindestens im FF im Safari für Windows (aufm Mac kann ich das jetzt leider wegen einer Lokalen speicherung nicht testen) taucht das Problem weiterhin auf.

Nun den weiter gehts mit den Problemen im IE :mad:.

Viele Grüße
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück