HTML:
<html>
<head>
<title>Joren Wouters</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="language" content="nl-NL">
<meta name="description" content="Joren Wouters">
<meta name="keywords" content="Joren, Wouters, joren, wouters, sint jans lyceum, Sint Jans Lyceum, SJL, sjl">
<meta name="title" content="Joren Wouters">
</head>
<body>
<div id="container">
<div id="header">
<p>Joren Wouters</p>
</div>
<div id="leftnav">
</div>
<div id="logo">
<p><b>{Logo}</b></p>
</div>
<div id="rightnav">
<div class="navmenu">
<ul>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat doe ik?</a></li>
</li></ul>
<li><a href="#">Het plan</a>
<ul>
<li><a href="#">Mijn producten</a>
<li><a href="#">Mijn paketten</a>
</li></ul>
<li><a href="#">Het idee</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="blankline">
</div>
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
</body>
</html>
Code:
#container {
width: 100%;
height: 600px;
}
#header {
position: absolute; top: 0px; left: 0px;
position: fixed;
height: 100px;
width: 100%;
background: #0099FF;
}
#header p {
font-family: Arial;
font-size: 35;
text-align: center;
}
#leftnav {
position: absolute; top: 101px; left: 0px;
height: 50px;
width: 250px;
background: #469;
}
#logo {
position: absolute; top: 101px; left: 251px;
height: 50px;
width: 375px;
background: #0099FF;
}
#logo p {
position: absolute; top: -7px; left: 145px;
font-family: Verdana;
font-size: 20;
}
#rightnav {
position: absolute; top: 101px; left: 627px;
position: fixed;
height: 50px;
width: 739px;
background: #469;
}
.navmenu {
position: absolute; top: 10px; left: 75px;
height: 30px;
width: 700px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 2;
}
.navmenu ul {
margin: 0;
padding: 0;
line-height: 30px;
list-style: none;
}
.navmenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #469;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #000000;
border-radius: 6px;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
.navmenu ul li:hover ul {
visibility: visible;
filter: alpha(opacity:70);
opacity: 0.9;
}
.navmenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
.navmenu a:hover {
color: #000;
}
#blankline {
position: absolute; top: 152px; left: 0px;
position: fixed;
height: 35px;
width: 100%;
background: #0099FF;
}
#left {
position: absolute; top: 188px; left: 0px;
height: 435px;
width: 100px;
background: #0099FF;
}
#middle {
position: absolute; top: 188px; left: 101px;
height: 435px;
width: 1163px;
}
#right {
position: absolute; top: 188px; right: 0px;
position: fixed;
height: 435px;
width: 102px;
background: #0099FF;
}Maar er is een probleempje, als ik met mijn muis over het navigation menu ga, dan komt mijn #blankline daar over heen.
Dus mijn vraag is: Hoe zorg je ervoor dat mijn navigation menu over mijn #blankline komt?
Laatst bewerkt door een moderator:
