<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body, html {
heigth: 100%;
padding: 0px;
margin: 5px;
}
.sub {
position:relative;
width: 487px;
}
.top {
position: absolute;
background-image: url("top.gif");
width: 487px;
height: 14px;
top: 0px;
left: 0px;
}
.rightTop {
position:absolute;
background-image: url("right.gif");
width: 37px;
height: 14px;
right: 0px;
top: 14px;
}
.content {
position: absolute;
background-image: url("rightrepeat.gif");
background-repeat:repeat-y;
background-position:right;
background-color: #B0B000;
width: 487px;
top: 14px;
}
.text {
padding: 5px;
padding-right: 37px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}
.bottom {
position:relative;
background-image: url("bottom.gif");
width: 487px;
height: 23px;
}
-->
</style>
</head>
<body>
<div class="sub">
<div class="top"></div>
<div class="content">
<div class="head"><img src="head.gif" alt="" /></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
</div>
<div class="bottom"></div>
</div>
<div class="rightTop"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
<div id="content">
<div id="top_content"></div>
<div id="content_shade">
<div id="breadcrumb">
<div id="breadcrumb_txt">{breadcrumb}</div>
</div>
<div id="content_txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
</div>
<div id="shadow_content"></div>
</div>
<div id="rightTop"></div>
</div>
<div id="content">
<div id="top_content"></div>
<div id="content_shade">
<div id="breadcrumb">
<div id="breadcrumb_txt">{breadcrumb}</div>
</div>
<div id="content_txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
Nu ben ik dat stadium voorbij, maar ik krijg de footer niet aan de voet van het contentgedeelte. De footer moet meeschuiven met de content en niet vast aan de onderkant van het beeld zitten. Kan iemand me helpen met dit probleem?
Een voorbeeld van mijn huidige code en css staat hier:
(beste te bekijken in IE, FF plaatst het spul net niet correct helaas)
een uitgewerkt photoshopmodel staat in: