nicht angemeldet
Hallo,
ich möchte mir, auch um JS zu erlernen, ein Ausklappmenü erstellen. Soweit funktioniert dies auch ganz gut. Leider kommt es dazu, dass das Menü den Content nach unten verschiebt, statt es zu überlappen.
Kann mir jemand sagen, wie ich es schaffe, dass der Content nicht verschoben wird?
Die URL der Testseite: http://viciousvelo.dyndns.org:1234/test/tests.php
Ich weiß, bisher, dass es bis zur Ebene des div-Elemens #test funktioniert. Erst wenn die .left-divs dazukommen und gefloatet werden, kommt es zu diesem Effekt.
Ich habe schon etliche Dinge in Bezug auf position: relative, einem clear:both und z-index probiert; leider ohne Erfolg.
Ich danke für die Hilfe und hoffe, dass ich hier richtig bin. Mir ist klar, dass der Code noch nicht ordentlich sauber ist. Ich hoffe das spielt vorerst keine Rolle bei dem Problem.
Hier mal der (verkürzte) DOM-Baum bei ausgeklapptem Menü:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js.php"></script>
</head>
<body>
<div id="alles">
<div id="header">
<center>
<div id="navi" onmouseover="navi_in();" onmouseout="navi_out();">
<img width="100px" height="100px" id="button" src="button2.png">
<div id="test">
<div class="left">
<a href="index.php">Startseite</a>
</div>
<div class="left">
<a href="verein.php">Verein</a>
</div>
<div class="left">
<a href="mitglieder.php">Mitglieder</a>
</div>
<div class="left">
<a href="termine.php">Termine</a>
</div>
<div class="left">
<a href="berichte.php">Berichte</a>
<ul>
<a href="ber2012.php">
<li>2012</li>
</a>
<a href="ber2011.php">
<li>2011</li>
</a>
<a href="ber2010.php">
<li>2010</li>
</a>
<a href="ber2009.php">
<li>2009</li>
</a>
</ul>
</div>
<div class="left">
<a href="galerie.php">Galerie</a>
<ul>
<a href="gal2012.php">
<li>2012</li>
</a>
<a href="gal2011.php">
<li>2011</li>
</a>
<a href="gal2010.php">
<li>2010</li>
</a>
<a href="gal2009.php">
<li>2009</li>
</a>
</ul>
</div>
<div class="left">
<a href="bergmann.php">Bergmann</a>
<ul>
<a href="berg2012.php">
<li>2012</li>
</a>
<a href="berg2011.php">
<li>2011</li>
</a>
<a href="berg2010.php">
<li>2010</li>
</a>
</ul>
</div>
</div>
</div>
</center>
</div>
<div id="content">
<h1>TEstus testum</h1>
usw....
</div>
</div>
</body>
</html>
Und die CSS-Daten.
* {
margin: 0px;
padding: 0px;
}
body {
background-color: white;
background-image: url(bg.jpg);
background-attachment: fixed;
color: navy;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 18px;
}
#alles {
width: 1000px;
background-color: white;
margin: 0px auto 20px auto;
}
a {
text-decoration: none;
color: #E66B42;
}
#header {
background-color: #ADBDEF;
height: 100px;
margin: 0px;
}
#header img {
margin: 0px;
}
#navi {
width: 100px;
height: 100px;
z-index: 9;
}
#test {
width: 708px;
height: 200px;
background-color: #ADBDEF;
z-index: 9;
position: relative;
margin-left: -275px;
filter: alpha(opacity = 90);
opacity: 0.9;
box-shadow: 3px 2px gray;
}
.left {
float: left;
height: 180px;
width: 90px;
margin: 0;
text-align: center;
padding: 10px 0;
list-style-type: none;
font-size: 15px;
padding: 5px;
position: relative;
z-index: 9;
}
.left a {
color: #E66B42;
display: block;
border: 1px solid #ADBDEF;
position: relative;
z-index: 9;
border-bottom: 1px solid gray;
}
.left a:hover {
background-color: #ADBDEF;
font-weight: bold;
position: relative;
z-index: 9;
border-bottom: 2px solid gray;
}
.left ul {
list-style-type: none;
font-size: 13px;
padding: 5px;
text-align: left;
position: relative;
}
.left ul a {
border-bottom: 0px solid gray;
}
.left ul a:hover {
border-bottom: 0px solid gray;
}
#content {
z-index: 3;
padding: 20px;
position: relative;
}
#content h1 {
font-size: 26px;
font-weight: bold;
letter-spacing: 3px;
text-align: center;
margin-bottom: 15px;
line-height: 30px;
z-index: 3;
position: relative;
}
#content h2 {
margin: 10px 0;
}