HTML:
<html>
<head>
<title>Joren Wouters - De maker voor uw website!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<img src="image3.jpg" width="100%" height="450px">
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<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 product</a></li>
<li><a href="#">Mijn paketten</a></li>
</li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="body">
</div>
<div id="footer">
<h1> Joren Wouters - De maker voor uw website! <h1>
<h2> <a href="Home.html">Home</a> | <a href="Overmij.html">Over mij</a> | <a href="hetplan.html">Het plan</a> | <a href="contact.html">Contact</a></h2>
</div>
</div>
</body>
</html>
#container {
width: 1300px;
height: 1500px;
}
#header {
position: absolute; top: 0px; left: 0px;
height: 450px;
width: 1300px;
}
#navmenu {
position: absolute; top: 450px; left: 0px;
height: 75px;
width: 100%;
}
.navmenu {
position: absolute; top: 20px; left: 395px;
height: 40px;
width: 1300px;
}
.navmenu {
z-index: 100;
margin: 0;
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #000;
border: 1px solid #000000;
background: #1170CC;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.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: 525px; left: 0px;
height: 875px;
width: 1300px;
border: 1px solid #000;
}
#footer {
position: absolute; top: 1400px; left: 0px;
height: 100px;
width: 1300px;
border: 1px solid #000;
background: #03478A;
}
h1 {
position: absolute; top: 25px; left: 100px;
font-family: Arial;
color: #fff;
font-size: 15;
text-decoration: none;
}
h2 {
position: absolute; top: 25px; left: 800px;
font-family: Arial;
color: fff;
font-size: 15;
text-decoration: bold;
}
#footer a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}Dit is een HTML en een CSS bestand van mijn zelfgemaakte site.
Er is alleen één probleem, de site loopt maar tot 1300px in de breedte, wat ik ook heb ingesteld, alleen aan de onderkant heb je nog zo'n balk van zo'n 2cm die je nog naar rechts kan schuiven. Als je die balk naar rechts schuift heb je gewoon alleen wit en daar is helemaal geen lay-out van de website weer.
Mijn vraag is:
Hoe haal ik die balk weg?
Laatst bewerkt door een moderator:
