Ik heb van de week met wat hulp mijn site van html omgegooid in php, met een css met div-jes, en ben daar bijna klaar mee. Maar nu loopt ik tegen een probleem aan.
Ik heb een header, navigatie, links een sidebar, rechts daarvan een contentstuk en een footer daaronder (allen divs).
Nu is het probleem dat als de pagina in het contentstuk langer is als de content in de sidebar dan loopt de pagina dus onder de sidebar verder.. heel vreemd.. zie hier het probleem:
Pagina
Het lijkt er dus op dat de sidebar de lengte aanhoudt van de content die er in geplaatst wordt.. maar hij moet dus gewoon doorlopen tot aan de footer, zodat de content gewoon langs de sidebar geplaatst wordt.
Ik heb al van alles zitten klooien in mn css en mn header, maar niets lijkt te werken.
Waarschijnlijk zie ik iets over het hoofd, iemand een idee?
Alvast bedankt voor de hulp!
CSS:
HEADER
Ik heb een header, navigatie, links een sidebar, rechts daarvan een contentstuk en een footer daaronder (allen divs).
Nu is het probleem dat als de pagina in het contentstuk langer is als de content in de sidebar dan loopt de pagina dus onder de sidebar verder.. heel vreemd.. zie hier het probleem:
Pagina
Het lijkt er dus op dat de sidebar de lengte aanhoudt van de content die er in geplaatst wordt.. maar hij moet dus gewoon doorlopen tot aan de footer, zodat de content gewoon langs de sidebar geplaatst wordt.
Ik heb al van alles zitten klooien in mn css en mn header, maar niets lijkt te werken.
Waarschijnlijk zie ik iets over het hoofd, iemand een idee?
Alvast bedankt voor de hulp!
CSS:
Code:
body {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
color: #4e4e4e;
background-color: #ffffff;
font-size: 12px;
}
a {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size : 8pt;
text-decoration: none;
text-transform: uppercase;
color: #4e4e4e;
font-weight:bold;
}
a:hover {
font-size : 8pt;
text-decoration: overline;
text-transform: uppercase;
color: #790d52;
font-weight:bold;
}
a img {
border: 2px solid #4e4e4e;
}
a:hover img {
border: 2px solid #790d52;;
}
H1 {
font-family : "Trebuchet MS", Verdana, Arial, sans-serif;
font-size : 12px;
text-transform: uppercase;
padding: 2px;
background: #adadac;
color: #4e4e4e;
margin-bottom: 2px;
padding-right: 5px;
}
H2 {
font-family : "Trebuchet MS", Verdana, Arial, sans-serif;
font-size : 14px;
color : #4e4e4e;
text-align : left;
}
H3 {
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 12px;
font-style: bold;
color : #4e4e4e;
text-align : left;
}
TD {
font-family : "Trebuchet MS", Verdana, Arial, sans-serif;
font-size : 12px;
color : #4e4e4e;
}
#container {
width: 865px;
background-color: #ffffff;
background-image:url(images/div.gif);
color: #4e4e4e;
overflow: hidden;
margin: 0 auto;
}
#header {
width: 865px;
height: 650px;
background-image: url('images/layout37.jpg');
}
#navbar {
width: 849px;
height: 14px;
color: #4e4e4e;
overflow: hidden;
padding: 8px;
margin-top: -55px;
}
#sidebar {
width: 165px;
float: left;
padding: 10px;
overflow: hidden;
color: #4e4e4e;
}
#content {
width: 660px;
padding: 10px;
color: #4e4e4e;
float: right;
}
#footer {
width: 865px;
height: 40px;
padding: 10px;
overflow: hidden;
clear: both;
background-color: #ffffff;
color: #adadac;
}
#tag {
width: 165px;
height: 280px;
}
li.arrow {
list-style-image: url(../images/arrow.gif);
}HEADER
Code:
<!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">
<title>The Filans - test</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<div id="container">
<div id="header">
<img src="images/layout37.jpg">
</div>
<div id="navbar" align="center">
<a href="http://thefilans.net/test/about.php">About</a> |
<a href="http://thefilans.net/test/news_index.php">News</a> |
<a href="http://thefilans.net/gallery" target="_blank">Gallery</a> |
<a href="http://thefilans.net/fans-fun/fans-fun.php">Interactive</a> |
<a href="http://thefilans.net/site/site_index.php">Site</a> |
<a href="http://thefilans.net/index.php">Index</a> |
</div>
<div id="sidebar">
<h1>Stats</h1>
<b>Site name:</b> The Filans<br>
<b>About:</b> the Filan family<br>
<b>Since:</b> 27 December 2002<br>
<b>Webmistress:</b> <a href="site/contact_me.php">Laura</a><br>
<b>Version:</b> 37 - It's in the way you look tonight<br>
<h1>Fanlisting</h1>Are you a fan of Shane & Gillian? Then show & join their fanlisting below<br>
<a href="http://thefilans.net/fanlisting"><img src="http://thefilans.net/test/images/index_fl.jpg"></a>
<br>
<h1>Affiliates</h1>
1. <a href="http://www.westlifeplanet.nl" target="_blank">Westlife-Planet</a><br>
2. <a href="http://www.thebyrnes.de.vu" target="_blank">The Byrnes</a><br>
3. <a href="http://www.jodifan.com" target="_blank">Jodifan.com</a><br>
<br>
<h1>Tagboard</h1>
<!-- BEGIN CBOX - www.cbox.ws -->
<iframe frameborder="0" width="163" height="125" src="http://www3.cbox.ws/box/?boxid=2374081&boxtag=3811&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#4E4E4E 1px solid;" id="cboxmain"></iframe>
<br>
<iframe frameborder="0" width="163" height="75" src="http://www3.cbox.ws/box/?boxid=2374081&boxtag=3811&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#4E4E4E 1px solid;border-top:0px" id="cboxform"></iframe><!-- END CBOX -->
</div>
<div id="content">
</div>
</div>
