[TYPO3-german] z-index-Problem: Video verdeckt Navigatioin

thomas.buegel at web.de thomas.buegel at web.de
Tue May 22 17:39:38 CEST 2012


Hallo,

im header einer Website habe ich ein Menu mit aufspringenden DIV-Boxen mit einer Übersichtsnavigation vom Prinzip ähnlich wie auf der http://www.aoemedia.de/startseite.html mit darunterliegendem Flash.
In meinem Fall handelt es sich um ein Youtube-Video. Es gelingt mir nicht, die Navigation vor die Flash-Eebene zu bringen, egal, was ich bislang im CSS-File eingetragen habe.

Tatsache ist, dass sowohl der von mir generierte HTML-Code, als auch der systembedingte HTML-Code von Typo3 bzw. der hier verwendeten Extension jfmulticontent relativ komplex ist:

Die Struktur ist (ID- und Klassen-Bezeichnungen sind hier zum großen Teil nicht mit angegeben):
<div id="header">
<!--das header menu liegt vom Layout oberhalb (nördlich) der weiteren Inhalte des headers-->
<div id="header-menu">
<!--Hier kommt die Navigation, die über (Ebene) dem Video liegen muss-->
<ul>
<li>
<!--Zum Beispiel gibt es sowas-->
<div><div><ul><li></li></ul></div><div><div></div></div></div>
</li>
<li>
<!--Es gibt aber auch sowas-->
<div><div><ul><li><ul><li></li><li></li></ul></li><li><ul><li></li><li></li></ul></li><li><ul><li></li><li></li><li></li></ul></li><li><ul><li></li></ul></li><li></li></ul></div><div><div></div></div></div>
</li>
<!--hier folgen weitere Navigations-Elemente-->
</ul>
</div>
<!--der header content liegt vom Layout unterhalb (südlich) der Navigation-->
<div id="header_content">
<div><div><div><div><div><div>
<!--Hier kommt das Video, das unter (Ebene) der Navigation liegen muss-->
<object width="480" height="360"><param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="src" value="http://www.youtube.com/v/[ID]&amp;hl=en_US&amp;feature=player_embedded?version=3&amp;hl=de_DE&amp;autoplay=0&amp;showinfo=0&amp;controls=0&amp;rel=0">
<param name="allowfullscreen" value="true">
<embed width="480" height="360" type="application/x-shockwave-flash" src="http://www.youtube.com/v/[ID]&amp;hl=en_US&amp;feature=player_embedded?version=3&amp;hl=de_DE&amp;autoplay=0&amp;showinfo=0&amp;controls=0&amp;rel=0" allowfullscreen="true" allowscriptaccess="always" />
</object>
</div></div></div><div><div>
<div><header><h1></h1></header>
</div></div></div></div></div></div>
</div>
</div>

Ich habe nun schon einige Varianten ausprobiert. Letzter Stand ist, dass fast alle DIV-Tags, der Navigation die Style Attribute position: relative; z-index: 1000; erhalten haben und fast alle DIV-Tags, der Hedder Inhalte, wo auch das Video platziert ist, die Style Attribute position: relative; z-index: 1; erhalten haben. Tzrotz allem liegt das Video immer über der Navigation.
Ich weiß echt nicht mehr weiter.

Welche Elemente benötigen überhaupt die Angabe des Styles: position mit dem z-index?

Hat jemand einen Vorschlag zur Lösung oder kennt jemand Problem und Lösung?

(Zur Info ich verwende HTML5 als Dokumententyp)

Danke und Gruß

Tom


More information about the TYPO3-german mailing list