Nieuw lid |
|
Zou me iemand kunnen helpen met het volgende.
Ik heb een site waar een aan de linkerkant een balk staat, rechts daaraan vast een contentvak, en over beide moet een horizontale balk komen. Dit allemaal in css. Voor het design zie.http://www.l-esser.nl/design.png
Precies zoals op het plaatje wordt dit in Firefox weergegeven momenteel, echter in IE begin de horizontale balk en de footer pas rechts naast alles andere, waardoor de pagina dus heel breed wordt.
Heeft iemand de oplossing?
Mijn css code is als volgt:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0px;
background-color: #869ba0;
}
#balk_links {
position: relative;
background-color: #ffffff;
border: 0px ;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
width: 173px;
margin-left: 0px;
font-family: Tahoma;
font-size: 12px;
float: left;
}
#balk_horizontaal {
position: absolute;
background-image: url(../images/bg_balk_horizontaal.png);
border: 0px;
height: 96px;
width: 100%;
margin-top: 112px;
margin-left: 0px;
float: left;
z-index: 1000;
}
#content_vak {
position: relative;
background-color: #000000;
color: #ffffff;
border: 0px;
margin-top: 0px;
margin-left: 0px;
height: 560px;
width: 590px;
float: left;
font-family: Tahoma;
font-size: 12px;
}
#content_vak_header {
position: absolute;
background-color: #000000;
width: 590px;
height: 112px;
}
#content_vak_tekst {
position: absolute;
background-color: #000000;
margin-top: 208px;
width: 590px;
height: 340px;
}
#footer {
position: absolute;
background-color: #000000;
color: #ffffff;
border: 0px;
height: 22px;
bottom: 0;
margin-left: 0;
margin-right: auto;
width: 100%;
}
* { margin: 0; padding: 0; } html, body { height: 100%; margin: 0px; background-color: #869ba0; } #balk_links { position: relative; background-color: #ffffff; border: 0px ; margin-top: 0px; margin-bottom: 0px; height: 100%; width: 173px; margin-left: 0px; font-family: Tahoma; font-size: 12px; float: left; } #balk_horizontaal { position: absolute; background-image: url(../images/bg_balk_horizontaal.png); border: 0px; height: 96px; width: 100%; margin-top: 112px; margin-left: 0px; float: left; z-index: 1000; } #content_vak { position: relative; background-color: #000000; color: #ffffff; border: 0px; margin-top: 0px; margin-left: 0px; height: 560px; width: 590px; float: left; font-family: Tahoma; font-size: 12px; } #content_vak_header { position: absolute; background-color: #000000; width: 590px; height: 112px; } #content_vak_tekst { position: absolute; background-color: #000000; margin-top: 208px; width: 590px; height: 340px; } #footer { position: absolute; background-color: #000000; color: #ffffff; border: 0px; height: 22px; bottom: 0; margin-left: 0; margin-right: auto; width: 100%; }
Alvast bedankt!
Sorry, heb het al gevonden. Voor degene die het willen weten:
Z-index werkt alleen met div's die absolute gepositioneerd zijn.
|