Hi there,
I want my footer to contain the whole area below the content. So the whole area must be like filled in with the grey image. Can someone help me? I don't know what i'm doing wrong...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Logo & Drukwerk</title>
</head>
<body>
<div class="header">
<ul>
<li><a href="home.htm" class="active">HOME</a></li>
<li><a href="reedsgemaakt.htm">REEDS GEMAAKT</a></li>
<li><a href="proces.htm">PROCES</a></li>
<li><a href="contact.htm">CONTACT</a></li>
</ul>
<img src="afbeeldingen/LOGO.png" alt="Logo" class="logo">
</div>
<div class="nieuws">
<div class="inhoudL"><h2>VISITEKAARTJES</h2>
<p>Visitekaartjes zijn kaartjes met je persoonlijke gegevens op. Je naam, woonplaats, en/of bedrijf staan er bijvoorbeeld op. Je eigen kaartje geeft ook een persoonlijke indruk. Je kan volledig zelf het uitzicht van je kaartje bepalen.</p></div>
<div class="inhoudR"><h2>VISITEKAARTJES</h2>
<p>Visitekaartjes zijn kaartjes met je persoonlijke gegevens op. Je naam, woonplaats, en/of bedrijf staan er bijvoorbeeld op. Je eigen kaartje geeft ook een persoonlijke indruk. Je kan volledig zelf het uitzicht van je kaartje bepalen.</p></div>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum tortor at nulla ultrices a cursus velit molestie. Aenean lobortis sollicitudin arcu, at eleifend diam pellentesque nec. Nam vitae odio a tortor gravida imperdiet id vitae tellus. Fusce purus nunc, consequat vitae aliquam non, placerat id lacus. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer rutrum pulvinar malesuada. Mauris purus libero, viverra sit amet placerat vitae, venenatis sed nisi. Duis congue, urna vel molestie mollis, ligula velit porttitor risus, eu bibendum tortor est ut leo. Etiam ullamcorper laoreet quam, quis tristique neque tincidunt a.
</p>
</div>
</body>
</html>
Code:
html, body {
margin: 0;
padding: 0;
}
body {
margin:0 auto;
padding: 0;
font-family: "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
background: url('afbeeldingen/headerBG.png') repeat-x left top;
width: 900px;
}
h1, h2, h3 {
margin: 0;
font-family: "Myriad Pro", "Trebuchet MS", "Times New Roman", Times, serif;
font-weight: normal;
color: #858585;
text-transform: capitalize;
}
h1 { font-size: 30px;
}
h2 { font-size: 20px; }
h3 { }
a {
color:#000000;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
p {
margin-top: 0;
text-align: justify;
font-family: "Myriad Pro","Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
color: #858585;
}
.header {
width: 900px;
height: 254px;
background: url('afbeeldingen/HEADER.png') no-repeat left top;
margin: 0 auto;
z-index:2;
}
ul {
margin: 0;
float: right;
padding: 40px 0 0 0px;
list-style: none;
line-height: normal;
list-style-type: none;
z-index:1;
}
li {
display: block;
float: left;
list-style-type: none;
text-transform: capitalize;
z-index:1;
}
li a {
display: block;
float: left;
margin-right: 0px;
padding: 15px 10px 15px 10px;
text-decoration: none;
font: 17px "Myriad Pro", "Trebuchet MS", "Times New Roman", Times, serif;
color: #FFFFFF;
list-style-type: none;
text-transform: capitalize;
z-index:1;
}
li a:hover {
text-decoration: none;
list-style-type: none;
text-transform: capitalize;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 0px solid #000;
padding: 15px 10px 10px 10px;
margin: 0px 0px 0px 00px;
background-color: #e7a800;
font-size: 17px;
color: white;
z-index:1;
}
li .active {
color: #FFFFFF;
list-style-type: none;
text-transform: capitalize;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 0px solid #000;
padding: 15px 10px 10px 10px;
margin: 0px 0px 0px 00px;
background-color: #e7a800;
font-size: 17px;
z-index:1;
}
.logo {
float: right;
margin: 84px -360px 0px 0px;
z-index: 0;
}
.nieuws {
float: left;
margin: 0 auto;
width: 650px;
padding: 50px 0px 0px 0px;
}
.inhoudL {
float: left;
margin: 0px 0px 0px 0px;
width: 310px;
padding: 0px 0px 0px 0px;
}
.inhoudR {
float: left;
margin: 0px 0px 0px 330px;
width: 310px;
padding: 0px 0px 0px 0px;
position: absolute;
}
.footer {
background-color: #858585;
background-image: url('afbeeldingen/FOOTER.png');
background-position:left top;
background-repeat: repeat;
float: left;
clear: both;
margin: 60px 0px 0px 0px;
}
An example:
http://www.kfsi.be/L&D/home.htm
Thanks!
