✔ CSS Navigation über ein Flashfile legen - geht das überhaupt?

[css_tester]

Hi Zusammen,
die Frage ist, geht das überhaupt?
Irgendwie steh ich auf dem Schlauch... nix zum Thema gefunden

Ich habe hier das Layout ohne den Flashfile... da passt eigentlich alles.
Vielleicht nicht perfekt, aber ich lern ja noch.

Nun wollte ich die Headergrafik gegen ein kleinen Flashfile tauschen.
Doch dann wird im FF die Navi nicht mehr angezeigt und im IE zerreist es mir das ganze Layout (Beispiel). Eigentlich sollte die Navi doch über dem Flash stehen...!?

Denke mal, es ist ein CSS Thema und keine Flashsache oder?

/* struktur
| body (zentrierung und backgroundimage)
|| div#box (zentrierung und backgroundimage)
||| div#boxcontent (breite festlegen)
|||| div#top (navi top)
||||| <ul id="navi_top">
|||| div#header (navi header) (jetzt flash 976x204px)
||||| <ul id="navi_header">
|||| div#abstand (inkl. h1)
|||| div#mastertextbox
||||| div#textboxbreit (textinhalte der seite)
|||||| span#textboxbreitteaser (monitorbild 183x257px)
|||| div#footer (fusszeile im layout)
|||| div#footer2 (fusszeile außerhalb layout)

Ich habe im CSS + HTML "einfach" die div#header durch div#headerflash "ersetzt"

CSS

div#header { /* wurde dann durch die div#headerflash ersetzt */
	float: left;
	width: 976px;
	height: 204px;
	background-repeat: no-repeat; 
	background-image: url("../images/layout_header_hell.jpg");
}

div#headerflash {
	float: left;
	width: 976px;
	height: 204px;
	background-repeat: no-repeat; 
	background-image: url("../images/layout_header_hell.jpg");
}

div#abstand {
	float: left;
	width: 976px;
	height: 63px;
	background-repeat: no-repeat;
	background-position: top;
	background-image: url("../images/layout_header_abstand_hell.jpg");
}

ul#navi_header {
	padding-left: 39px;
	padding-top: 26px;
	text-indent: -9999px;  /* text verschwinden lassen, anzeige nur ohne css */
}

ul#navi_header li {
	list-style-type: none;
}

#navi_header li a {
	 height: 29px;
	 width: 136px;
	 display: block;
	 text-decoration: none;
	 background-color: transparent;
	 border: none;
	 margin: 0px;
	 padding: 0px;
}

xhtml vor dem Flash

(...)
</div>             
<div id="header">
<ul id="navi_header">
<li><a class="navi_header01" href="webdesign_rodgau.htm"   title="Webdesign">Webdesign</a></li>
(...)
</ul>
</div>
<div id="abstand">
(...)

xhtml MIT dem Flash

(...)
</div>           
<div id="headerflash">
<object type="application/x-shockwave-flash" data="flash/header_index.swf" width="976" height="204" id="movie1">
<param name="movie" value="flash/header_index.swf" />
<p>Sie benötigen zur Anzeige des Flashfiles das kostenlose Flash plugin.</p>
<p><a href="http://www.macromedia.com/go/getflashplayer/">Download Macromedia Flash Player</a></p>
<img src="noflash.gif" width="976" height="204" alt="" />
</object> 
<ul id="navi_header">
<li><a class="navi_header01" href="webdesign_rodgau.htm" title="Webdesign">Webdesign</a></li>
(...)				
</ul>
</div>
<div id="abstand">
(...)

 

[css_tester]

Ja es geht! Prinzipiell...
Soviel weiß ich nun... nachdem ich hier die ganze Nacht dran gesessen habe!

Der FF positoniert es richtig... der IE6 schiebt es in weiter ferne
(auch wenn nun die obere Navi nach links verschoben ist )

Beispiel

IRGENDWAS IST DA NOCH TOTAL FAUL - WEISS DEN KEINER EIN RAT!
(ich bin fix und fertig und geh nun ins Bett!)

Was habe ich nun geändert:

<param name="wmode" value="transparent" />

in das <object> mit hinzugeschrieben!
und das ganze dann mit

"position: absolute;" fixiert und mit "margin-top: -178px"

über den Header (Flash) hochgedrückt!

div#navi_header_position /* Navi über Flash */
{
	height: 174px;
	width: 136px;
	float: left;
	margin-top: -178px; /* über Flash schieben */
	padding-left: 40px;
	position: absolute; 
}

(...)
</div>             
<div id="headerflash">
 <object type="application/x-shockwave-flash" data="flash/header_index.swf" width="976" height="204" id="movie1">
<param name="movie" value="flash/header_index.swf" />
<param name="wmode" value="transparent" />
<p>Sie benötigen zur Anzeige des Flashfiles das kostenlose Flash plugin.</p>
<p><a href="http://www.macromedia.com/go/getflashplayer/">Download Macromedia Flash Player</a></p>
<img src="noflash.gif" width="976" height="204" alt="" />
</object> 
						
<div id="navi_header_position">
<ul id="navi_header">
<li><a class="navi_header01" href="webdesign_rodgau.htm" title="Webdesign">Webdesign</a></li>
(...)
</ul>
</div>
</div>
<div id="abstand">
(...)

 

[Maik]

Hi,

positionier mal die Navigation relativ:

div#navi_header_position /* Navi über Flash */
{
/*        clear: left; */
        height: 174px;
        width: 136px;
        float: left;
        margin-top: -178px; /* über Flash schieben */
        padding-left: 40px;
        position: relative;
}

Zudem hast du hier beim Wert relative das "e" am Ende vergessen:

div#headerflash {
        float: left;
/*        display: block; */
        width: 976px;
        height: 204px;
        background-repeat: no-repeat;
        background-image: url("../images/layout_header_hell.jpg");
        position: relative;
}

 

[css_tester]

Hi Maik,

vielen herzlichen Dank für deine Hilfe

Ja... das war der entscheidene Hinweis, der bei mir die Blockade gelöst hat ;-)

Das Problem ist einfach, der FF und der O kommen mit dem negativen Margin "margin-top: -178px;" und der "position: absolute;" zurecht, der IE "natürlich" nicht und der bekam nun per CC die "position: relative;" zugewiesen... und siehe da... es geht!

Der "div#headerflash" benötigt gar keine Positionierung, daher war das fehlende "e" zum Glück ohne Auswirkungen!

Grüße!