<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Joren Wouters</title>
</head>
<body>
<div id="container">
<div id="header">
<p>Joren Wouters</p>
</div>
<div id="navmenu">
<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="body">
<div class="image">
<img src="Naamloos.png">
</div>
<div class="box">
<div class="top">
<p><b>Welkom</b></p>
</div>
<div class="midden">
</div>
</div>
<div class="box2">
<div class="top2">
<p><b>Het plan</b></p>
</div>
<div class="midden2">
</div>
</div>
<div class="box3">
<div class="top3">
<p><b>Wie ben ik?</b></p>
</div>
<div class="midden3">
</div>
</div>
<div class="box4">
<div class="top4">
<p><b>Wat doe ik?</b></p>
</div>
<div class="midden4">
</div>
</div>
</div>
<div id="footer">
<p class="footer">Designed by <i>Joren Wouters</i></p>
</div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
height: 600px;
}
#header {
position: absolute; top: 0px; left: 0px;
position: fixed;
height: 100px;
width: 1355px;
}
#header p {
text-align: center;
line-height: 50px;
font-family: Arial;
font-size: 35;
text-align: center;
}
#navmenu {
position: absolute; top: 100px; left: 0px;
height: 50px;
width: 100%;
background: #0066CC;
}
.navmenu {
position: absolute; top: 10px; left: 350px;
height: 30px;
width: 700px;
background: #0066CC;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.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: #0066CC;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #fff;
border: 1px solid #000;
}
.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;
}
#body {
position: absolute; top: 200px; left: 0px;
height: 400px;
width: 100%;
}
.image {
position: absolute; top: 5px; left: 0px;
height: 423px;
width: 600px;
border: 1px solid #000;
box-shadow: 10px 10px 7px #CCC;
}
.box {
position: absolute; top: 0px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden {
height: 140px;
width: 225px;
}
.box2 {
position: absolute; top: 230px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top2 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top2 p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden2 {
height: 140px;
width: 225px;
}
.box3 {
position: absolute; top: 0px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top3 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top3 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden3 {
height: 140px;
width: 225px;
}
.box4 {
position: absolute; top: 230px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top4 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top4 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden4 {
height: 140px;
width: 225px;
}
#footer {
position: absolute; top: 650px; left: 0px;
height: 100px;
width: 100%;
background: #0066CC;
}
.footer {
line-height: 80px;
text-align: center;
font-family: Arial;
font-size: 16;
color: #fff;
}
Dit is een HTML en een CSS bestand.
Het probleem is dat als ik naar beneden scroll, dan gaat automatisch de tekst 'Joren Wouters' mee naar beneden.
Weet iemand hoe ik dit heb gedaan en weet iemand hoe ik dit moet herstellen?
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Joren Wouters</title>
</head>
<body>
<div id="container">
<div id="header">
<p>Joren Wouters</p>
</div>
<div id="navmenu">
<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="body">
<div class="image">
<img src="Naamloos.png">
</div>
<div class="box">
<div class="top">
<p><b>Welkom</b></p>
</div>
<div class="midden">
</div>
</div>
<div class="box2">
<div class="top2">
<p><b>Het plan</b></p>
</div>
<div class="midden2">
</div>
</div>
<div class="box3">
<div class="top3">
<p><b>Wie ben ik?</b></p>
</div>
<div class="midden3">
</div>
</div>
<div class="box4">
<div class="top4">
<p><b>Wat doe ik?</b></p>
</div>
<div class="midden4">
</div>
</div>
</div>
<div id="footer">
<p class="footer">Designed by <i>Joren Wouters</i></p>
</div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
height: 600px;
}
#header {
position: absolute; top: 0px; left: 0px;
position: fixed;
height: 100px;
width: 1355px;
}
#header p {
text-align: center;
line-height: 50px;
font-family: Arial;
font-size: 35;
text-align: center;
}
#navmenu {
position: absolute; top: 100px; left: 0px;
height: 50px;
width: 100%;
background: #0066CC;
}
.navmenu {
position: absolute; top: 10px; left: 350px;
height: 30px;
width: 700px;
background: #0066CC;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.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: #0066CC;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #fff;
border: 1px solid #000;
}
.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;
}
#body {
position: absolute; top: 200px; left: 0px;
height: 400px;
width: 100%;
}
.image {
position: absolute; top: 5px; left: 0px;
height: 423px;
width: 600px;
border: 1px solid #000;
box-shadow: 10px 10px 7px #CCC;
}
.box {
position: absolute; top: 0px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden {
height: 140px;
width: 225px;
}
.box2 {
position: absolute; top: 230px; left: 700px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top2 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top2 p {
position: absolute; top: 2px; left: 82px;
font-family: Arial;
font-size: 15;
}
.midden2 {
height: 140px;
width: 225px;
}
.box3 {
position: absolute; top: 0px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top3 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top3 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden3 {
height: 140px;
width: 225px;
}
.box4 {
position: absolute; top: 230px; left: 1050px;
height: 190px;
width: 225px;
border: 1px solid #000;
border-radius: 10px;
box-shadow: 10px 10px 7px #CCC;
}
.top4 {
height: 50px;
width: 225px;
border-top: 1px solid #000;
border-radius: 10px;
border-bottom: 1px solid #000;
background: #D0D0D0;
}
.top4 p {
position: absolute; top: 2px; left: 72px;
font-family: Arial;
font-size: 15;
}
.midden4 {
height: 140px;
width: 225px;
}
#footer {
position: absolute; top: 650px; left: 0px;
height: 100px;
width: 100%;
background: #0066CC;
}
.footer {
line-height: 80px;
text-align: center;
font-family: Arial;
font-size: 16;
color: #fff;
}
Dit is een HTML en een CSS bestand.
Het probleem is dat als ik naar beneden scroll, dan gaat automatisch de tekst 'Joren Wouters' mee naar beneden.
Weet iemand hoe ik dit heb gedaan en weet iemand hoe ik dit moet herstellen?
