|
|||
Problem mit dem Z-index / der Ebenendarstellung
Bei meiner Navi (Navitest) habe ich ein Sub-Menü und ein Sub-Sub-Menü mit Transparenzen. Leider wird das Sub-Sub-Menü - interessanterweise bis auf den oberen Menüpunkt - durch das Sub-Menü verdeckt. Ich hätte aber gern das GESAMTE Sub-Sub-Menü vorn. Entsprechende Z-index-Einstellungen helfen auch nicht. Was habe ich übersehen bzw. falsch gemacht/gedacht?
Danke vorab für eure Hilfe! HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Navitest</title> <style type="text/css"> body { color: black; background-color: black; } div#Rahmen { float: left; height: 75px; width: 707px; margin-top: 50px; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 48.7em; w\idth: 47.1em; } div#Rahmen div { clear: left; } #abschluss { background-image: url(images/abschlussrund.png); float: left; height: 75px; width: 17px; background-repeat: no-repeat; } /* ********************************************************* Menü ***************************************************************/ .menu { /* Anker für das gesamte Menü */ position:relative; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; font-variant: normal; line-height: 23px; text-align: center; } .menu li { /* Haupt-Menüelemente */ list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; z-index: 20; } .menu li ul { /* Untermenü */ margin: 0; padding: 0; position: absolute; top: 24px; display: none; /* Unternavigation ausblenden */ } .menu li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } .menu a, .menu span { display: block; position:relative; background-image: url(images/buttonNEU_dunkel.png); /*buttons für Standard-Leistenelemente außer "Aktuell" */ width: 115px; /* Breite den in li enthaltenen Elementen zuweisen */ height: 24px; text-decoration: none; font-weight: lighter; color: white; background-color: inherit; z-index: 20; } .menu ul { position:absolute; z-index:50; } .menu ul a { /* Design der Submenü-Liste */ background-image: url(images/buttonNEU_sub1-3.png); filter: alpha(opacity=80); opacity:0.8; text-align:left; padding-left: 20px; height: 27px; width: 95px; line-height: 28px; background-repeat: no-repeat; z-index:50; } .menu ul ul { position:absolute; top:0px; background-image: url(images/buttonNEU_sub1-3.png); background-repeat:no-repeat; opacity:0.8; width:115px; margin-left:100px; margin-top:3px; z-index:100; } .menu ul ul a { z-index:100; display:none; } .menu ul a:hover { background-image: url(images/buttonNEU_sub2-3.png); filter: alpha(opacity=80); opacity:0.8; text-align:left; padding-left: 10px; height: 27px; width: 105px; line-height: 28px; background-repeat: no-repeat; } .menu ul a:active { background-image: url(images/buttonNEU_sub3-3.png); filter: alpha(opacity=80); opacity:0.8; text-align:left; padding-left: 10px; height: 27px; width: 105px; line-height: 28px; background-repeat: no-repeat; } .menu a:hover, .menu span, li a#aktuell { background-image:url(images/buttonNEU_mittel.png); /* bild bei allen a:hover */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } .menu a:active, .menu span, li a#aktuell { background-image: url(images/buttonNEU_down.png); /* alle down-Buttons */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } .menu ul :hover ul a { display: block; /* Sub-Submenü in modernen Browsern einblenden */ z-index:100; } .menu ul ul a:hover { background-image: url(images/buttonNEU_sub2-3.png); background-repeat:no-repeat; opacity:0.8; } .menu li ul ul a:active { background-image: url(images/buttonNEU_sub3-3.png); background-repeat:no-repeat; opacity:0.8; } li a#aktuell { /* aktuelle Rubrik kennzeichnen */ background-image: url(images/buttonNEU_hell.png); /*aktuell-Button */ color: white; background-color: inherit; } .menu li ul span { /* aktuelle Unterseite kennzeichnen */ background-image: url(images/buttonNEU_sub3-3.png); position:absolute; filter: alpha(opacity=80); opacity:0.8; text-align:left; padding-left: 20px; height: 27px; width: 95px; line-height: 28px; background-repeat: no-repeat; } .menu .sub_unten a { background-image: url(images/buttonNEU_sub3_unten.png); } .menu .sub_unten a:hover { background-image: url(images/buttonNEU_sub2_unten.png); } .menu .sub_unten a:active { background-image: url(images/buttonNEU_sub1_unten.png); } .menu .space a { background-image: url(images/buttonNEU_sub3_unten.png); height:7px; } .menu .space a:hover { background-image: url(images/buttonNEU_sub3_unten.png); height:7px; } .menu .space a:active { background-image: url(images/buttonNEU_sub3_unten.png); height:7px; } .menu .sub_oben a { background-image: url(images/buttonNEU_sub1_oben.png); } .menu .sub_oben a:hover { background-image: url(images/buttonNEU_sub2_oben.png); } .menu .sub_oben a:active { background-image: url(images/buttonNEU_sub3_oben.png); } </style> </head> <body> <div id="Rahmen"> <ul class="menu"> <div id="abschluss"></div> <li><a href="#Beispiel">Home</a></li> <li><a href="#Beispiel">Galerien</a> <ul> <li class="space"><a href="#"></a> <li><a href="#Beispiel">Fotos ›</a> <ul> <li class="sub_oben"><a href="'Submenü">Foto1</a></li> <li><a href="#submenue">Foto2</a></li> <li><a href="#submenue">Foto3</a></li> <li class="sub_unten"><a href="'Submenü">Foto4</a></li> </ul> </li> <li><a href="#Beispiel">Multimedia ›</a> <ul> <li class="sub_oben"><a href="'Submenü">Multimedia1</a></li> <li><a href="#submenue">Multimedia2</a></li> <li><a href="#submenue">Multimedia3</a></li> <li class="sub_unten"><a href="'Submenü">Multimedia4</a></li> </ul> </li> <li><a href="#Beispiel">Stories</a></li> <li class="sub_unten"><a href="#Beispiel">Sonstiges</a></li> </ul> </li> <li><a href="#Beispiel">Referenzen</a></li> <li><a href="#Beispiel">Info/Kontakt</a> <ul> <li><a href="#Beispiel">Info</a></li> <!-- <li><span>aktuelle Seite</span></li> --> <li><a href="#Beispiel">Kontakt</a></li> <li class="sub_unten"><a href="#Beispiel">Mehr...</a></li> </ul> </li> <li><a href="#Beispiel">Prints & Posters</a></li> <li><a href="#Beispiel">Blog</a></li> </ul> <div></div> </div> </body> </html> |
Sponsored Links |
Sponsored Links |
|
|||
Abermals super! Danke! Last but not least noch das Problem mit dem ersten Menüpunkt im Sub-Sub-Menü: Ich habe nicht den geringsten Schimmer, wie ich hier noch die Opazität geändert bekomme - zumal es ja nur beim ersten Punkt ist: Navitest .
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Navitest</title> <style type="text/css"> body { color: black; background-color: black; } div#Rahmen { float: left; height: 75px; width: 707px; margin-top: 50px; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 48.7em; w\idth: 47.1em; } div#Rahmen div { clear: left; } #abschluss { background-image: url(images/abschlussrund.png); float: left; height: 75px; width: 17px; background-repeat: no-repeat; } /* ********************************************************* Menü ***************************************************************/ .menu { /* Anker für das gesamte Menü */ position:relative; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; font-style: normal; font-weight: normal; font-variant: normal; line-height: 23px; text-align: center; } .menu li { /* Haupt-Menüelemente */ list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; } .menu li ul { /* Untermenü */ margin: 0; padding: 0; position: absolute; top: 24px; display: none; /* Unternavigation ausblenden */ } .menu li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } .menu a, .menu span { display: block; position:relative; background-image: url(images/buttonNEU_dunkel.png); /*buttons für Standard-Leistenelemente außer "Aktuell" */ width: 115px; /* Breite den in li enthaltenen Elementen zuweisen */ height: 24px; text-decoration: none; font-weight: lighter; color: white; background-color: inherit; } .menu ul { position:absolute; z-index:50; } .menu ul a { /* Design der Submenü-Liste */ background-image: url(images/buttonNEU_sub1-3.png); filter: alpha(opacity=80); opacity:0.8; text-align:left; padding-left: 20px; height: 27px; width: 95px; line-height: 28px; background-repeat: no-repeat; } .menu ul ul { position:absolute; top:0px; background-image: url(images/buttonNEU_sub1-3.png); background-repeat:no-repeat; width:115px; margin-left:100px; margin-top:3px; z-index:100; } .menu ul ul a { display:none; } .menu ul a:hover { background-image: url(images/buttonNEU_sub2-3.png); text-align:left; padding-left: 10px; height: 27px; width: 105px; line-height: 28px; background-repeat: no-repeat; } .menu ul a:active { background-image: url(images/buttonNEU_sub3-3.png); text-align:left; padding-left: 10px; height: 27px; width: 105px; line-height: 28px; background-repeat: no-repeat; } .menu a:hover, .menu span, li a#aktuell { background-image:url(images/buttonNEU_mittel.png); /* bild bei allen a:hover */ border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } .menu a:active, .menu span, li a#aktuell { background-image: url(images/buttonNEU_down.png); /* alle down-Buttons */ border-color: white; border-left-color: black; border-top-color: black; color: white; } .menu ul :hover ul a { display: block; /* Sub-Submenü in modernen Browsern einblenden */ z-index:100; } .menu ul ul a:hover { background-image: url(images/buttonNEU_sub2-3.png); background-repeat:no-repeat; } .menu li ul ul a:active { background-image: url(images/buttonNEU_sub3-3.png); background-repeat:no-repeat; } li a#aktuell { /* aktuelle Rubrik kennzeichnen */ background-image: url(images/buttonNEU_hell.png); /*aktuell-Button */ color: white; background-color: inherit; } .menu li ul span { /* aktuelle Unterseite kennzeichnen */ background-image: url(images/buttonNEU_sub3-3.png); position:absolute; text-align:left; padding-left: 20px; height: 27px; width: 95px; line-height: 28px; background-repeat: no-repeat; } .menu .sub_unten a { background-image: url(images/buttonNEU_sub3_unten.png); } .menu .sub_unten a:hover { background-image: url(images/buttonNEU_sub2_unten.png); } .menu .sub_unten a:active { background-image: url(images/buttonNEU_sub1_unten.png); } .menu .space a { background-image: url(images/buttonNEU_sub3_unten.png); height:7px; } .menu .space a:hover { background-image: url(images/buttonNEU_sub3_unten.png); height:7px; } .menu .space a:active { background-image: url(images/buttonNEU_sub3_unten.png); height:7px; } .menu .sub_oben a { background-image: url(images/buttonNEU_sub1_oben.png); } .menu .sub_oben a:hover { background-image: url(images/buttonNEU_sub2_oben.png); } .menu .sub_oben a:active { background-image: url(images/buttonNEU_sub3_oben.png); } </style> </head> <body> <div id="Rahmen"> <ul class="menu"> <div id="abschluss"></div> <li><a href="#Beispiel">Home</a></li> <li><a href="#Beispiel">Galerien</a> <ul> <li class="space"><a href="#"></a> <li><a href="#Beispiel">Fotos ›</a> <ul> <li class="sub_oben"><a href="'Submenü">Foto1</a></li> <li><a href="#submenue">Foto2</a></li> <li><a href="#submenue">Foto3</a></li> <li<a href="'Submenü">Foto4</a></li> <li class="sub_unten"><a href="'Submenü">Foto5</a></li> </ul> </li> <li><a href="#Beispiel">Multimedia ›</a> <ul> <li class="sub_oben"><a href="'Submenü">Multimedia1</a></li> <li><a href="#submenue">Multimedia2</a></li> <li><a href="#submenue">Multimedia3</a></li> <li class="sub_unten"><a href="'Submenü">Multimedia4</a></li> </ul> </li> <li><a href="#Beispiel">Stories</a></li> <li class="sub_unten"><a href="#Beispiel">Sonstiges</a></li> </ul> </li> <li><a href="#Beispiel">Referenzen</a></li> <li><a href="#Beispiel">Info/Kontakt</a> <ul> <li><a href="#Beispiel">Info</a></li> <!-- <li><span>aktuelle Seite</span></li> --> <li><a href="#Beispiel">Kontakt</a></li> <li class="sub_unten"><a href="#Beispiel">Mehr...</a></li> </ul> </li> <li><a href="#Beispiel">Prints & Posters</a></li> <li><a href="#Beispiel">Blog</a></li> </ul> <div></div> </div> </body> </html> |
|
||||
Er ist der einzige, auf den die Klasse .sub_oben wirkt, die nix weiter tut, als andere Grafiken zuzuweisen, also dürfte es mit diesen zu tun haben.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Zitat:
|
|
||||
Natürlich. Deaktiviere sie mal und gib der 2. Ebene rot als Hintergrundfarbe (für die dritte aufheben), dann siehst Du, dass alle Links der 3. Ebene gleichermaßen opacity anwenden.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Zitat:
Sehr schade! Zu guter Letzt noch eine Kleinigkeit: Wenn ich nun vom Sub-Menü in ein Sub-Sub-Menü gehe - wie kriege ich das hin, dass das Listenelement im Sub-Menü auf a:hover bleibt, solange ich in dessen Sub-Sub-Menü bin? Noch mal vielen Dank für deine wirklich fantastische Hilfe - ohne wäre ich verloren gewesen! Gruß ... Uwe |
|
||||
Nein, bei den anderen Links der 3. Ebene geht es doch auch. Aber irgendwas scheint mit Deiner Grafik des ersten Links nicht zu stimmen bzw. anders zu sein, aber das herauszufinden, ist mir zu mühsam, das musst Du selber checken.
Über li:hover.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Funzt leider nicht. Ich habe die Grafik mal gegen eine getauscht, die ich darunter auch verwendet habe: das gleiche Ergebnis. Muss deshalb einen anderen Grund haben.
Gruß ... Uwe |
Sponsored Links |
|
||||
Es hat mit Deinen Grafiken zu tun, aber nicht mit denen von a, sondern der 3. ul.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit dem Browserabstand | Phöney | CSS | 2 | 05.04.2008 16:18 |
Problem mit dem IE7 | uspri | CSS | 11 | 16.12.2006 18:07 |
Problem: Ein Div wächst mit dem Inhalt nicht mit (Firefox!). | pager | CSS | 2 | 30.03.2006 20:03 |
Problem mit dem einbinden von Flash | Lockhead883 | (X)HTML | 0 | 01.03.2006 07:09 |
problem mit dem ie beim anzeigen von infoboxen /alternative | Mythic | CSS | 2 | 01.02.2006 10:36 |