HTML interesse |
|
Ik ben bezig aan de layout van volgende site:
http://www.calamitas.be/V2
Bedoeling is dat het geheel steeds de volledige vensterbreedte inneemt, en de linkse en rechtse kolom de hoogte aannemen van de middenste kolom
In firefox toont hij (bijna) alles zoals ik verwacht en het wil hebben (zoals gewoonlijk), enkel de rand rechts van de middenkolom toont hij om een of andere reden niet.
In IE daarentegen trekt het uiteraard weer op niet veel, er is een witte spatie langs de banner bovenaan en de linkse en rechtse kolom lopen niet mee met het middenvenster.
Iemand een idee hoe ik deze dingen kan oplossen want'k geraak er niet echt uit.
CSS code:
#container
{
position: relative;
border: solid 1px #000000;
margin-left: auto;
margin-right: auto;
width: 100%;
color: #1945c2;
}
#banner
{
width: 100%;
margin: 0px auto;
height: 150px;
background-image: url('bannerachtergrond.jpg');
background-repeat: repeat-x;
}
#containerBody
{
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
#menu
{
padding-top: 10px;
position: absolute;
left: 0px;
height: 97.5%;
top: 0px;
margin-left: 0px;
margin-bottom: 10px;
width: 185px;
background-image: url('menu.jpg');
background-repeat:no-repeat;
}
#menuRight
{
position: absolute;
top: 0px;
right: 0px;
height: 100%;
margin-right: 0px;
margin-bottom: 0px;
width: 165px;
background-image: url('menu.jpg');
background-repeat:no-repeat;
}
#containerMain
{
top: 0px;
margin-left: 185px;
margin-right: 165px;
border-top: solid 1px #000000;
border-right: solid 1px #000000;
border-left: solid 1px #000000;
}
#pagePosition
{
text-align: left;
width: 100%;
border-bottom: solid 1px #000000;
height: 26px;
padding-left: 10px;
padding-top: 4px;
overflow: visible;
}
#main
{
width: 100%;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 0px;
background-color: #c4d1df;
text-align: left;
}
#spacer
{
clear: both;
}
#container { position: relative; border: solid 1px #000000; margin-left: auto; margin-right: auto; width: 100%; color: #1945c2; } #banner { width: 100%; margin: 0px auto; height: 150px; background-image: url('bannerachtergrond.jpg'); background-repeat: repeat-x; } #containerBody { position: relative; margin-left: auto; margin-right: auto; text-align: center; width: 100%; } #menu { padding-top: 10px; position: absolute; left: 0px; height: 97.5%; top: 0px; margin-left: 0px; margin-bottom: 10px; width: 185px; background-image: url('menu.jpg'); background-repeat:no-repeat; } #menuRight { position: absolute; top: 0px; right: 0px; height: 100%; margin-right: 0px; margin-bottom: 0px; width: 165px; background-image: url('menu.jpg'); background-repeat:no-repeat; } #containerMain { top: 0px; margin-left: 185px; margin-right: 165px; border-top: solid 1px #000000; border-right: solid 1px #000000; border-left: solid 1px #000000; } #pagePosition { text-align: left; width: 100%; border-bottom: solid 1px #000000; height: 26px; padding-left: 10px; padding-top: 4px; overflow: visible; } #main { width: 100%; padding-left: 10px; padding-top: 5px; padding-bottom: 0px; background-color: #c4d1df; text-align: left; } #spacer { clear: both; }
Alvast bedankt!
|