[edit]
De code is aangepast op 20:21 7-09-2006
[/edit]
#css code
* {
padding : 0;
margin : 0;
}
html {
height : 100%;
width : 100%;
}
body {
height : 100%;
width : 100%;
background-color : #f00;
color : #000;
}
#container {
position : relative;
min-height : 100%; //IE wil graag height zien en geen min-height
margin : 0 10%;
background-color : #fff;
background-image : url(images/background.jpg);
background-repeat : repeat-y;
background-position : right;
}
#header {
position : relative;
width : 100%;
height : 50px;
background-color : #00f;
}
#menu {
position : relative;
width : 100%;
height : 35.6px;
background-color : #0f0;
}
#content {
padding : 5px;
padding-right : 220px;
padding-bottom : 35px;
}
#subcontent {
float: right;
width: 215px;
margin-top : -40px;
}
#footer {
position : absolute;
bottom : 0;
height : 30px;
width : 100%;
background-color : #0ff ;
}
De menu etc is even weggehaald anders moest ik het er inplanten, maar ik weet zeker dat dat goed is.
#html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>EHV Dames 1 +++ PHP(parse)Titel +++ </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestyle.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
//Voor probleem 1, voor 2 moet je de text tussen content naar subcontent plakken.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae lectus quis sapien facilisis nonummy. Nulla massa libero, congue eu, ultricies vitae, commodo sit amet, justo. Suspendisse odio. Morbi ullamcorper. Nulla facilisi. Fusce rhoncus, ipsum sed laoreet sagittis, enim augue pellentesque eros, eget euismod nisl quam a leo. Ut nunc. Duis quis metus. Cras vitae pede. Nulla eu tellus. Mauris placerat semper pede. Aenean elementum convallis ligula. Proin facilisis metus a ligula. Aenean nisi tortor, posuere id, ullamcorper sed, placerat ac, massa. Vivamus leo risus, ornare in, mollis nec, tincidunt at, mi. In gravida dolor eget odio.
Quisque a lectus. In tempor elit non dui. Donec varius, augue in scelerisque rhoncus, nibh urna malesuada libero, ac laoreet augue urna sed nibh. Sed nec urna sit amet augue auctor pellentesque. Duis pharetra. Sed viverra lacinia risus. Sed leo. Nam id nibh. Morbi id turpis id diam hendrerit blandit. Sed urna sem, lobortis in, venenatis id, venenatis ut, tellus. Aliquam iaculis, tellus quis vestibulum sodales, dolor mi fermentum tortor, et viverra leo velit eu nunc. Aenean et dui nec metus iaculis lobortis. Nullam sit amet urna sit amet turpis venenatis euismod. Aliquam mauris. Curabitur sollicitudin aliquet mauris.
Sed nulla risus, vehicula eget, rutrum non, tempus nec, nisl. Etiam pulvinar. Nullam venenatis sollicitudin ligula. Sed dui turpis, eleifend ut, iaculis id, vehicula vel, orci. Sed ante arcu, volutpat non, egestas ac, elementum eu, justo. Phasellus sit amet magna ac lacus sodales ultrices. Nullam fermentum sodales urna. Donec venenatis, nulla eu venenatis cursus, massa elit sagittis urna, a sollicitudin arcu nunc nec est. Vivamus accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum non nisi. Donec euismod magna vel libero. Nam fermentum luctus magna. Etiam pede. Pellentesque vulputate lobortis magna. Sed tincidunt urna quis justo. Ut blandit, nisl porta blandit consequat, urna pede rutrum velit, sed placerat ante tortor a ligula. Donec vel nibh. Maecenas eleifend. Fusce pretium purus at nisi vulputate pellentesque.
Curabitur nulla pede, interdum non, porta sed, tempor vel, lectus. Donec eu nunc. Nam id elit. Integer iaculis consectetuer dolor. Vivamus blandit rhoncus nunc. Pellentesque fringilla est et magna. Ut hendrerit ligula. Aenean fringilla justo eget nulla. Nulla dignissim tellus eget risus. Nunc viverra vestibulum nulla.
Praesent lacinia. Maecenas non enim. Phasellus vel elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nisi nisl, ultrices vitae, sollicitudin at, auctor id, sapien. Morbi fermentum leo a enim. Donec sagittis. Nulla facilisi. Donec pellentesque magna at mi. Maecenas magna nunc, laoreet eu, sagittis vel, mollis vel, sem. Cras feugiat libero. Vivamus tincidunt, nibh nec congue adipiscing, velit ipsum luctus libero, semper euismod orci nunc sed sapien. Ut porttitor. Vestibulum consequat lectus pretium leo. Praesent ac nisi non arcu dignissim tincidunt. Mauris tellus magna, aliquam id, accumsan eu, consectetuer a, urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="subcontent">
hi
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hier is de website waar ik de design heb staan
(AUB geen commentaar over de kleur het is voor mij makkelijker, want ben deelskleurenblind.)
http://misthafalls.no-ip.org/ehvdames1/
Het is tot nu toe nog crossbrowser(getest in FF1.5 en IE6)
hb,
christian bolster