Tartos: Layoutproblem mit ausklappbaren JS-Menü

Beitrag lesen

SELF-Forum

Layoutproblem mit ausklappbaren JS-Menü

Tartos
– Informationen zu den Bewertungsregeln

Hallo,

ich hab ein kleines Problem mit dem Layout einer Webseite. Das Layout ist zwar schon fast fertig, allerdings hat es noch einen kleinen Schönheitsfehler, den ich nicht beseitigt bekomme. Der Fehler tritt bei einem ausklappbaren JS-Menü insofern auf, dass es sich nicht auf die volle Seitenbreite ausdehnt. Ich hab versucht, dass mit den CSS position Attribut zu lösen, was in Verbindung mit den anderen Elementen nicht geklappt hat, da sich diese dann immer verschoben haben.

Könnte sich das mal jemand angucken und mir sagen, wie ich das lösen könnte?

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
	<title>Insert title here</title>  
	<style type="text/css"><!--  
		body {  
			margin: 20px;  
		}  
		  
		div.site {  
			width: 1024px;  
			border: 1px solid;  
			background: aqua;  
			margin-left: auto;  
			margin-right: auto;  
		}  
		  
		div.leftMenu {  
			border: 1px solid;  
			width: 100px;  
			height: 300px;  
			position: absolute;  
		}  
		  
		div.top {  
			border: 1px solid;  
			height: 100px;  
			margin-bottom: 20px;  
		}  
		  
		div.content {  
			border: 1px solid;  
			background-color: green;  
			margin-left: 120px;  
		}  
			  
		div.foot {  
			border: 1px solid;  
			background-color: gray;  
			margin-top: 30px;  
		}  
		  
		div.middle {  
			position: relative;  
			width: 100%;  
		}  
		  
		div.topMenu {  
			z-index: 3;  
			position: absolute;  
			background-color: red;  
		}  
		  
		div.topMenu li {  
			width: 140px;  
			float: left;  
		}  
		  
		div.topMenu a:hover {  
			background-color: gray;  
		}  
		  
		div.topMenu a {  
			border: 1px solid #888;  
			background-color: graytext;  
			text-decoration: none;  
			text-align: center;  
			font-weight: bold;  
			cursor: default;  
			margin: 0px 2px;  
			display: block;  
			height: 20px;  
			color: #000;  
		}  
		  
		ul#smenu1, ul#smenu2 {  
			display: none;  
			width: 140px;  
			float: left;  
		}  
		  
		ul#smenu1 a, ul#smenu2 a {  
			padding-top: 2px;  
			border-top: 0px;  
		}  
		  
		ul, li {  
			list-style-type: none;  
			padding: 0px;  
			margin: 0px;  
		}  
		-->  
	</style>  
	<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>  
</head>  
<body>  
	<div class="site">  
		<div class="top">  
			<h1>MySite</h1>  
			<div class="topMenu">	  
			<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>  
						<li><a href="#">Submenu 4</a></li>  
						<li><a href="#">Submenu 5</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>  
		</div>  
		<div class="middle">  
			<div class="leftMenu">  
				<ul class="navigation">  
					<li><a href="#">link</a></li>  
					<li><a href="#">link</a></li>  
					<li><a href="#">link</a></li>  
					<li><a href="#">link</a></li>  
				</ul>  
			</div>  
			  
			<div class="content">  
				<h2>Text Text Text Text Text</h2>  
				Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
				<br /><br /><br /><br /><br /><br /><br /><br />  
				Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
				<br /><br /><br /><br /><br /><br /><br /><br />  
				Text Text Text Text Text Text Text Text Text Text Text Text Text Text  
			</div>  
		</div>  
		  
		<div class="foot">Text Text Text Text Text Text</div>  
	</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln