Ik ben bezig met een eigen template voor mijn clan.
Echter ben ik op een probleem gekomen.
op http://qgclan.nl kan je al meteen zien wat het probleem is.
Ipv. dat de sidebar bovenin blijft hangen gaat hij mee met de laatste div.
Hoe kan ik dit probleem het snelste verhelpen.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QGClan.nl</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="menu.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="wrapper">
<div id="loginbalk">
</div>
<div id="logo"></div>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Home</span></a>
</li>
<li><a href="#" class="parent"><span>Clan</span></a>
<ul>
<li><a href="#"><span>Clanmembers</span></a></li>
<li><a href="#"><span>Clanregels</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Forum</span></a></li>
<li><a href="#" class="parent"><span>Servers</span></a>
<ul>
<li><a href="#" class="parent"><span>Servers</span></a>
<ul>
<li><a href="http://qontrolgamerz.beneluxgaming.nl/hlstats.php"><span>Stats</span></a></li>
<li><a href="./banlist/"><span>Banlist</span></a></li>
</ul>
</li>
<li><a href="#" class="parent"><span>Diensten</span></a>
<ul>
<li><a href="#"><span>Server Admin worden</span></a></li>
<li><a href="#"><span>Premium worden</span></a></li>
</ul>
</li>
<li><a href="#"><span>Server List</span></a></li>
</ul>
</li>
<li><a href="#"><span>FAQ</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<!-- Content -->
<div id="bodywrapper">
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div class="contenthead">De Site online</div>
<div class="content">
<p>
Hallo allemaal,
<br />
<br />
<br />
Ik ben tot nu toe niet echt aan de site toegekomen, ik heb hem in zoverre af dat hij online gezet kan worden.<br />
Er moet nog heel veel gedaan worden maar dat ga ik (ik probeer) in het weekend in halen.<br />
Het forum staat nu nog apart maar zal binnenkort geintegreerd worden op de site.
<br />
<br />
<br />
Met vriendelijke groet,<br />
Acie
</p>
</div>
<div id="sidebar">
<div id="sidebarblok">
<div class="sidebarhead">Forum</div>
<div class="box">
<p><a href="forum/">Klik hier voor het forum !</a>
Excuses voor het ongemak voor het opnieuw registreren.<br />
Er waren een aantal problemen met de database.<br />
</div>
</div>
</div>
</div>
<div id="footer">
<div class="copyright"><span>Copyright 2010-2011© QGClan.nl<span><br /><small>Alle rechten voorbehouden. | By Acie</small></div>
<div class="sitelinks"><a href="#">Home</a> | <a href="#">Forum</a> | <a href="#">FAQ</a> | <a href="#">Crew</a> | <a href="#">Disclaimer</a> | <a href="#">Contact</a></div>
</div>
</body>
</html>
CSS
#bodywrapper {
width: 1102px;
min-height: 600px;
float: left;
font-family: Trebuchet MS;
font-size: 12px;
color: #000;
}
#bodywrapper .contenthead{
width: 779px;
min-height: 41px;
background: url(images/main-bg.png) repeat-x;
float: left;
color: #FFF;
font-family: Trebuchet MS;
font-size: 17px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 0 20px;
}
#bodywrapper .content {
width: 799px;
min-height: 50px;
float: left;
margin: -15px 0 0 0;
background-color: #EAEDE1;
}
#bodywrapper .content p{
padding: 10px 10px 15px 10px;
}
#sidebar {
width: 300px;
min-height: 600px;
background-color: transparant;
float: left;
color: #000;
font-family: Trebuchet MS;
font-size: 12px;
margin-top: -51px;
top: 5px
}
#sidebar .box {
width: 297px;
min-height: 200px;
float: right;
margin: -15px 0 0 0;
background-color: #EAEDE1;
}
#sidebar .box p {
padding: 5px 0 0 10px;
}
#sidebarblok {
min-height: 250px;
margin-bottom: 15px;
}
.sidebarhead{
width: 277px;
min-height: 41px;
background: url(images/main-bg.png) repeat-x;
float: right;
color: #FFF;
font-family: Trebuchet MS;
font-size: 17px;
font-weight: bold;
margin: 5px 0 0 0;
padding: 5px 0 0 20px;
}
Met vriendelijke groet,
Dylan
