Code:
@charset "utf-8";
/* CSS Document */
/****** tags ******/
body {
background-image: url(images/bg.gif);
background-repeat: repeat;
}
/****** divs ******/
#window {
width: 910px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 910px;
height: 120px;
background-image: url(images/header.png);
background-repeat: no-repeat;
}
#logo {
width: 910px;
text-align: right;
}
#contentwrap {
width: 910px;
background-image: url(images/background.png);
background-repeat: repeat-y;
}
#actualcontent {
width: 540px;
margin-top: 80px;
margin-left: 30px;
float: left;
}
#userpanel {
width: 300px;
height: 300px;
background-color: #999999;
}
#upper_border {
height: 35px;
width: 910px;
background-image: url(images/upper_border.png);
}
#lower_border {
height: 35px;
width: 910px;
background-image: url(images/lower_border.png);
text-align: right;
}
/* menu */
#menu {
height: 1px;
text-align: left;
position: absolute;
}
#menu ul {
padding: 0px;
margin-top: 70px;
margin-left: 30px;
}
#menu ul li {
display: inline;
}
#knop {
width: 130px;
height: 161px;
background-image: url(images/reizenkiezer_button.png);
float: left;
background-repeat: no-repeat;
text-align: center;
}
#currentpage {
width: 130px;
height: 161px;
background-image: url(images/reizenkiezer_button_down.png);
float: left;
background-repeat: no-repeat;
text-align: center;
}
#knop:hover {
background-image: url(images/reizenkiezer_button_over.png);
}
#menu a {
text-decoration: none;
color: #333333;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
top: 125px;
}
#menu .menutext {
text-decoration: none;
color: #333333;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
top: 125px;
}
#menu a:hover {
color: #FFFFFF;
}
/****** spans ******/
.copyright {
color: #663366;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: italic;
margin-right: 25px;
}
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel komt hier</title>
<link href="main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- Start Of Page -->
<div id="window">
<div id="header">
<div id="menu">
<ul>
<li><div id="currentpage"><span class="menutext">homepage</span></div></li>
<li><div id="knop"><a href="about.htm">about us</a></div></li>
<li><div id="knop"><a href="catalogue.htm">catalogue</a></div></li>
<li><div id="knop"><a href="contact.htm">contact</a></div></li>
</ul>
</div>
<div id="logo">
<img src="images/jupistar_logo.png" alt="Logo" title="Jupistar Travel Agency" />
</div>
</div>
<div id="upper_border"></div>
<div id="contentwrap">
<div id="actualcontent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis rutrum. Vestibulum laoreet est ut sem. Nulla facilisi. Aliquam erat volutpat. Curabitur egestas ligula a nulla. Pellentesque quis sem. Duis consectetuer, justo et convallis dictum, tortor tellus malesuada risus, fringilla aliquam augue felis id nunc. Donec molestie tempus dui. Morbi consequat dapibus justo. Pellentesque justo lorem, blandit ut, tempus et, rhoncus at, metus. Sed nonummy, sem ac imperdiet nonummy, quam neque malesuada velit, eu dictum risus nisi at mi. Suspendisse arcu tellus, lacinia non, imperdiet a, condimentum eget, nisi. Nullam libero. Mauris dolor mauris, blandit a, venenatis eu, consequat nec, metus. Sed arcu sem, fermentum quis, convallis ut, molestie eu, ante. Nullam purus ligula, tincidunt vitae, laoreet sed, euismod ac, est. Fusce ullamcorper. Nullam nunc.
Pellentesque non erat. Maecenas mauris. Nulla facilisi. Phasellus placerat, ipsum vel dapibus nonummy, elit eros convallis velit, sed pharetra nisi nulla ut erat. Nam scelerisque sem id augue. Mauris nisi dui, aliquet a, ultricies et, dictum mollis, eros. Nullam at dolor et nulla aliquet rhoncus. Phasellus a tortor ut tortor vestibulum dignissim. Suspendisse ornare sapien congue lacus tempus laoreet. Mauris eleifend placerat sem. Quisque dignissim, tortor quis ultrices fermentum, ante neque molestie lectus, non nonummy dui turpis id massa. Fusce sed leo vel turpis rhoncus interdum. In sollicitudin consectetuer tellus. Vivamus lacus enim, tempor eu, mollis eget, pellentesque a, ligula. Mauris lacus arcu, varius euismod, rutrum quis, tempus sed, nibh. Fusce pulvinar, pede nec laoreet ultricies, quam neque lacinia arcu, porttitor convallis eros lectus nec libero. Aliquam tristique hendrerit risus. Duis tincidunt.
Sed fermentum sapien eget est lacinia faucibus. Sed ut magna. Donec vitae est ac magna tincidunt volutpat. Phasellus imperdiet leo ut mauris. Cras malesuada, diam sit amet viverra dignissim, ipsum pede aliquam orci, vitae lobortis ligula odio rhoncus justo. Nam turpis. Suspendisse est sem, rutrum sed, faucibus in, feugiat sit amet, erat. Vestibulum vitae urna. Duis consectetuer venenatis odio. Etiam ultricies.
Sed in sapien. Curabitur posuere nisl in nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sem neque, egestas in, dictum vitae, pharetra quis, dui. Sed id ligula. Vivamus lacus elit, tempus sit amet, vestibulum vitae, interdum vitae, est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi aliquet. Etiam eu lorem. Maecenas nibh.
Ut vel leo. Vestibulum metus felis, pretium ut, adipiscing at, ornare non, purus. Suspendisse egestas. Cras id lorem ac felis sagittis egestas. Vivamus fringilla. Nulla auctor pede ac ligula. Praesent non ligula id odio aliquet euismod. Phasellus leo. Ut cursus interdum neque. Proin id leo et ligula tempor blandit.
</div>
<div id="userpanel">
</div>
</div>
<!-- Copyright -->
<div id="lower_border">
<span class="copyright">
Copyright zcdesign 2k7 - author Jonathan V.
</span>
</div>
<!-- End Of Page -->
</div>
</body>
</html>
Mvg