Ik heb met html5 en css3 een website gemaakt, alleen krijg ik de footer onder aan de pagina niet pagina breed. Hoe krijg ik die pagina breed?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Bouwstad 2011</title>
<link rel="stylesheet" href="css/stylesheet.css" />
<!--[if lt IE9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header>
<h1>Bouwstad 2011</h1>
<p>mas Joris van der Hoeven</p>
</header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="studie.html">studie</a></li>
<li><a href="">foto's</a></li>
<li><a href="">contact</a></li>
<li><a href="">mijzelf</a></li>
</ul>
</nav>
<div id="content">
<article>
<h1>Artikel</h1>
<p>Lorem ipsum dolor sit amet, link, visited link, hovered link consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
</article>
<article>
<h1>Artikel</h1>
<p>Lorem ipsum dolor sit amet, link, visited link, hovered link consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
</article>
<article>
<h1>Artikel</h1>
<p><a href="nergens">Lorem ipsum dolor sit amet</a>, link, visited link, hovered link consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
</article>
</div>
<aside>
<article>
<h1>Jun 14, 2011</h1>
<p>Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.
Read more...
</p>
</article>
<article>
<h1>Aug 24, 2011</h1>
<p>Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.
Read more...
</p>
</article>
</aside>
</div>
<div id="footer">
<div class="wrap">
<div id="copyright">
<p>© 2011/2012 - Joris van der Hoeven</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Code:
article, aside, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
@font-face {
font-family: "Ballpark-Weiner";
src: url(../fonts/BALLW___.TTF) format("truetype");
}
body {
background: rgb(173,233,244) url('images/bg-header.jpg') repeat-x;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
article h1 {
font-size: 0.94em;
margin: 0;
}
article p {
font-size: 0.75em;
}
article a:link, article a:visited {
color: #BF2303;
text-decoration: none;
}
article a:hover, article a:active {
color: #BF2303;
text-decoration: underline;
font-style: italic;
}
div#container {
width: 850px;
margin: 175px auto 0 auto;
}
header {
height: 75px;
}
header h1 {
font-family: Ballpark-Weiner;
font-size: 1.75em;
line-height: normal;
margin: 0;
padding-left: 9px;
}
header p {
font-family: Ballpark-Weiner;
font-size: 1.2em;
margin-top: -0px;
padding-left: 10px;
}
nav {
background-color: rgba(255,255,255,0.6);
border-radius: 1em;
height: 40px;
width: 850px;
text-transform: lowercase;
float: right;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
}
nav li a {
color: #BF2303;
text-decoration: none;
float: left; padding: 3px 5px 6px; margin: -10px 20px 0 0;
}
nav li a, nav li a:visited {
color: #4FBF03;
font-style: italic;
text-decoration: none;
}
nav li a:hover, nav li a:active, nav li a[href="#"] {
color: #BF2303;
text-decoration: underline;
font-style: italic;
}
div#content {
width: 75%;
float: left;
}
div#content article {
background: rgba(255,255,255,0.5);
border-radius: 1em;
padding: 5px 10px 10px;
margin-top: 20px;
margin-right: 5px;
}
aside {
width: 25%;
float: left;
}
aside article {
background: rgba(255,255,255,0.5);
border-radius: 1em;
padding: 10px;
margin-top: 20px;
margin-left: 5px;
}
#footer {
margin: 300px 0 0 0;
padding: 10px 0 5px 0;
background: #4FBF03 url('images/bg-footer.jpg') repeat-x;
height: 200px;
width: inherit;
outline: lime solid 0px;
}
.wrap {
margin: 120px auto 0;
width: 850px;
outline: aqua solid 0px;
}
#copyright {
float: left;
margin: 10px 0 0;
color: #FFF;
font-size: .8em;
outline: fuchsia solid 0px;
}
#copyright p {
margin: 0 0 5px;
}
#copyright a {
color: #60183B;
}
.clear {
clear: both;
}
er moest een margin ingesteld worden zodat de footer naar links en beneden wordt verschoven. Dit is de uiteindelijke code.
