Verder heb ik via google een groot aantal sites bekeken, maar ik kom er maar niet uit en wil nu toch hier vragen wat ik er aan kan doen.
Hier mijn CSS:
* {
padding: 0;
margin: 0;
}
html, body {
margin: 0 auto;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
height: 100%;
}
#wrapper {
margin: 0 auto;
width: 951px;
overflow:hidden;
}
#faux {
margin-bottom: 0px;
overflow: auto;
width: 100%;
padding-bottom: 150px;
}
#bg{
border: 0px solid black;
background: url('images/bg.png') no-repeat;
width: 949px;
height: 403px;
position: absolute;
}
#header {
color: #333;
width: 931px;
padding: 10px;
height: 106px;
margin: -1px 0px 0px -1px;
background: url('images/header.png');
}
#head_links {
color: #333;
width: 280px;
padding: 0px;
height: 22px;
margin-top: 50px;
margin-left: 650px;
float: left;
position: absolute;
}
#collegegroep {
font-weight: bold;
padding-top: 3px;
padding-left: 29px;
height: 19px;
width: 103px;
background: url('images/college_groep_knop.png');
float: left;
}
#contact {
font-weight: bold;
padding-top: 3px;
padding-left: 25px;
height: 19px;
width: 112px;
background: url('images/contact_knop.png');
float: right;
}
#menu {
color: #333;
width: 951px;
padding: 0px;
height: 64px;
margin: 0px 0px 0px 0px;
}
#menu_low{
color: #333;
width: 951px;
padding: 0px;
height: 28px;
margin: 0px 0px 0px 0px;
background: url('images/menu_low.png') no-repeat;
}
#pag_weergave{
color: #fff;
width: 550px;
padding-right: 10px;
height: 27px;
margin: 0px 0px 0px 0px;
text-align: right;
line-height: 23px;
font-size: 11px;
float: left;
}
#login{
margin-top: 2px;
border: 0px solid black;
color: #fff;
width: 377px;
padding-left: 10px;
height: 26px;
text-align: left;
line-height: 23px;
font-size: 11px;
float: right;
}
#rightcolumn {
display: inline;
margin: 0px;
padding: 10px;
width: 368px;
float: right;
}
#leftcolumn {
float: left;
margin: 0px;
padding: 10px;
width: 540px;
display: inline;
}
#footer {
height: 10px;
clear:both;
width: 908px;
background: #ABBEBE;
padding: 10px;
bottom: 0;
}
.clear {
clear: both;
background: none;
}
.username{
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 24px;
border: 0px solid #fff;
width: 124px;
background: transparent url("images/username.png") no-repeat;
position: absolute;
display: block;
}
/* MENU start */
.menu{margin:0 auto; padding:0; height:64px; width:100%; display:block; background:url('images/repeat.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px tahoma, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{padding-top: 15px; line-height:15px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:white; background:url('images/repeat2.png'); height:64px;}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px tahoma, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
/* MENU eind */
index.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webshop @ College Groep Nederland</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="head_links">
<div id="collegegroep"><a href="http://www.collegegroep.nl/">Collegegroep.nl</a></div><div id="contact">Contactgegevens</div>
</div>
</div>
<div id="menu">
<?php include 'menu.php' ?>
</div>
<div id="menu_low">
<div id="pag_weergave">
U bevindt zich hier: Home
</div>
<div id="login">
<form>
<input type="text" class="username" value="Gebruikersnaam">
</form>
</div>
</div>
<div id="faux">
<div id="bg">
<div id="leftcolumn">
hhkfgkdfhg
<div class="clear"></div>
</div>
<div id="rightcolumn">
gahagaha<br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg
gahagaha<br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg
gahagaha<br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg <br>hg
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
Als iemand behoefte heeft om het resultaat te zien, dan moet je het even melden, dan zet ik hem online.
Alvast bedankt voor de hulp!
