<!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>blog layout</title>
<style type="text/css">
<!--
html,body {
margin: 0;
text-align: center;
font-family: verdana, arial;
font-size: 12px;
}
#full {
width: 700px;
border-left: 1px solid #000;
border-right: 1px solid #000;
text-align: center;
bottom: 0px;
margin-left: auto;
margin-right:auto;
}
#header {
height: 200px;
width: 100%;
border-bottom: 1px dashed #000;
background-image:url(bg.jpg);
background-position:left;
background-position:top;
}
#menu {
height: 100%;
width: 150px;
float: right;
text-align: left;
margin: 0;
}
ul.menu {
list-style-type: none;
margin: auto;
}
li.menu {
background: #00CC99;
margin: 0;
border: 1px dashed #000;
display: block;
border-collapse:collapse;
}
li a {
color:#000000;
padding: 2px;
}
li.menu:hover {
background-color:#99FF00;
display: block;
}
#leftcontent{
float: left;
width: 400px;
bottom: 0;
border: 1px dashed #000;
margin: 2px;
text-align:left;
}
#rightcontent{
float:left;
width: 284px;
bottom: 0;
border: 1px dashed #000;
margin: 2px;
text-align:left;
}
-->
</style>
</head>
<body>
<div id="full">
<div id="header">
<div id="menu">
<ul class="menu">
<li class="menu"><a href="#">item1</a></li>
<li class="menu"><a href="#">item2</a></li>
<li class="menu"><a href="#">item3</a></li>
<li class="menu"><a href="#">item4</a></li>
<li class="menu"><a href="#">item5</a></li>
<li class="menu"><a href="#">item6</a></li>
<li class="menu"><a href="#">item7</a></li>
</ul>
</div>
</div>
<div id="leftcontent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nisl nibh, tincidunt feugiat, interdum non, imperdiet eu, mauris. Curabitur auctor nulla in est. Phasellus tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec lorem eros, feugiat in, faucibus sit amet, aliquam sed, massa. Sed dignissim aliquet tortor. Cras faucibus commodo tortor. Ut tempus justo non dolor. Suspendisse potenti. Vivamus nec ante vitae pede scelerisque sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam consequat, orci eget condimentum cursus, mi lectus posuere lacus, non pulvinar sapien enim non ligula. Morbi elit ipsum, suscipit a, vehicula in, suscipit ut, ligula. Curabitur porttitor.
</p>
<p>
Ut aliquam ornare arcu. Nam placerat posuere pede. Integer adipiscing. Aenean sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis risus. Duis nisl. Aliquam erat volutpat. Sed accumsan, turpis in porta ornare, massa libero ullamcorper nibh, a bibendum tortor orci ut nisl. Cras iaculis. Praesent nisi. Aenean facilisis porttitor augue. Etiam non erat. Nulla eu lorem. Aliquam dui. Fusce pellentesque elit. Donec nisi urna, feugiat quis, auctor ac, semper vitae, arcu. Nam vitae ipsum vitae nisl rutrum elementum. Curabitur eget est ut mauris volutpat adipiscing. Sed venenatis tellus eget metus.
</p>
<p>
Nam imperdiet est. Curabitur condimentum massa in ligula gravida dignissim. Etiam tempus sem sagittis massa. Aliquam erat volutpat. In sit amet justo. Nam condimentum. Aliquam a purus at tortor adipiscing aliquet. Donec lorem odio, lobortis eu, porta ac, fringilla congue, massa. In hac habitasse platea dictumst. Sed pede ligula, sollicitudin et, interdum et, faucibus sed, urna. Nulla a est at metus porttitor faucibus. Mauris tincidunt, ligula ut sodales accumsan, turpis enim aliquam dolor, a vulputate risus felis ut pede. Integer ultricies pretium orci. Curabitur condimentum tristique erat. Aliquam at lacus.
</p>
<p>
Fusce aliquam volutpat quam. Vestibulum venenatis urna id pede. Donec nunc purus, hendrerit euismod, lobortis id, tincidunt at, mi. Nullam adipiscing porta velit. Praesent pulvinar rutrum massa. Sed iaculis mollis ipsum. Nullam est erat, nonummy eget, malesuada eget, ullamcorper nec, leo. Nunc pulvinar faucibus libero. Nulla hendrerit congue pede. Quisque rutrum placerat erat. Morbi aliquet venenatis mauris. Fusce volutpat purus quis ipsum. Vivamus rhoncus sollicitudin quam. Ut elit ante, venenatis cursus, placerat sagittis, cursus in, erat. Duis bibendum accumsan nisi. Praesent urna ligula, convallis vel, ultrices id, placerat vitae, diam. Morbi varius posuere dui. Donec ut lorem nec tellus pulvinar condimentum.
</p>
<p>
Sed eget quam nec eros molestie consectetuer. Sed eu nunc. Maecenas sapien nisi, consectetuer nec, facilisis id, molestie id, libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque urna enim, sollicitudin vel, blandit nec, ornare sit amet, nibh. Suspendisse pharetra. Sed pellentesque convallis arcu. Integer elementum lectus sed tellus. Pellentesque turpis lorem, volutpat sed, lacinia ut, fermentum sit amet, odio. Sed vitae tellus. Cras a lorem vitae orci adipiscing gravida. Maecenas mi neque, fringilla eget, egestas vel, porttitor ut, sapien. Fusce pretium tellus. Aenean semper nibh non nibh.
</p>
</div>
<div id="rightcontent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nisl nibh, tincidunt feugiat, interdum non, imperdiet eu, mauris. Curabitur auctor nulla in est. Phasellus tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec lorem eros, feugiat in, faucibus sit amet, aliquam sed, massa. Sed dignissim aliquet tortor. Cras faucibus commodo tortor. Ut tempus justo non dolor. Suspendisse potenti. Vivamus nec ante vitae pede scelerisque sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam consequat, orci eget condimentum cursus, mi lectus posuere lacus, non pulvinar sapien enim non ligula. Morbi elit ipsum, suscipit a, vehicula in, suscipit ut, ligula. Curabitur porttitor.
</p>
<p>
Ut aliquam ornare arcu. Nam placerat posuere pede. Integer adipiscing. Aenean sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis risus. Duis nisl. Aliquam erat volutpat. Sed accumsan, turpis in porta ornare, massa libero ullamcorper nibh, a bibendum tortor orci ut nisl. Cras iaculis. Praesent nisi. Aenean facilisis porttitor augue. Etiam non erat. Nulla eu lorem. Aliquam dui. Fusce pellentesque elit. Donec nisi urna, feugiat quis, auctor ac, semper vitae, arcu. Nam vitae ipsum vitae nisl rutrum elementum. Curabitur eget est ut mauris volutpat adipiscing. Sed venenatis tellus eget metus.
</p>
<p>
Nam imperdiet est. Curabitur condimentum massa in ligula gravida dignissim. Etiam tempus sem sagittis massa. Aliquam erat volutpat. In sit amet justo. Nam condimentum. Aliquam a purus at tortor adipiscing aliquet. Donec lorem odio, lobortis eu, porta ac, fringilla congue, massa. In hac habitasse platea dictumst. Sed pede ligula, sollicitudin et, interdum et, faucibus sed, urna. Nulla a est at metus porttitor faucibus. Mauris tincidunt, ligula ut sodales accumsan, turpis enim aliquam dolor, a vulputate risus felis ut pede. Integer ultricies pretium orci. Curabitur condimentum tristique erat. Aliquam at lacus.
</p>
<p>
Fusce aliquam volutpat quam. Vestibulum venenatis urna id pede. Donec nunc purus, hendrerit euismod, lobortis id, tincidunt at, mi. Nullam adipiscing porta velit. Praesent pulvinar rutrum massa. Sed iaculis mollis ipsum. Nullam est erat, nonummy eget, malesuada eget, ullamcorper nec, leo. Nunc pulvinar faucibus libero. Nulla hendrerit congue pede. Quisque rutrum placerat erat. Morbi aliquet venenatis mauris. Fusce volutpat purus quis ipsum. Vivamus rhoncus sollicitudin quam. Ut elit ante, venenatis cursus, placerat sagittis, cursus in, erat. Duis bibendum accumsan nisi. Praesent urna ligula, convallis vel, ultrices id, placerat vitae, diam. Morbi varius posuere dui. Donec ut lorem nec tellus pulvinar condimentum.
</p>
<p>
Sed eget quam nec eros molestie consectetuer. Sed eu nunc. Maecenas sapien nisi, consectetuer nec, facilisis id, molestie id, libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque urna enim, sollicitudin vel, blandit nec, ornare sit amet, nibh. Suspendisse pharetra. Sed pellentesque convallis arcu. Integer elementum lectus sed tellus. Pellentesque turpis lorem, volutpat sed, lacinia ut, fermentum sit amet, odio. Sed vitae tellus. Cras a lorem vitae orci adipiscing gravida. Maecenas mi neque, fringilla eget, egestas vel, porttitor ut, sapien. Fusce pretium tellus. Aenean semper nibh non nibh.
</p>
</div>
</div>
</body>
</html>
435 views
Ik heb een CSS gemaakt. Maar nu negeert firefox mijn left en right borders Hij werkt wel in IE6 7 heb ik niet getest omdat ik die niet heb kan iemand mij helpen?
