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:
Weiters der Code der ein ausklappbares Menü baut:
Hier habe ich die Navigation mit z-index:4; versehen. Die höchst vergebene Indexzahl.
Und hier der dazupassende HTML Code:
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
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;
}
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