Tartos: Ausklappbares Menü verschiebt andere Elemente

Beitrag lesen

SELF-Forum

Ausklappbares Menü verschiebt andere Elemente

Tartos
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln