Player überlappt Menu

Question

Hallo.

Ich habe schon länger auf meiner HP ein Menu aus dem Generator von Stu Nicholls. Die Seite war mit Tabellen eingeteilt.
Jetzt wollte ich 1. mal ein css-layout ohne Tabellen probieren in dem die Navi und die Titelzeile stehen bleiben und habe mir eins zusammengeschustert.
2. möchte ich in der Neuversion dann auch einen Player auf einer Seite einbinden.
Das hat auch geklappt, nur wenn das Menu ausklappt, verschwindet es unter dem Player, was natürlich nicht so toll ist.
Hier ist ein Screenshot.
Nun bin ich mit meinen html/css-Kenntnissen noch ziemlich am Anfang. :-(
Nachdem ich tagelang gesucht habe, dachte ich, bei self-html das Richtige gefunden zu haben: z-index. Irgendwie kriege ich das aber nicht hin.

Das css-Seitenlayout sieht so aus:
body {
padding: 0px;
margin: 0px;
background-color: #660000;
}
#navi {
position: absolute;
z-index: 3;
top: 5px;
left: 0px;
width: 180px;
height: 580px;
background-color: #660000;
}
#titel {
height: 80px;
z-index: 2;
margin: 0px;
margin-left: 180px;
background-color: #660000;
color: #F8D1BA;
}
#inhalt {
width: auto;
z-index: 1;
height: 450px;
overflow: auto;
margin-left: 180px;
margin-right: 10px;
padding: 15px;
background-color: #990000;
color: #F8D1BA;
border-width: 2px;
border-style: ridge;
border-color: #660000;
}

Das css für das Menu:
.menu { margin: 0px; height: 100px; font-size: 10pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 11em; }
.menu li { background-color: #990000; float: left; }
.menu li.sub { background-color: #990000; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 2px ridge #660000; display: block; text-decoration: none; height: 1.6em; line-height: 1.6em; width: 11em; color: #F8D1BA; padding-left: 1em; font-weight: bold; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 11em; }
* html .menu a:hover { border-color: #660000; color: #F8D1BA; background-color: #cc0000; position: relative; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { border-color: #660000; color: #F8D1BA; background-color: #cc0000; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { border-color: #660000; color: #F8D1BA; background-color: #cc0000; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }

Der Player ist in einer Tabelle im div "Inhalt" so eingebunden:
<object><embed
src="player-viral.swf"
width="400"
height="300"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=out6.flv"
/></object>

Ich habe auch schon versucht, dem Player oder der Tabelle, in der er sich befindet einen z-index zuzuweisen, aber auch das hat nichts verändert.
Setze ich z-index einfach nur falsch ein oder bin ich total auf dem Holzweg?

Wäre schön, wenn jemand mir helfen könnte.

LG
basteltante

Answer 1

Hallo, trage in dein <embed>-Tag das Attribut

wmode="opaque"

zusätzlich ein, dann respektiert Flash auch die z-Index Angaben.

Answer 2

Hallo Supermax.

Habe ich gemacht, sieht jetzt so aus:

<table cellpadding="0" cellspacing="0" border="0" align="center" width="90%" style="text-align: center; "; ">
<tr>
<td>
<object style="z-index: 1"><embed
src="player-viral.swf"
width="400"
height="300"
allowscriptaccess="always"
allowfullscreen="true"
wmode="opaque"
flashvars="file=out6.flv"
/></embed></object>
</td>
</tr>
</table>

Keine Veränderung. Dann fiel mir auf, dass wohl ein End-Tag für <embed> fehlte und habe auch das ergänzt. Nix!

Was könnte es sonst noch sein?

LG
basteltante

Answer 3

Hallo basteltante,

z-index funktioniert nur bei gleichzeitiger Nutzung von position. Soweit ich das deinen Codebrocken entnehmen kann, hast du aber für den Flashplayer oder dessen Vorfahrenelemente dazu nichts angegeben.

katy

Answer 4

Hallo Katy.

hast du aber für den Flashplayer oder dessen Vorfahrenelemente dazu nichts angegeben

Stimmt. Hatte irgendwo gelesen, dass man möglichst position vermeiden soll, da die IEs das nicht richtig interpretieren können und bin deshalb auch für Titel + Navi von position: fixed abgekommen. Hatte ich nämlich vorher (und nicht den "hässlichen" overflow-Scrollbalken).

Über Vererbung habe ich auch schon was gelesen, aber nicht wirklich verstanden.
Ist die Tabelle oder das <div> das "Eltern"-Element (heißt das so?)?

Kannst du mir konkret sagen, wie ich das Problem am besten löse? Was bräuchtest du dafür noch an Info?
Bitte in kleinen Schritten, da ich wie gesagt erst damit angefangen habe. Habe früher meine Seiten in KompoZer gemacht und arbeite erst seit 2 oder 3 Monaten mit bluefish. Seitdem lerne ich so allmählich ein wenig.

LG
basteltante

Answer 5

Mein Ratschlag wäre ja, die kopierten Teile rauszuschmeißen und das selbst zu entwickeln - dann hast du nämlich die Kontrolle über den Code.

Vorfahren sind alle Elemente, die das, um das es sich dreht, zwischen ihr <...> und </...> einschließen. Also:

<ul><li><p>bla<span>blubb</span></p></li></ul>

hier wären p, li, ul Vorfahren von span. Die meisten CSS-Eigenschaften der Vorfahren werden auf die Nachfahren vererbt, aber nicht alle. Und sowie position, float und ähnliches ins Spiel kommt wird es so richtig kompliziert, weil dann Elemente "aus dem Fluss" genommen sind, was bedeutet, dass die Vorfahren-Nachfahren-Vererbung weitgehend aufgehoben ist.

Mein Tipp - mal abgesehen vom obigen Ratrschlag - ist: reduzier die Seite auf die Navi und den Flashplayer (dessen Einbindung ich so noch nie gesehen habe - korrekt ist das jedenfalls nicht) und arbeite dann am CSS, bis der gewünschte Effekt eintritt.

Entschuldige, wenn ich keine konkretere Hilfestellung geben kann, aber dazu müsste ich deine von woanders kopierte Navi analysieren, was doch ganz schön Arbeit bedeutet.

katy

Answer 6

Hallo Katy.

hier wären p, li, ul Vorfahren von span

Wenn ul und li dann Vorfahren von p sind, habe ich das jetzt endlich verstanden.

Flashplayer (dessen Einbindung ich so noch nie gesehen habe

Beim Suchen habe ich 5 verschiedene Möglichkeiten gefunden, nach Abzug von JS waren es noch 3 und diese war die erste, die ich getestet habe. Funktionierte, also gelassen.

Na, dann werde ich mich wohl mal auf das Seitenlayout stürzen.
Alle Versuche, "position" in verschiedenen Kombinationen in das Seitenlayout zu bauen, haben jedenfalls noch kein Ergebnis gebracht.

Immerhin weiß ich jetzt, dass im Prinzip z-index schon richtig war, um die "Ebene" zu bestimmen und ich nicht noch einmal komplett neu auf die Suche gehen muss.

Danke
basteltante

Answer 7

Übrigens:

deine von woanders kopierte Navi

ist ein Generator.

Answer 8

ist ein Generator.

kommt für mich auf's selbe 'raus: du hast den Code nicht selbst entwickelt. Wenn ich also fragen würde, warum du da was gemacht hast, könntest du nicht antworten. Und letztlich hast du ja den Code von der "Generator"-Seite auch nur kopiert ;-)

katy