<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
html, body {
margin: 0px;
}
body {
background-image: url('img/bottombackground.png');
}
div.topbackground {
width: 100%;
height: 300px;
background-image: url('img/topbackground.png');
}
div.container {
width: 750px;
height: 600px
background-color: #ddd;
margin: -300px auto 0px auto;
}
div.top {
width: 100%;
height: 25px;
}
div.top img.topleft, div.top img.topright {
height: 25px;
width: 11px;
float: left;
}
div.top div.topmiddle {
float: left;
height: 25px;
width: 728px;
text-align: center;
background-image: url('img/top_middle.png');
}
div.top div.topmiddle a:link, div.top div.topmiddle a:visited {
font-family: Arial, Verdana;
font-size: 11px;
color: #7c7c7c;
padding: 0px 15px;
text-decoration: none;
}
div.top div.topmiddle a:hover {
font-family: Arial, Verdana;
font-size: 11px;
color: #5e7381;
text-decoration: underline;
}
div.header {
position: relative;
margin: -30px 0px 0px 10px;
width: 730px;
height: 75px;
}
div.header img {
position: absolute;
}
div.header p {
padding: 15px 0px 0px 20px;
font-family: Arial, Verdana;
font-size: 32px;
font-weight: bold;
color: #5e5e5e;
}
img.arrow {
height: 10px;
width: 10px;
}
img.topleft {
top: 0px;
left: 0px;
}
img.topright {
top: 0px;
right: 0px;
}
img.bottomleft {
bottom: 0px;
left: 0px;
}
img.bottomright {
bottom: 0px;
right: 0px;b
}
img.flowers_top {
height: 45px;
width: 310px;
bottom: 0px;
right: 25px;
}
div.contenttop {
width: 750px;
height: 11px;
}
img.contenttopleft, img.contenttopright{
width: 10px;
height: 11px;
float: left;
}
div.contenttopmiddle {
background-image: url('img/content_topmiddle.png');
width: 730px;
height: 11px;
float: left;
}
div.contentmiddle {
background-image: url('img/content_midmiddle.png');
background-repeat: repeat-x;
width: 708px;
min-height: 211px;
height: auto !important;
height: 211px;
padding: 0px 20px;
color: #5e5e5e;
font-family: Arial, Verdana;
font-size: 12px;
}
div.content {
height: 30px;
background-color: #fff;
border-left: 1px solid #bcbcbc;
border-right: 1px solid #bcbcbc;
min-height: 400px;
height: auto !important;
height: 400px;
}
div.contentbottom {
width: 750px;
height: 23px;
}
div.contentbottom img.contentbottomleft, div.contentbottom img.contentbottomright {
height: 23px;
width: 11px;
float: left;
}
div.contentbottom div.contentbottommiddle {
float: left;
height: 23px;
width: 728px;
text-align: center;
background-image: url('img/content_bottommiddle.png');
}
img.flowers_bottom {
margin: 0px 0px 0px 405px;
}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style title link */
.menu a.title, .menu a.title:visited {
display: block;
width: 202px;
padding: 5px 0px 5px 5px;
border: 0px;
color: #fff;
background-image: url('img/select_title.png');
background-color: none;
font-size: 11px;
font-family: Arial, Verdana;
text-decoration: none;
}
/* style the links hover */
.menu a.title:hover{
color: #333;
background-image: url('img/select_title_hover.png');
}
/* style all the links */
.menu ul li ul li a, .menu ul li ul li a:visited {
display: block;
width: 200px;
padding: 5px 0px 5px 5px;
border-left: 1px solid #5e5e5e;
border-right: 1px solid #5e5e5e;
color: #fff;
background-color: #5e7381;
margin: 0px;
font-size: 11px;
font-family: Arial, Verdana;
text-decoration: none;
}
/* style the links hover */
.menu ul li ul li a:hover{
color: #333;
background: #6f899a;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width: 200px;
height: 0px;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<div class="topbackground"></div>
<div class="container">
<div class="top">
<img class="topleft" src="img/top_left.png">
<div
class=
"topmiddle"><a href=
"">Services</a><a href=
"">Contact</a><a href=
"">Aanbiedingen</a><a href=
"">Voorwaarden</a><a href=
"">MyGIPWebwinkel</a></div>
<img class="topright" src="img/top_right.png">
</div>
<div class="header">
<img class="topleft arrow" src="img/arrow_topleft.png" alt="">
<img class="topright arrow" src="img/arrow_topright.png" alt="">
<img class="bottomleft arrow" src="img/arrow_bottomleft.png" alt="">
<img class="bottomright arrow" src="img/arrow_bottomright.png" alt="">
<img class="flowers_top" src="img/flowers_top.png">
<p>GIPWebwinkel</p>
</div>
<div class="contenttop">
<img class="contenttopleft" src="img/content_topleft.png" alt="">
<div class="contenttopmiddle"></div>
<img class="contenttopright" src="img/content_topright.png" alt="">
</div>
<div class="content">
<div class="contentmiddle">
<div class="menu">
<ul>
<li><a class="title" href="">Producten</a>
<!--
[if lte IE
6]><table><tr><td><!
[endif]-->
<ul>
<li><a href="">Categorie 1</a></li>
<li><a href="">Categorie 2</a></li>
<li><a href="">Categorie 3</a></li>
<li><a href="">Categorie 4</a></li>
<li><a href="">Categorie 5</a></li>
<li><a href="">Speelgoed & Modelbouw</a></li>
<img src="img/select_bottom.png" alt="">
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
</div>
<div class="contentbottom">
<img class="contentbottomleft" src="img/content_bottomleft.png" alt="">
<div class="contentbottommiddle"></div>
<img class="contentbottomright" src="img/content_bottomright.png" alt="">
</div>
<img class="flowers_bottom" src="img/flowers_bottom.png">
</div>
</body>
</html>
Unsolved 
Offline 
