ik ben al een heel eind gekomen, vind ik zelf!
Ik heb een paar dingetjes voor je overgelaten, zodat je er zelf ook nog wat van kan leren :) (ja, ik ben ook beetje lui)
Voorbeeld
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean suscipit enim ac urna. Sed non lorem. Nunc in odio. Phasellus elit urna, volutpat at, accumsan eget, porttitor et, risus. Duis pulvinar. Ut quis arcu. Mauris odio dui, dapibus vel, sodales id, malesuada ut, enim. Ut commodo lectus sit amet eros. Integer pharetra. Mauris auctor. Morbi arcu dolor, varius vel, pharetra molestie, cursus sed, neque. Nulla facilisi. Sed quis augue. Nullam ut metus. Vivamus faucibus, nisi vitae scelerisque faucibus, sem tellus luctus massa, eu ultricies tellus nisi eu sapien.
Etiam in enim. Quisque dignissim felis sed massa. Donec non urna. Duis pulvinar. Etiam rutrum aliquet enim. Fusce at nisl vitae nulla convallis suscipit. Aliquam feugiat suscipit enim. Phasellus at nibh nec leo lacinia dignissim. Praesent id mauris. Aenean orci est, rutrum eu, molestie at, convallis id, leo. Nullam eu enim at mauris molestie convallis. Proin purus. Proin laoreet augue. Praesent quis elit eget lectus accumsan imperdiet. Mauris adipiscing neque in purus. Aenean auctor. Nam adipiscing. Etiam tristique luctus sapien. Suspendisse vitae nisl ac enim pharetra aliquet.
Phasellus varius, justo eget consequat fermentum, risus lacus venenatis pede, sit amet sollicitudin metus ante sed tellus. Etiam tempus, felis quis vulputate interdum, elit risus ullamcorper odio, et rhoncus nunc nulla in metus. In hac habitasse platea dictumst. Nullam consequat. Nulla odio ante, tincidunt vel, vulputate dapibus, tincidunt non, massa. Etiam scelerisque tincidunt ipsum. Pellentesque metus nunc, laoreet id, egestas quis, mollis id, orci. Nam eu orci ac sem cursus vulputate. Aenean sit amet velit. Nullam ultricies. Curabitur at lorem a libero varius tristique. Integer dignissim blandit nunc.
Curabitur tristique, felis non elementum sagittis, lacus risus pulvinar massa, at porttitor nisi justo a metus. In mollis, felis nec ultrices eleifend, mi ante varius nisl, nec molestie nibh magna vel nibh. Sed tristique lorem eu lectus. Fusce condimentum. Ut sem dolor, congue sit amet, lacinia sit amet, volutpat consectetuer, nibh. In gravida, nibh vitae venenatis sagittis, tellus mi suscipit augue, et posuere ante nibh ac ligula. Ut nec augue. In dictum, nunc ut lacinia elementum, lacus est tincidunt ipsum, sed feugiat magna risus quis tellus. Vestibulum eleifend felis. In ultricies, elit non viverra sodales, quam turpis dignissim arcu, sit amet bibendum nisi purus id tellus.
Pellentesque elit tortor, malesuada sed, commodo ac, iaculis vel, ligula. Ut tincidunt. Maecenas tempor. Maecenas sagittis. Donec in lectus in lectus bibendum vestibulum. Sed mauris. In sed ante. Duis eros. In a lacus at ipsum rutrum lacinia. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean suscipit enim ac urna. Sed non lorem. Nunc in odio. Phasellus elit urna, volutpat at, accumsan eget, porttitor et, risus. Duis pulvinar. Ut quis arcu. Mauris odio dui, dapibus vel, sodales id, malesuada ut, enim. Ut commodo lectus sit amet eros. Integer pharetra. Mauris auctor. Morbi arcu dolor, varius vel, pharetra molestie, cursus sed, neque. Nulla facilisi. Sed quis augue. Nullam ut metus. Vivamus faucibus, nisi vitae scelerisque faucibus, sem tellus luctus massa, eu ultricies tellus nisi eu sapien.
Etiam in enim. Quisque dignissim felis sed massa. Donec non urna. Duis pulvinar. Etiam rutrum aliquet enim. Fusce at nisl vitae nulla convallis suscipit. Aliquam feugiat suscipit enim. Phasellus at nibh nec leo lacinia dignissim. Praesent id mauris. Aenean orci est, rutrum eu, molestie at, convallis id, leo. Nullam eu enim at mauris molestie convallis. Proin purus. Proin laoreet augue. Praesent quis elit eget lectus accumsan imperdiet. Mauris adipiscing neque in purus. Aenean auctor. Nam adipiscing. Etiam tristique luctus sapien. Suspendisse vitae nisl ac enim pharetra aliquet.
Phasellus varius, justo eget consequat fermentum, risus lacus venenatis pede, sit amet sollicitudin metus ante sed tellus. Etiam tempus, felis quis vulputate interdum, elit risus ullamcorper odio, et rhoncus nunc nulla in metus. In hac habitasse platea dictumst. Nullam consequat. Nulla odio ante, tincidunt vel, vulputate dapibus, tincidunt non, massa. Etiam scelerisque tincidunt ipsum. Pellentesque metus nunc, laoreet id, egestas quis, mollis id, orci. Nam eu orci ac sem cursus vulputate. Aenean sit amet velit. Nullam ultricies. Curabitur at lorem a libero varius tristique. Integer dignissim blandit nunc.
Curabitur tristique, felis non elementum sagittis, lacus risus pulvinar massa, at porttitor nisi justo a metus. In mollis, felis nec ultrices eleifend, mi ante varius nisl, nec molestie nibh magna vel nibh. Sed tristique lorem eu lectus. Fusce condimentum. Ut sem dolor, congue sit amet, lacinia sit amet, volutpat consectetuer, nibh. In gravida, nibh vitae venenatis sagittis, tellus mi suscipit augue, et posuere ante nibh ac ligula. Ut nec augue. In dictum, nunc ut lacinia elementum, lacus est tincidunt ipsum, sed feugiat magna risus quis tellus. Vestibulum eleifend felis. In ultricies, elit non viverra sodales, quam turpis dignissim arcu, sit amet bibendum nisi purus id tellus.
Pellentesque elit tortor, malesuada sed, commodo ac, iaculis vel, ligula. Ut tincidunt. Maecenas tempor. Maecenas sagittis. Donec in lectus in lectus bibendum vestibulum. Sed mauris. In sed ante. Duis eros. In a lacus at ipsum rutrum lacinia. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean suscipit enim ac urna. Sed non lorem. Nunc in odio. Phasellus elit urna, volutpat at, accumsan eget, porttitor et, risus. Duis pulvinar. Ut quis arcu. Mauris odio dui, dapibus vel, sodales id, malesuada ut, enim. Ut commodo lectus sit amet eros. Integer pharetra. Mauris auctor. Morbi arcu dolor, varius vel, pharetra molestie, cursus sed, neque. Nulla facilisi. Sed quis augue. Nullam ut metus. Vivamus faucibus, nisi vitae scelerisque faucibus, sem tellus luctus massa, eu ultricies tellus nisi eu sapien.
Etiam in enim. Quisque dignissim felis sed massa. Donec non urna. Duis pulvinar. Etiam rutrum aliquet enim. Fusce at nisl vitae nulla convallis suscipit. Aliquam feugiat suscipit enim. Phasellus at nibh nec leo lacinia dignissim. Praesent id mauris. Aenean orci est, rutrum eu, molestie at, convallis id, leo. Nullam eu enim at mauris molestie convallis. Proin purus. Proin laoreet augue. Praesent quis elit eget lectus accumsan imperdiet. Mauris adipiscing neque in purus. Aenean auctor. Nam adipiscing. Etiam tristique luctus sapien. Suspendisse vitae nisl ac enim pharetra aliquet.
Phasellus varius, justo eget consequat fermentum, risus lacus venenatis pede, sit amet sollicitudin metus ante sed tellus. Etiam tempus, felis quis vulputate interdum, elit risus ullamcorper odio, et rhoncus nunc nulla in metus. In hac habitasse platea dictumst. Nullam consequat. Nulla odio ante, tincidunt vel, vulputate dapibus, tincidunt non, massa. Etiam scelerisque tincidunt ipsum. Pellentesque metus nunc, laoreet id, egestas quis, mollis id, orci. Nam eu orci ac sem cursus vulputate. Aenean sit amet velit. Nullam ultricies. Curabitur at lorem a libero varius tristique. Integer dignissim blandit nunc.
Curabitur tristique, felis non elementum sagittis, lacus risus pulvinar massa, at porttitor nisi justo a metus. In mollis, felis nec ultrices eleifend, mi ante varius nisl, nec molestie nibh magna vel nibh. Sed tristique lorem eu lectus. Fusce condimentum. Ut sem dolor, congue sit amet, lacinia sit amet, volutpat consectetuer, nibh. In gravida, nibh vitae venenatis sagittis, tellus mi suscipit augue, et posuere ante nibh ac ligula. Ut nec augue. In dictum, nunc ut lacinia elementum, lacus est tincidunt ipsum, sed feugiat magna risus quis tellus. Vestibulum eleifend felis. In ultricies, elit non viverra sodales, quam turpis dignissim arcu, sit amet bibendum nisi purus id tellus.
Pellentesque elit tortor, malesuada sed, commodo ac, iaculis vel, ligula. Ut tincidunt. Maecenas tempor. Maecenas sagittis. Donec in lectus in lectus bibendum vestibulum. Sed mauris. In sed ante. Duis eros. In a lacus at ipsum rutrum lacinia. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean suscipit enim ac urna. Sed non lorem. Nunc in odio. Phasellus elit urna, volutpat at, accumsan eget, porttitor et, risus. Duis pulvinar. Ut quis arcu. Mauris odio dui, dapibus vel, sodales id, malesuada ut, enim. Ut commodo lectus sit amet eros. Integer pharetra. Mauris auctor. Morbi arcu dolor, varius vel, pharetra molestie, cursus sed, neque. Nulla facilisi. Sed quis augue. Nullam ut metus. Vivamus faucibus, nisi vitae scelerisque faucibus, sem tellus luctus massa, eu ultricies tellus nisi eu sapien.
Etiam in enim. Quisque dignissim felis sed massa. Donec non urna. Duis pulvinar. Etiam rutrum aliquet enim. Fusce at nisl vitae nulla convallis suscipit. Aliquam feugiat suscipit enim. Phasellus at nibh nec leo lacinia dignissim. Praesent id mauris. Aenean orci est, rutrum eu, molestie at, convallis id, leo. Nullam eu enim at mauris molestie convallis. Proin purus. Proin laoreet augue. Praesent quis elit eget lectus accumsan imperdiet. Mauris adipiscing neque in purus. Aenean auctor. Nam adipiscing. Etiam tristique luctus sapien. Suspendisse vitae nisl ac enim pharetra aliquet.
Phasellus varius, justo eget consequat fermentum, risus lacus venenatis pede, sit amet sollicitudin metus ante sed tellus. Etiam tempus, felis quis vulputate interdum, elit risus ullamcorper odio, et rhoncus nunc nulla in metus. In hac habitasse platea dictumst. Nullam consequat. Nulla odio ante, tincidunt vel, vulputate dapibus, tincidunt non, massa. Etiam scelerisque tincidunt ipsum. Pellentesque metus nunc, laoreet id, egestas quis, mollis id, orci. Nam eu orci ac sem cursus vulputate. Aenean sit amet velit. Nullam ultricies. Curabitur at lorem a libero varius tristique. Integer dignissim blandit nunc.
Curabitur tristique, felis non elementum sagittis, lacus risus pulvinar massa, at porttitor nisi justo a metus. In mollis, felis nec ultrices eleifend, mi ante varius nisl, nec molestie nibh magna vel nibh. Sed tristique lorem eu lectus. Fusce condimentum. Ut sem dolor, congue sit amet, lacinia sit amet, volutpat consectetuer, nibh. In gravida, nibh vitae venenatis sagittis, tellus mi suscipit augue, et posuere ante nibh ac ligula. Ut nec augue. In dictum, nunc ut lacinia elementum, lacus est tincidunt ipsum, sed feugiat magna risus quis tellus. Vestibulum eleifend felis. In ultricies, elit non viverra sodales, quam turpis dignissim arcu, sit amet bibendum nisi purus id tellus.
</div>
<div id="footer">Footer Here.</div>
</div>
</body>
</html>
en de CSS:
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
background:url(bg-top.jpg) repeat-x top;
}
HTML {
background:url(bg-btm.jpg) repeat-x bottom fixed;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
width: 1000px;
margin:0 auto 0 auto;
}
#header{
height:40px;
background-color:#CCCC00;
}
#nav {
background-color:#006633;
}
#nav UL{
padding-left:30px;
}
#footer {
width: 1000px;
background-color: #000;
color: #DDD;
text-align: center;
position:fixed;
height: 40px;
bottom:0px;
padding-top: 10px;
}
