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