HTML:
<html>
<head>
<title>Joren Wouters</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<p>Joren Wouters</p>
</div>
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a></li>
<li><a href="#">Het idee</a></li>
<li><a href="#">Het plan</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="blankline">
</div>
<div id="left">
<div class="navmenu2">
<ul>
<li><a href="#">Over mij</a></li>
<li><a href="#">Het idee</a></li>
<li><a href="#">Het plan</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="right">
<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>
</body>
</html>
#container {
width: 99%;
height: 600px;
}
#header {
width: 99%;
height: 100px;
background: #fff;
border: 1px solid #000;
}
#header p {
font-family: Arial;
font-size: 35;
text-align: center;
}
.navmenu ul {
list-style: none;
position: absolute; top: 100px; left: 100px;
}
.navmenu li {
width: 200px;
height: 30px;
float: left;
text-align: center;
padding: 5px;
}
.navmenu ul li a {
background: #0000FF;
font-family: Arial;
border: 1px solid #000;
border-bottom: none;
border-radius: 6px;
display: block;
padding: 20px;
text-decoration: none;
color: #FF9900;
box-shadow: 10px 10px 7px #CCC;
}
.navmenu a:hover {
background: #FF9900;
color: #0000FF;
}
#blankline {
position: absolute; top: 180px; left: 0px;
height: 30px;
width: 99%;
border: 1px solid #000;
}
#left {
position: absolute; top: 211px; left: 0px;
height: 425px;
width: 12%;
border: 1px solid #000;
}
.navmenu2 ul {
list-style: none;
position: absolute; top: 10px; left: -40px;
}
.navmenu2 li {
width: 100px;
height: 30px;
text-align: center;
padding: 25px;
}
.navmenu2 ul li a {
background: #0000FF;
font-family: Arial;
border: 1px solid #000;
border-radius: 6px;
display: block;
padding: 15px;
text-decoration: none;
color: #FF9900;
box-shadow: 10px 10px 7px #CCC;
}
.navmenu2 a:hover {
background: #FF9900;
color: #0000FF;
}
#right {
position: absolute; top: 211px; left: 13%;
height: 425px;
width: 86%;
border: 1px solid #000;
}
.box {
position: absolute; top: 10px; left: 14%;
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: 220px; left: 14%;
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: 10px; left: 51%;
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: 220px; left: 51%;
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;
}Dit is een HTML en een CSS bestand.
Ik gebruik bij de #container, bij de #header en bij #blankline in het css bestand als width=99%.
Maar zodra ik dit allemaal verander naar width=100%, dan komt er opeens aan de zijkant een balk om te scrollen en dan komt er aan de onderkant een balk om van links naar rechts te gaan, weet iemand hoe je ervoor zorgt dat die balken er niet komen en dat je wel width=100% kan gebruiken.
Want als ik width=100% niet gebruik dan komen er aan de zijkant witte balken, en dat is niet fijn als ik met kleuren ga werken.
Laatst bewerkt:
