[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]&hl=en_US&feature=player_embedded?version=3&hl=de_DE&autoplay=0&showinfo=0&controls=0&rel=0">
<param name="allowfullscreen" value="true">
<embed width="480" height="360" type="application/x-shockwave-flash" src="http://www.youtube.com/v/[ID]&hl=en_US&feature=player_embedded?version=3&hl=de_DE&autoplay=0&showinfo=0&controls=0&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