nicht angemeldet
Ausklappbares Menü verschiebt andere Elemente
Hallo,
ich habe ein kleines ausklappbares Menü, das sich in einem Div-Element befindet. Außerdem befindet sich das Div-Element zusammen mit anderen Elementen in einer Tabelle.
Das Problem ist, dass wenn sich das Menü ausklappt die anderen Elemente verschoben werden, was nicht passieren soll. Ich hab mit dem CSS Attribut position: absolute erreicht, dass sich die anderen Elemente nicht mehr verschieben. Allerdings wird damit die normale Positionierung, die ich eigentlich mit der Tabelle erreichen wollte aufgehoben.
Kann mir jemand sagen, wie ich mein Problem am besten löse?
Kurzer Quelltext, der das Problem verdeutlicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"><!--
function displayList(id) {
with (document) {
if (getElementById) {
getElementById(id).style.display = "block";
} else if (all) {
all[id].style.display = "block";
} else {
layers[id].display = "block";
}
}
}
function hideList(id) {
with (document) {
if (getElementById) {
getElementById(id).style.display = "none";
} else if (all) {
all[id].style.display = "none";
} else {
layers[id].display = "none";
}
}
}//-->
</script>
<style type="text/css">
ul,li {
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.menu {
position: absolute;
top: 35px;
}
div.menu li {
width: 140px;
float: left;
}
div.menu a:hover {
background-color: #ccc;
}
div.menu a {
border: 1px solid #888;
text-decoration: none;
text-align: center;
background-color: #EEE;
margin: 0px 2px;
display: block;
}
#smenu1, #smenu2 {
display: none;
width: 140px;
float: left;
}
#smenu1 a, #smenu2 a {
padding-top: 2px;
border-top: 0px;
}
</style>
</head>
<body>
<table>
<tr><td>Test Test Test Test</td></tr>
<tr><td>
<div class="menu">
<ul>
<li><a href="#" onmouseover="displayList('smenu1')" onmouseout="hideList('smenu1')">Home</a>
<ul id="smenu1" onmouseover="displayList('smenu1')" onmouseout="hideList('smenu1')">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#" onmouseover="displayList('smenu2')" onmouseout="hideList('smenu2')">Something</a>
<ul id="smenu2" onmouseover="displayList('smenu2')" onmouseout="hideList('smenu2')">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</div>
</td></tr>
<tr><td>Test Test Test Test</td></tr>
</table>
<div class="content">
<p><br /><br />Test Test Test Test</p>
</div>
</body>
</html>
-
Hi,
Allerdings wird damit die normale Positionierung, die ich eigentlich mit der Tabelle erreichen wollte aufgehoben.
Dein Fehler ist, dass Du Tabellen dazu missbrauchst, Elemente zu positionieren. Sie dienen der Strukturierung tabellarischer Daten, welche bei Dir offenbar nicht vorliegen. Eliminiere also zunächst die Tabelle.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Dein Fehler ist, dass Du Tabellen dazu missbrauchst, Elemente zu positionieren. Sie dienen der Strukturierung tabellarischer Daten, welche bei Dir offenbar nicht vorliegen. Eliminiere
also zunächst die Tabelle.Hallo,
danke für den Hinweis die Tabelle zu entfernen. Hab nach ein bisschen suchen die Information gefunden, dass man Tabellen nicht mehr für das Layout benutzen soll. Hab deshalb das Layout jetzt mit Div-Elementen nachgebaut und jetzt verschiebt sich nichts nicht mehr.
-