Nieuw lid |
|
Hallo
Ik probeer voor het eerst een website in elkaar te boksen met <DIV>'s ipv met <table>'s. Ik zit wel met eeen probleem.
Ik heb een div aangemaakt die als container dient voor enkele andere div's. Nu staan de DIV's die in de container zouden moeten staan naast die container ipv er in. Wanneer je naar http://www.meidenvanmichel.be/test klikt, zal je merken wat ik bedoel. Ik heb de container een groene rand gegeven, zodat je de fout opmerkt.
De code die ik gebruik voor de DIV's:
--------------------------------------------------------------
<div class="container">
<div class="shadow">
<img src="images/shadow_topleft.gif" border="0" alt=""><img src="images/shadow_topcenter.gif" border="0" alt=""><img src="images/shadow_topright.gif" border="0" alt=""></div>
<div class="contentcontainer">
<div class="contentshadowleft"><img src="images/shadow_centerleft.gif" border="0" alt=""></div>
<div class="navigation">NAVIGATIE</div>
<div class="content"><img src="images/marjan_ekiden_a.jpg" border="0" alt=""></div>
<div class="contentspacerright"></div>
<div class="contentshadowright"><img src="images/shadow_centerright.gif" border="0" alt=""></div>
</div>
<div class="shadow">
<img src="images/shadow_bottomleft.gif" border="0" alt=""><img src="images/shadow_bottomcenter.gif" border="0" alt=""><img src="images/shadow_bottomright.gif" border="0" alt=""></div>
</div>
<div class="container"> <div class="shadow"> <img src="images/shadow_topleft.gif" border="0" alt=""><img src="images/shadow_topcenter.gif" border="0" alt=""><img src="images/shadow_topright.gif" border="0" alt=""></div> <div class="contentcontainer"> <div class="contentshadowleft"><img src="images/shadow_centerleft.gif" border="0" alt=""></div> <div class="navigation">NAVIGATIE</div> <div class="content"><img src="images/marjan_ekiden_a.jpg" border="0" alt=""></div> <div class="contentspacerright"></div> <div class="contentshadowright"><img src="images/shadow_centerright.gif" border="0" alt=""></div> </div> <div class="shadow"> <img src="images/shadow_bottomleft.gif" border="0" alt=""><img src="images/shadow_bottomcenter.gif" border="0" alt=""><img src="images/shadow_bottomright.gif" border="0" alt=""></div> </div>
--------------------------------------------------------------
CSS:
body {
background-color: #FF6699;
color: #FFFFFF;
font-family: "Century Gothic", Verdana, Arial;
font-size: 14px;
}
div.container {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
border: 0px solid #000000;
}
div.shadow {
width: 740px;
height: 20px;
text-align: left;
vertical-align: top;
border: 0px solid #FF0000;
}
div.contentcontainer {
position: relative;
width: 740px;
height: 520px;
border: 2px solid #00FF00;
padding: 0px;
margin-left: 0px;
}
div.contentshadowleft {
position: absolute;
width: 20px;
height: 520px;
text-align: left;
vertical-align: top;
border: 0px solid #00FF00;
padding: 0px;
margin-left: 0px;
float: left;
}
div.navigation {
background-color: #FFFFFF;
position: absolute;
width: 120px;
height: 520px;
text-align: left;
vertical-align: top;
border: 0px solid #0000FF;
padding: 0px;
margin-left: 20px;
float: left;
}
div.content {
position: absolute;
width: 530px;
height: 520px;
text-align: left;
vertical-align: top;
border: 0px solid #0000FF;
padding: 0px;
margin-left: 140px;
float: left;
}
div.contentspacerright {
background-color: #FFFFFF;
position: absolute;
width: 50px;
height: 520px;
text-align: left;
vertical-align: top;
border: 0px solid #0000FF;
padding: 0px;
margin-left: 670px;
float: left;
}
div.contentshadowright {
width: 20px;
height: 520px;
text-align: left;
vertical-align: top;
border: 0px solid #FF0000;
margin-left: 720px;
padding: 0px;
}
body { background-color: #FF6699; color: #FFFFFF; font-family: "Century Gothic", Verdana, Arial; font-size: 14px; } div.container { width: 100%; height: 100%; text-align: center; vertical-align: middle; border: 0px solid #000000; } div.shadow { width: 740px; height: 20px; text-align: left; vertical-align: top; border: 0px solid #FF0000; } div.contentcontainer { position: relative; width: 740px; height: 520px; border: 2px solid #00FF00; padding: 0px; margin-left: 0px; } div.contentshadowleft { position: absolute; width: 20px; height: 520px; text-align: left; vertical-align: top; border: 0px solid #00FF00; padding: 0px; margin-left: 0px; float: left; } div.navigation { background-color: #FFFFFF; position: absolute; width: 120px; height: 520px; text-align: left; vertical-align: top; border: 0px solid #0000FF; padding: 0px; margin-left: 20px; float: left; } div.content { position: absolute; width: 530px; height: 520px; text-align: left; vertical-align: top; border: 0px solid #0000FF; padding: 0px; margin-left: 140px; float: left; } div.contentspacerright { background-color: #FFFFFF; position: absolute; width: 50px; height: 520px; text-align: left; vertical-align: top; border: 0px solid #0000FF; padding: 0px; margin-left: 670px; float: left; } div.contentshadowright { width: 20px; height: 520px; text-align: left; vertical-align: top; border: 0px solid #FF0000; margin-left: 720px; padding: 0px; }
|