✔ Wieder ein z-index Problem

quidnovi · 13. Oktober 2006

Hi Css'ler,

laut css ergibt der z-index die Layerposition wieder. Also z-index:2; liegt über z-index:1;

Nur das funktioniert bei mir nicht, daher möchte ich um Eure Hilfe bitten.

Hier der Css-Code:

Code:

/*Grundlegendes*/
html {
	height:100%; 
	max-height:100%; 
	padding:0; 
	margin:0; 
	border:0; 
	font-size:76%; 
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/* */ 
	}

body {
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0;
	}

#basics {
	display:block; 
	overflow:auto; 
	position:absolute; 
	height: 100%;
	top:0px; 
	bottom:0px; 
	width:1000px; 
	margin-left:-500px; 
	left:50%; 
	background:#ffffff;
	}
* html #basics {
	top:0; 
	bottom:0; 
	height:100%;
	width:1000px;
	}
/*/Grundlegendes*/

/*Navigation links,Content,Navigation rechts*/
#navleft {
      position:absolute; 
	  left:0; 
	  top:96px; 
	  bottom:25px; 
	  width:176px; 
	  overflow: auto;
	  background:#E8E8E8;
	  z-index:3;
	  }

#contentcenter{
      position:absolute; 
	  left:176; 
	  top:96px; 
	  bottom:25px; 
	  width:648px; 
	  overflow:auto;
	  background:#ffffff;
	  z-index:2;
	  }
#navright {
      position:absolute; 
	  left:824px; 
	  top:96px; 
	  bottom:25px; 
	  width:176px; 
	  overflow: auto;
	  background:#E8E8E8;
	  z-index:3;
	  }
* html #navleft, * html #contentcenter, * html #navright {
      height:100%; 
	  top:0; 
	  bottom:0; 
	  border-top:96px solid #fff; 
	  border-bottom:25px solid #fff;
	  }
/*/Navigation links,Content,Navigation rechts*/


/*Header, Headernavigation, Footer*/
#header {
	text-align:center;
	position:absolute; 
	margin-left:-500px; 
	left:50%; 
	top:0; 
	width:1000px; 
	min-width:1000px; 
	height:71px; 
	background:#ffffff;
	z-index:1; 
	}
* html #header {
	top:0px; width:1000px; height:96px;
	}


#headernavigation {
      position:absolute; 
	  margin-left:-500px; 
	  left:50%; 
	  top:71px; 
	  width:1000px; 
	  min-width:1000px; 
	  height:25px; 
	  background:red; 
	  z-index:1; 
	  text-align: center;
	  line-height: 24px;
	  }

#footer {
	text-align:center;
	position:absolute; 
	margin-left:-500px; 
	left:50%; 
	bottom:0; 
	width:1000px; 
	min-width:1000px; 
	height:25px; 
	background:red;
	z-index:1;
	line-height: 24px;
	}
* html #footer {
	bottom:0px; width:1000px; height:25px;
	}
/*/Header, Headernavigation, Footer*/


.inner {
      display:block;
	  padding:0 10px 10px 10px;
	  }

Weiters der Code der ein ausklappbares Menü baut:

Code:

ul#nav,
ul#nav ul {
	margin: 0;
	padding: 0;
	width: 175px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	background: #fff; /* IE6 Bug */
	color: black;
	font-size: 100%;
	z-index:4;
	}
 
ul#nav li {
	position: relative;
	list-style: none;
	}
 
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	font-size: 12px;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
 
ul#nav ul {
	position: absolute;
	display: none;
	left: 175px; /* Set 1px less than menu width */
	top: 0;
	}
 
ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
 
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block; background: #f9f9f9; } /* The magic */

ul#nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
 
ul#nav li.menuparent:hover,
ul#nav li.over { 
	background-color: #f9f9f9; 
}
 
 
ul#nav li a:hover { 
	color: red; 	
}

Hier habe ich die Navigation mit z-index:4; versehen. Die höchst vergebene Indexzahl.

Und hier der dazupassende HTML Code:

HTML:

<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="./css/stot.css" />
  
<body>

<body>

