nicht angemeldet
Javascript Menu verschiebt Content
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;
}
-
Du erfindest zwar gerade das Rad neu, aber Du sagtest ja, Du möchtest JS lernen... Juti.
Gib mal per css der #test ein position:absolute;
Cheers,
Baba-
Du erfindest zwar gerade das Rad neu, aber Du sagtest ja, Du möchtest JS lernen... Juti.
Gib mal per css der #test ein position:absolute;
Cheers,
BabaVielen Dank für die Hilfe.
Vielleicht habe ich das nicht so zur Geltung gebracht: Ich weiß, dass es mit position: absolute geht. Ich frage mich nur: Warum? Und warum ist es nicht möglich mit position:relative das Problem zu umgehen. Ich wollte es eigentlich vermeiden jedem div eine eigene ID zu geben um die margins zu setzen.
-
-
Hi,
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?Indem du den aufklappenden Teil des Menüs absolut positionierst, um ihn aus dem Fluss zu nehmen.
Das hat übrigens weniger mit JavaScript zu tun, und viel mehr mit CSS.
*Dass* du JavaScript dafür einsetzt (sofern es nicht nur zum Lernen ist und danach wieder in der Schublade verschwindet), ist allerdings schlecht – denn da du das komplette Menü erst mit JavaScript ins Dokument hineinbastelst, ist es für Browser (oder allgemeiner, Clients – also bspw. auch Suchmaschinen-Bots) ohne JS gar nicht verfügbar.
Das Menü gehört also von Anfang an ins HTML, und erst dann notfalls mit JavaScript in Sachen optischer Effekte aufgepeppt. (Was hier aber gar nicht nötig ist, denn es geht auch ohne – siehe Dynamische CSS-Navigation für moderne Browser.)
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Indem du den aufklappenden Teil des Menüs absolut positionierst, um ihn aus dem Fluss zu nehmen.
OK. Dann eine andere Frage: warum funktioniert das nicht mit position: relative; Und warum klappt es noch mit position: relative bei dem #test div?
Das hat übrigens weniger mit JavaScript zu tun, und viel mehr mit CSS.
Das ist mir bewusst, deswegen habe ich es unter dem Tag CSS eingestellt :) Trotzdem danke für den Hinweis.
*Dass* du JavaScript dafür einsetzt (sofern es nicht nur zum Lernen ist und danach wieder in der Schublade verschwindet), ist allerdings schlecht – denn da du das komplette Menü erst mit JavaScript ins Dokument hineinbastelst, ist es für Browser (oder allgemeiner, Clients – also bspw. auch Suchmaschinen-Bots) ohne JS gar nicht verfügbar.
Wie schon erwähnt, soll das hauptsächlich zum Erlernen genutzt werden. Ob ich es jemals produktiv nutze, weiß ich noch nicht. Außerdem wird es in jedem Fall immer noch die alte JS-lose Designvariante für die Anwender geben.
Das Menü gehört also von Anfang an ins HTML, und erst dann notfalls mit JavaScript in Sachen optischer Effekte aufgepeppt. (Was hier aber gar nicht nötig ist, denn es geht auch ohne – siehe Dynamische CSS-Navigation für moderne Browser.)
Mir ist das CSS-Menü bekannt. Ich nutze z.B. eine Bildergallerie auf Basis von CSS und ohne JS.
Vielen Dank für die Hilfe :)
MfG ChrisB
-
Hi,
Indem du den aufklappenden Teil des Menüs absolut positionierst, um ihn aus dem Fluss zu nehmen.
OK. Dann eine andere Frage: warum funktioniert das nicht mit position: relative
Weil relative ein Element nicht aus dem Fluss nimmt – es verschiebt ein Element nur gegenüber der Position, die es normalerweise im Fluss hätte, und der ursprüngliche Platzbedarf des Elements bleibt dabei reserviert.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-