Onbekend |
|
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body
{
padding:0;
margin:0;
background-color: #8d8f8e;
}
#container
{
width:800px;
height:100%;
min-height:100%;
background-color:#ffffff;
}
div
{
margin:0 auto;
}
#header
{
background-image:url(img/header1.jpg);
height:111px;
width:100%;
}
#menu
{
height:37px;
width:100%;
background-image:url(img/menu.jpg);
}
#content
{
width:100%;
overflow: hidden;
}
#left
{
width:290px;
float:left;
background: repeat-x url(img/left.jpg);
}
#middel
{
width:312px;
float:left;
background: repeat-x url(img/middel.jpg);
}
#right
{
width:198px;
float:left;
background: repeat-x url(img/right.jpg);
}
#footer
{
background: repeat-x url(img/bottom1.jpg);
height:131px;
width:800px;
left:0;
bottom:-8px;
}
-->
</style></head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam non orci. Aliquam urna dui, bibendum sit amet, suscipit sed, ultricies blandit, enim. Morbi vel nunc sagittis nibh commodo feugiat. Nunc ornare, purus quis suscipit sodales, purus purus consequat neque, eu congue ligula libero in nisi. Donec tristique ultricies nisl. Aenean ante ipsum, dignissim sit amet, aliquam nec, fringilla id, pede. Ut volutpat, erat vel consectetuer dictum, risus lacus bibendum neque, eu imperdiet nisi diam at diam. Vivamus placerat augue vitae neque. Morbi commodo. Integer sed est. Nam at nibh sed dui congue pellentesque. Curabitur ullamcorper auctor purus. Nulla nunc est, egestas vitae, iaculis vitae, mattis vel, lacus.</div>
<div id="middel">Vivamus gravida adipiscing metus. Pellentesque sed lectus eget dolor tempor congue. Phasellus commodo aliquet sem. Suspendisse sed mi. Nulla tellus. In congue dolor nec lorem. Vestibulum nulla enim, eleifend vel, facilisis et, luctus sit amet, mi. Mauris a felis. Ut sed mauris. Aenean sollicitudin tristique lacus.</div>
<div id="right">Duis vel ante eu justo fermentum commodo. Maecenas posuere orci. Maecenas a odio eget magna egestas vestibulum. Mauris suscipit, nibh vel interdum volutpat, mi lacus dapibus lorem, quis euismod turpis diam non diam. Suspendisse ut lorem vel nisi eleifend ornare. Nam cursus, velit quis eleifend ultrices, nulla tortor aliquam enim, ut scelerisque diam arcu at mi. Aliquam erat volutpat. Donec eleifend ipsum ac turpis. Etiam vitae augue. Nunc tincidunt pede. Vestibulum bibendum ornare tortor. Nunc vitae ligula non nulla dignissim blandit. Phasellus iaculis, pede vitae eleifend rhoncus, diam diam euismod metus, at convallis nunc neque quis dui.</div>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">De footer dan</div>
</body>
</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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> html,body { padding:0; margin:0; background-color: #8d8f8e; } #container { width:800px; height:100%; min-height:100%; background-color:#ffffff; } div { margin:0 auto; } #header { background-image:url(img/header1.jpg); height:111px; width:100%; } #menu { height:37px; width:100%; background-image:url(img/menu.jpg); } #content { width:100%; overflow: hidden; } #left { width:290px; float:left; background: repeat-x url(img/left.jpg); } #middel { width:312px; float:left; background: repeat-x url(img/middel.jpg); } #right { width:198px; float:left; background: repeat-x url(img/right.jpg); } #footer { background: repeat-x url(img/bottom1.jpg); height:131px; width:800px; left:0; bottom:-8px; } --> </style></head> <body> <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="content"> <div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam non orci. Aliquam urna dui, bibendum sit amet, suscipit sed, ultricies blandit, enim. Morbi vel nunc sagittis nibh commodo feugiat. Nunc ornare, purus quis suscipit sodales, purus purus consequat neque, eu congue ligula libero in nisi. Donec tristique ultricies nisl. Aenean ante ipsum, dignissim sit amet, aliquam nec, fringilla id, pede. Ut volutpat, erat vel consectetuer dictum, risus lacus bibendum neque, eu imperdiet nisi diam at diam. Vivamus placerat augue vitae neque. Morbi commodo. Integer sed est. Nam at nibh sed dui congue pellentesque. Curabitur ullamcorper auctor purus. Nulla nunc est, egestas vitae, iaculis vitae, mattis vel, lacus.</div> <div id="middel">Vivamus gravida adipiscing metus. Pellentesque sed lectus eget dolor tempor congue. Phasellus commodo aliquet sem. Suspendisse sed mi. Nulla tellus. In congue dolor nec lorem. Vestibulum nulla enim, eleifend vel, facilisis et, luctus sit amet, mi. Mauris a felis. Ut sed mauris. Aenean sollicitudin tristique lacus.</div> <div id="right">Duis vel ante eu justo fermentum commodo. Maecenas posuere orci. Maecenas a odio eget magna egestas vestibulum. Mauris suscipit, nibh vel interdum volutpat, mi lacus dapibus lorem, quis euismod turpis diam non diam. Suspendisse ut lorem vel nisi eleifend ornare. Nam cursus, velit quis eleifend ultrices, nulla tortor aliquam enim, ut scelerisque diam arcu at mi. Aliquam erat volutpat. Donec eleifend ipsum ac turpis. Etiam vitae augue. Nunc tincidunt pede. Vestibulum bibendum ornare tortor. Nunc vitae ligula non nulla dignissim blandit. Phasellus iaculis, pede vitae eleifend rhoncus, diam diam euismod metus, at convallis nunc neque quis dui.</div> </div> <div id="clearfooter"></div> </div> <div id="footer">De footer dan</div> </body> </html>
Ik vind dat je onnodig veel CSS-code al hebt.
Maar footer komt er zo bij mij onder. In IE en FF. |