<div id="basics">
                  <div id="header">LOGO</div>
                  <div id="headernavigation">
                        <div style="width:350px; top: 0px; float:left; color:black; text-align: left;">ANGEMELDET</div>
                        <div style="width:500px; top: 0px; float:right; text-align: right;">KLICKPFAD</div>
                  </div>
                  <div id="navleft"><div id="nav">MENU</div></div>
                  <div id="contentcenter"><div class="inner">INHALT</div></div>
                  <div id="navright"><div class="inner">NEWS<br>BILDER</div></div>
                  <div id="footer">FUSSZEILE</div>
</div>

</body>
</html>

Auf der Spalte mit der Navigation (navleft) wird ein ausklappbares Menü aufgesetzt, dessen Links über den Content gehen sollen. Aber nach Stunden des Herumprobierens fält mir nix mehr ein.

Bitte seht den Code durch und sagt mir wo der Fehler liegt. Ich sehe wahrscheinlich den Wald vor lauter Bäumen nicht mehr!

Vielen Dank im voraus

Maik · 13. Oktober 2006

Du solltest mal die Diskrepanz zwischen dem ID-Selektor ul#nav und dem verwendeten DIV #nav korrigieren.

Zudem hast du im HTML-Code das body-Element zweimal notiert, ersteres gehört aber durch das schliessende </head> ersetzt.

Desweiteren wird die Seite im IE unvollständig angezeigt: es fehlt der Header, die Headernavigation und der Footer, was vermutlich an den zu niedrigen Schichtpositionen liegt.

Maik · 13. Oktober 2006

Probier es mal mit folgender Erweiterung und Änderung im CSS-Code:

Code:

ul#nav,
ul#nav ul {
        margin: 0;
        padding: 0;
        width: 175px; /* Width of Menu Items */
        border-bottom: 1px solid #ccc;
        background: #fff; /* IE6 Bug */
        color: black;
        font-size: 100%;
        z-index:4;
        position:relative;
        }


#navleft {
      position:absolute; 
      left:0; 
      top:96px; 
      bottom:25px; 
      width:176px; 
      /*overflow: auto;*/ /* auskommentiert = deaktiviert */
      background:#E8E8E8;
      z-index:3;
}

quidnovi · 13. Oktober 2006

Hi michaelsinterface,

danke für Deine Tips, funktioniert! Das Menü klappt jetzt richtig über den Content.

Nur sind jetzt die Bereiche navleft, content und navright ganz nach links verschoben.
Aber das werde ich schon hinkriegen.

Danke nochmal

quidnovi · 13. Oktober 2006

So, gelöst!

Hier für alle die es interessiert.

Ich habe in der css Datei mit "Grundlegendes..." folgendes eingefügt:

Code:

#frame {
	display:block; 
	overflow:auto; 
	position:absolute; 
	height: 100%;
	top:0px; 
	bottom:0px; 
	width:1000px; 
	margin-left:-500px; 
	left:50%; 
	background:#ffffff;
	}
* html #frame {
	top:0; 
	bottom:0; 
	height:100%;
	width:1000px;
	}

"frame" ist nur ein Name, könnte auch irgendwie anders heißen.

In der HTML Vorlage folgendes:

HTML:

<div id="basics">
                  <div id="header">LOGO</div>
                  <div id="headernavigation">
                        <div style="width:350px; top: 0px; float:left; color:black; text-align: left;">ANGEMELDET</div>
                        <div style="width:500px; top: 0px; float:right; text-align: right;">KLICKPFAD</div>
                  </div>
		  <div id="frame">
                  <div id="navleft"><div id="nav">MENU</div></div>
                  <div id="contentcenter">INHALT</div>
                  <div id="navright"><div class="inner">NEWS<br>BILDER</div></div>
		  </div>
                  <div id="footer">FUSSZEILE</div>
</div>

somit habe ich die Spalten navleft, contentcenter und navright in einen "Rahmen" gezwungen, in dem ich die Positionen der einzelnen Spalten pixelgenau definieren kann.

Is vielleicht nicht der schönste Weg, funktioniert aber.

Würde mich über eine professionellere Lösung freuen.

Solong

✔ Wieder ein z-index Problem

quidnovi

Erfahrenes Mitglied

Maik

Maik

quidnovi

Erfahrenes Mitglied

quidnovi

Erfahrenes Mitglied

Neue Beiträge