Hallo,
ich möchte mit "Reitern" mein Menü gestalten, aber leider komme ich nicht weiter. Ich habe mal den Code auf das wesentliche Problem reduziert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>z-index</title>
<style type="text/css"><!--
div
{
font-family:Verdana;font-size:12px;
position:absolute; width:300px; height:150px;
border:1px solid #000000;
background-color:#efefef;
}
#tabmenu {color: #000; position: absolute; top: 150px; padding:0px; margin-left: 15px;z-index:0}
#tabmenu li {display: inline;overflow: hidden;list-style-type: none;}
#tabmenu a {z-index:10;font-size: 8.0pt;color: black;font-weight: normal;
border: 3px solid #60acf7;border-right: 3px solid #0959a9;background: #e9eef2;
padding:2px;margin:2px;text-decoration:none;}
#tabmenu a.active {background: #fafafa;border-bottom: 5px solid #fafa11;}
#tabmenu a:hover {color: #000;background: #fafafa;}
#tabmenu a.active:hover {background: #fafafa;color: lightgrey;}
--></style>
</head><body>
<ul id="tabmenu">
<li><a style="padding-left: 8px; padding-right: 8px;" href="">rtert</a></li>
<li><a style="padding-left: 8px; padding-right: 8px;" class="active" href="">tzert</a></li>
<li><a style="padding-left: 12px; padding-right: 12px;" href="">rtzrtz</a></li>
</ul>
<div style="position:absolute; top:100px; left:100px; ; border:thin solid #804000;">
<b>1.</b></div>
</body>
</html>
So...wenn ihr euch das mal anschaut kann ich nun erklären was ich versuche: Dort sind nun 3 Reiter unter dem grauen Kasten. Aber den mittleren Container (mit gelber untererm Rahmen) versuche ich nun über den grauen Container zu bekommen (der 3. soll drunter bleiben). Finde jedoch keine Lösung
ich möchte mit "Reitern" mein Menü gestalten, aber leider komme ich nicht weiter. Ich habe mal den Code auf das wesentliche Problem reduziert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>z-index</title>
<style type="text/css"><!--
div
{
font-family:Verdana;font-size:12px;
position:absolute; width:300px; height:150px;
border:1px solid #000000;
background-color:#efefef;
}
#tabmenu {color: #000; position: absolute; top: 150px; padding:0px; margin-left: 15px;z-index:0}
#tabmenu li {display: inline;overflow: hidden;list-style-type: none;}
#tabmenu a {z-index:10;font-size: 8.0pt;color: black;font-weight: normal;
border: 3px solid #60acf7;border-right: 3px solid #0959a9;background: #e9eef2;
padding:2px;margin:2px;text-decoration:none;}
#tabmenu a.active {background: #fafafa;border-bottom: 5px solid #fafa11;}
#tabmenu a:hover {color: #000;background: #fafafa;}
#tabmenu a.active:hover {background: #fafafa;color: lightgrey;}
--></style>
</head><body>
<ul id="tabmenu">
<li><a style="padding-left: 8px; padding-right: 8px;" href="">rtert</a></li>
<li><a style="padding-left: 8px; padding-right: 8px;" class="active" href="">tzert</a></li>
<li><a style="padding-left: 12px; padding-right: 12px;" href="">rtzrtz</a></li>
</ul>
<div style="position:absolute; top:100px; left:100px; ; border:thin solid #804000;">
<b>1.</b></div>
</body>
</html>
So...wenn ihr euch das mal anschaut kann ich nun erklären was ich versuche: Dort sind nun 3 Reiter unter dem grauen Kasten. Aber den mittleren Container (mit gelber untererm Rahmen) versuche ich nun über den grauen Container zu bekommen (der 3. soll drunter bleiben). Finde jedoch keine Lösung
