Hallo,
Ik heb de volgende pagina opbouw.
<body id="body">
<div><a name="top"></a></div>
<!-- begin kop --><div id="banner">logootje</div><!-- eind kop -->
<div id="navbalk">navigatie</div>
<div id="inhoud"><!-- begin inhoud -->
<!-- begin links -->
<div id="links">
</div>
<!-- eind links -->
<!-- begin rechts -->
<div id="rechts">
</div>
<!-- eind rechts -->
</div><!-- eind inhoud -->
<div id="topper">naar begin van pagina</div>
<!-- begin footer --><div id="footer">footertje</div><!-- eind footer -->
</body>
</html>
met de volgende CSS code
#body {
background-color: #333333;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 780px;
}
#banner {
position: relative;
height: 140px;
margin-bottom: 5px;
background-color: #336633;
}
#navbalk {
position: relative;
height: 20px;
margin-bottom: 5px;
padding: 2px 4px 2px 4px;
background-color: #CCCCCC;
}
#inhoud {
position: relative;
min-height: 700px;
padding: 10px;
background-color: #99CC99;
}
#links {
float: left;
width: 49%;
background-color: #99CC99;
}
#rechts {
float: right;
width: 49%;
background-color: #99CC99;
}
#topper {
position: relative;
padding: 5px;
background-color: #99CC99;
text-align: right;
font-weight: bold;
font-size: 13px;
font-family: Verdana,Arial,Helvetica;
}
#footer {
clear: both;
position: relative;
height: 40px;
margin-top: 5px;
padding: 10px;
background-color: #336633;
color: #CCCCCC;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: Verdana,Arial,Helvetica;
}
De bedoeling is dat in de inhoud div twee kolommen komen (div links en div rechts).
De volgende problemen ontdek ik:
In firefox is inhoud-div niet lang genoeg voor de kolommen en wordt de footer onder de rechter kolom geplakt.
Onder IE 6 heb ik totaal geen kleur van de inhoud-div. De footer bevindt zich buiten beeld rechts van de browser.
Weet iemand hoe ik dit netjes krijg?
Ik heb de volgende pagina opbouw.
<body id="body">
<div><a name="top"></a></div>
<!-- begin kop --><div id="banner">logootje</div><!-- eind kop -->
<div id="navbalk">navigatie</div>
<div id="inhoud"><!-- begin inhoud -->
<!-- begin links -->
<div id="links">
</div>
<!-- eind links -->
<!-- begin rechts -->
<div id="rechts">
</div>
<!-- eind rechts -->
</div><!-- eind inhoud -->
<div id="topper">naar begin van pagina</div>
<!-- begin footer --><div id="footer">footertje</div><!-- eind footer -->
</body>
</html>
met de volgende CSS code
#body {
background-color: #333333;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 780px;
}
#banner {
position: relative;
height: 140px;
margin-bottom: 5px;
background-color: #336633;
}
#navbalk {
position: relative;
height: 20px;
margin-bottom: 5px;
padding: 2px 4px 2px 4px;
background-color: #CCCCCC;
}
#inhoud {
position: relative;
min-height: 700px;
padding: 10px;
background-color: #99CC99;
}
#links {
float: left;
width: 49%;
background-color: #99CC99;
}
#rechts {
float: right;
width: 49%;
background-color: #99CC99;
}
#topper {
position: relative;
padding: 5px;
background-color: #99CC99;
text-align: right;
font-weight: bold;
font-size: 13px;
font-family: Verdana,Arial,Helvetica;
}
#footer {
clear: both;
position: relative;
height: 40px;
margin-top: 5px;
padding: 10px;
background-color: #336633;
color: #CCCCCC;
text-align: center;
font-weight: bold;
font-size: 13px;
font-family: Verdana,Arial,Helvetica;
}
De bedoeling is dat in de inhoud div twee kolommen komen (div links en div rechts).
De volgende problemen ontdek ik:
In firefox is inhoud-div niet lang genoeg voor de kolommen en wordt de footer onder de rechter kolom geplakt.
Onder IE 6 heb ik totaal geen kleur van de inhoud-div. De footer bevindt zich buiten beeld rechts van de browser.
Weet iemand hoe ik dit netjes krijg?