XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit dem Z-index / der Ebenendarstellung (http://xhtmlforum.de/showthread.php?t=61553)

usm 25.06.2010 13:46

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>


heiko_rs 25.06.2010 13:50

Mal gibtst Du li den z-index, und mal ul - das führt zu dem Problem, sei also konsequent! (gib ihn am besten ul)

Und opacity der 3. Ebene tut ein übriges.

usm 25.06.2010 15:18

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>


heiko_rs 25.06.2010 16:05

Zitat:

Zitat von usm (Beitrag 468924)
zumal es ja nur beim ersten Punkt ist

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.

usm 25.06.2010 16:41

Zitat:

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.
Verstehe ich nicht! Was meinst du mit "diesen"? Die Grafiken? Dennoch müsste die Opazität doch 0.8 sein. In der Klasse erneut die Opazität zuzuweisen bringt auch nix. Das ist zum Haareraufen ...

heiko_rs 25.06.2010 17:14

Zitat:

Zitat von usm (Beitrag 468930)
Was meinst du mit "diesen"? Die Grafiken?

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.

usm 25.06.2010 19:38

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.
Was bedeutet: Ich kann die Transparenz beim Sub-Sub-Menü vergessen!?
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

heiko_rs 25.06.2010 19:45

Zitat:

Zitat von usm (Beitrag 468942)
Ich kann die Transparenz beim Sub-Sub-Menü vergessen!?

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.

Zitat:

Zitat von usm (Beitrag 468942)
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

Über li:hover.

usm 25.06.2010 21:40

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

heiko_rs 25.06.2010 21:46

Es hat mit Deinen Grafiken zu tun, aber nicht mit denen von a, sondern der 3. ul.


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:10 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020