<!doctype html>
<html>
<head>
<style type="text/css">
html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, img, dl, dt, dd, ol, ul, li, form,
label,table, tr, th, td
{ /* CSS Reset */
margin: 0;
padding: 0;
border: 0;
}
.border{
border:#83b707 3px solid;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#container{
width:1000px;
margin:0 auto;
}
#top #logo{
width:675px;
height:100px;
padding:5px;
float:left;
}
#top #login{
width:260px;
height:100px;
padding:5px;
float:left;
margin-left:5px;
}
#top #login form label{
width:110px;
float:left;
}
#top #login form input{
margin-bottom:5px;
width:140px;
}
#top #login form #form_submit{
float:right;
width:50px;
}
#top #login form span{
margin-left:90px;
}
#content{
float:left;
margin-top:5px;
padding:3px;
}
#content #menu {
height: 69px;
width:961px;
border-radius: 2px 2px 2px 2px;
background: url("images/bottom-bg.png") repeat-x scroll center bottom transparent;
}
#content #menu, #content #menu ul, #content #menu ul li, #content #menu ul li a {
font-family: 'Capriola',sans-serif;
padding: 0px;
margin: 0px;
line-height: 1;
}
#content #menu ul {
height: 69px;
background: url("images/nav-bg.png") repeat-x scroll 0px 4px transparent;
}
#content #menu ul li {
float: left;
list-style: none outside none;
}
#content #menu ul li a {
border-radius: 2px 2px 0px 0px;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
opacity: 0.9;
display: block;
padding: 22px 30px 0px;
margin: 4px 2px 0px;
height: 37px;
font-weight: 400;
}
#content #menu ul li a:hover, #content #menu ul li.active a {
background: url("images/color.png") repeat scroll center bottom transparent;
color: rgb(78, 109, 4);
display: block;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.55);
opacity: 1;
padding-top: 26px;
margin-top: 0px;
height: 37px;
}
#content #menu ul li:first-child a {
margin:0px;
}
#content #innercontent{
margin-top:10px;
}
#content #twitterbox{
padding:3px;
width:250px;
height:600px;
float:left;
}
#content #innertext{
float:left;
width:680px;
height:600px;
padding:3px;
margin-left:5px;
}
#content #footer{
margin-top:4px;
width:944px;
text-align:center;
background-color: rgb(51, 51, 51);
padding:5px;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="logo" class="border">
<img id="logo_img" src="images/logo.jpg" alt="" />
</div>
<div id="login" class="border">
<form>
<label>Gebruikersnaam :</label>
<input type="text" name="gebruikersnaam" />
<label>Wachtwoord :</label>
<input type="password" name="wachtwoord" />
<span>Nog geen <a href="#">login</a>?</span>
<input id="form_submit" type="submit" value="Login" name="login" />
</form>
</div>
</div>
<div id="content" class="border">
<div id="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Diensten</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Over ons</a></li>
<li><a href="#">Webshop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="innercontent">
<div id="twitterbox" class="border">
</div>
<div id="innertext" class="border">
</div>
<div class="clear"></div>
</div>
<div id="footer" class="border">
<span>Slingerland-IT | Opperduit 272A | 2941AN Lekkerkerk | Email: Gerrit@Slingerland-IT.nl | Tel: 06 11937998 | Copyright © 2012 Slingerland-IT </span>
</div>
</div>
</div>
</body>
</html>
