Lid |
|
EDIT: Ik heb het nu toch zelf al gevonden De div "main" moest float: left zijn
------------------------------------------------------------
Ik heb een div "main" met daarin bovenaan een div "menu" en onderaan links een div "content" en rechts een div "sidebar". Zie de onderstaande link om het wat duidelijker te zien.
http://www.ksa-kriko.be/nieuw
Ik heb de "main" een border gegeven om duidelijk te maken waar het over gaat. Alle drie de div's staan in "main" maar toch worden de onderste twee er niet in opgenomen. Hierdoor loopt de schaduw langs de zijkanten niet door.
Ik kan het wel oplossen met meerdere achtergrondafbeeldingen per div maar dan wordt het niet juist weergegeven in IE.
Weet er iemand wat ik over het hoofd zie?
<div id="main">
<div id="menu">
<ul>
<li class="active"><a class="active" href="">Nieuws</a></li>
<li><a href="">Informatie</a></li>
<li><a href="">Leiding</a></li>
<li><a href="">Krikojaantje</a></li>
<li><a href="">Kalender</a></li>
<li><a href="">Media</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Links</a></li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac purus sapien, in fringilla sapien. Proin dui ligula, suscipit vitae posuere in, tincidunt eu
lacus. Vivamus id enim leo. Morbi mi nunc, accumsan in pharetra vitae, placerat quis neque. Nullam eget dolor id diam laoreet vestibulum. Aenean dapibus congue
mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div id="sidebar">
<h6>Titel Sidebar</h6>
<ul>
<li><a href="">Item van sidebar</a></li>
<li><a href="">Item van sidebar</a></li>
<li><a href="">Item van sidebar</a></li>
<li><a href="">Item van sidebar</a></li>
</ul>
</div>
</div>
<li class="active"><a class="active" href="">Nieuws </a></li> <li><a href="">Informatie </a></li> <li><a href="">Leiding </a></li> <li><a href="">Krikojaantje </a></li> <li><a href="">Kalender </a></li> <li><a href="">Contact </a></li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac purus sapien, in fringilla sapien. Proin dui ligula, suscipit vitae posuere in, tincidunt eu lacus. Vivamus id enim leo. Morbi mi nunc, accumsan in pharetra vitae, placerat quis neque. Nullam eget dolor id diam laoreet vestibulum. Aenean dapibus congue mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> <li><a href="">Item van sidebar </a></li> <li><a href="">Item van sidebar </a></li> <li><a href="">Item van sidebar </a></li> <li><a href="">Item van sidebar </a></li>
#main {
width: 900px;
background: url(../images/shadow_repeater.gif) top left repeat-y;
border: 1px solid #333;
}
#menu {
width: 848px;
height: 34px;
background: url(../images/menu.gif) top left repeat-x;
margin: 0px 26px 0px 26px;
}
#content {
float: left;
width: 598px;
text-align: justify;
font-size: 0.9em;
padding: 10px 20px 0px 40px;
}
#sidebar {
float: left;
width: 200px;
padding: 0px;
}
#main { width: 900px; background: url(../images/shadow_repeater.gif) top left repeat-y; border: 1px solid #333; } #menu { width: 848px; height: 34px; background: url(../images/menu.gif) top left repeat-x; margin: 0px 26px 0px 26px; } #content { float: left; width: 598px; text-align: justify; font-size: 0.9em; padding: 10px 20px 0px 40px; } #sidebar { float: left; width: 200px; padding: 0px; }
Alvast bedankt!
|