PDA

Click to See Complete Forum and Search --> : add menu in div.

CGG
01-18-2006, 02:37 AM
How can I put my menu in my div??

also will I have trouble If i put other div's in de main div???? for example an Iframe

mvg,



<!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=iso-8859-1">
<title>De Tuinengel</title>



<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<style>
body {

margin-top: 0px;
margin-bottom: 0px;
margin-left: 10%;
margin-right: 10%;
color: black;
background: #E4E4E4;
}

#main {
width: 740px;
height: 100%;
border-left: solid 1px #990000;
border-right: solid 1px #990000;
margin: 0 10px;
padding: 10px;
background: white;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 2em;
left: 2em;
width: 10em;
z-index:1;
}

#menu dt {
cursor: pointer;
background: #990000;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: left;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #990000;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: left;
font-size: 100%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: White;
text-decoration: none;
display: block;
}

#menu li a:hover {
font-weight: bold;
}

#menu dt a:hover {
text-decoration: underline;
}




</style>

</head>

<body>
<div id="main">

<!-- BEGIN Menu -->
<dl id="menu">
<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show();"><a href="homepage.html" target="content">HOMEPAGINA</a></dt>
<dt onmouseover="javascript:show('smenu2');" onmouseout="javascript:show();"><a href="historiek.html" target="content">HISTORIEK</a></dt>
<dt onmouseover="javascript:show('smenu3');" onmouseout="javascript:show();"><a href="#" target="content">WORKSHOPS</a></dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show();">
<ul>
<li><a href="#" target="content">Inhoud</a></li>
<li><a href="#" target="content">Overzicht</a></li>
<li><a href="#" target="content">Nieuw</a></li>
<li><a href="recept.html" target="content">Recepten</a></li>
</ul>
</dd>

<dt onmouseover="javascript:show('smenu4');" onmouseout="javascript:show();"><a href="fotos.html" target="content">FOTOS</a></dt>
<dt onmouseover="javascript:show('smenu5');" onmouseout="javascript:show();"><a href="#" target="content">INSCHRIJVINGEN</a></dt>
</dl>
<!-- END Menu -->

</div>
</body>
</html>
</html>