Ik heb een menu en daarnaast de content. Het menu is 192px lang maar daarnaast wil ik de content hebben die de rest van de pagina in de breedte opvult. De content moet dan dus 100% - 192px breed zijn.
Ik ben nu even helemaal opnieuw begonnen. Gaat nu opzich redelijk goed. Alleen 2 punten nu:
1) in IE krijg ik een ruimte van een aantal pixels tussen mijn menu en mijn content
2) Binnen mijn containerbox heb ik border: 1px solid black gezet. Nu zet hij in IE wel een complete rand om de container heen, maar in FF kapt hij ergens voor het einde af. Ik heb dus in FF een border aan de boven, linker en rechter kant.
Dit is mijn code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Kyokushin v3 </TITLE>
<style type="text/css">
body, html {
margin: 0px;
padding: 0px;
color: white;
width: 100%;
background: url("graph/bg.gif");
background-repeat: repeat;
text-align: center;
}
#container {
width: 98%;
height: 500px;
margin: 0px auto;
text-align: left;
background-color: #025892;
border: 1px solid black;
}
#header {
height: 100px;
width: 100%;
background: url("graph/header.gif");
background-repeat: no-repeat;
background-color: #025892;
}
#menubox {
width: 192px;
float: left;
background-color: #cdd6d8;
height: 100%;
}
#subheader {
width: 192px;
min-height: 30px;
_height: 30px;
background: url("graph/links-boven.gif");
}
.menu-licht {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background-color: #658288;
color: white;
font-size: 13;
text-align: center;
vertical-align: middle;
font-family: Comic Sans MS;
line-height: 30px; /*Om tekst verticaal te kunnen centreren*/
}
.menu-donker {
margin: 0px;
padding: 0px;
display: block;
width: 192px;
min-height: 30px;
_height: 30px;
background-color: #025892;
color: white;
font-size: 13;
text-align: center;
vertical-align: middle;
font-family: Comic Sans MS;
line-height: 30px; /*Om tekst verticaal te kunnen centreren*/
}
#contentbox {
overflow: auto;
height: 100%;
border-left: 1px dashed black;
background: url("graph/content.gif");
background-repeat: no-repeat;
background-color: #e9edee;
color: black;
font-size: 13px;
}
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="menubox">
<div id="subheader"></div>
<div class="menu-licht">ALGEMENE INFORMATIE</div>
<div class="menu-donker">AANMELDEN</div>
<div class="menu-licht">LERAAR & ASSISTENTEN</div>
<div class="menu-donker">TRAININGEN</div>
<div class="menu-licht">DOJO ETIQUETTE</div>
<div class="menu-donker">ACTIVITEITENKALENDER</div>
<div class="menu-licht">CONTRIBUTIE</div>
<div class="menu-donker">EXAMENS</div>
<div class="menu-licht">LINKS</div>
<div class="menu-donker">FOTOALBUM</div>
<div class="menu-licht">MEDEDELINGEN</div>
<div class="menu-donker">DANGRADEN</div>
</div>
<div id="contentbox">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mattis ante vel leo.
Aliquam non lacus. Ut mattis orci tempor lorem. Pellentesque egestas tortor eget tellus.
Proin nisi. Pellentesque non nunc. Praesent nibh. Donec tellus. Proin nec ante.
Cras vestibulum, dui vel tristique vestibulum, augue nibh tincidunt ante, a sollicitudin risus
ligula ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin eget mauris vel tellus dictum viverra. Duis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mattis ante vel leo.
Aliquam non lacus. Ut mattis orci tempor lorem. Pellentesque egestas tortor eget tellus.
Proin nisi. Pellentesque non nunc. Praesent nibh. Donec tellus. Proin nec ante.
Cras vestibulum, dui vel tristique vestibulum, augue nibh tincidunt ante, a sollicitudin risus
ligula ac lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin eget mauris vel tellus dictum viverra. Duis neque.</p>
</div>
</div>
</BODY>
</HTML>
Nog een aantal problemen:
1) in FF krijg ik als ik een behoorlijke content tekst scrollbalken IN mijn content. Dat is niet de bedoeling, ik wil gewoon dat het complete document verlengt wordt
2) Er wordt op de een of andere manier een stuk lozo ruimte onder de tekst in de content geplaatst. Onder de contentbox komt zit namelijk nog een blok. En deze moet dan pal onder de tekst komen.
Check mn code? Ik check m al drie dagen, maar kom er gewoon niet uit!! :'(
En als ik die overflow weghaal, wordt het plaatje niet goed weergegevn in de content, dan verdwijnt hij weer achter het menu.
Ik wordt hier echt beetje moe van.. En dan raadt men aan je site in divs e maken. Ik ben nu serieus al drie dagen hiermee bezig. Het wil echt niet lukken. *diepe zucht* :(
Checken op fouten heeft geen zin, omdat precies zoals jij zegt, FF en IE dingen anders interpreteren, dus wat je zegt klopt niet.
Ook al zou mn code valid zijn dan nog ziet het er anders uit in IE en FF
