John Berry
Legacy Member
Goeiemorgen,
Ik worstel al geruime tijd met volgend issue:
Ik ben een site opgesteld in tabellen in een meer gestandaardiseerde vorm met CSS. De ruwe layout beschrijf ik als volgt (ik kan gen screenshots uplaoden van hier uit):
1. Een frame rond de hele pagina zodat de pagina de hele hoogte (op zn minst) en 96% van de breedte van het browservenster beslaat. (Dat ik ook een rand megeef)
2. Een header even breed als het frame, met aan vaste hoogte van 220px.
3. Daaronder LINKS een menu met vaste breedte van 150px.
4. rechts van dat menu een inhoudssectie die de volledige rest van de pagina moet vullen.
(5. een footer regel met vaste hoogte 20 px)
Na vele pogingen is dit mijn beste benadering, maar ik weet dat dit gewoon
niet logisch is:
HTML:
CSS:
Kan iemand mij tot betere inzichten brengen?
Cheers, J.B.
Ik worstel al geruime tijd met volgend issue:
Ik ben een site opgesteld in tabellen in een meer gestandaardiseerde vorm met CSS. De ruwe layout beschrijf ik als volgt (ik kan gen screenshots uplaoden van hier uit):
1. Een frame rond de hele pagina zodat de pagina de hele hoogte (op zn minst) en 96% van de breedte van het browservenster beslaat. (Dat ik ook een rand megeef)
2. Een header even breed als het frame, met aan vaste hoogte van 220px.
3. Daaronder LINKS een menu met vaste breedte van 150px.
4. rechts van dat menu een inhoudssectie die de volledige rest van de pagina moet vullen.
(5. een footer regel met vaste hoogte 20 px)
Na vele pogingen is dit mijn beste benadering, maar ik weet dat dit gewoon
niet logisch is:
HTML:
HTML:
<body>
<div id="wrap">
<div id="body">
<div id="main">
<div id="menu"> MENU </div>
<div id="header"> HEADER </div>
MAIN CONTENT
</div>
</div>
</div>
</body>CSS:
Code:
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color: #444444;
}
#wrap {
position: relative;
border-style: outset;
border-width: 1px;
width: 96%;
left: 2%;
right: 2%;
height: 98%;
}
div#body {
padding-top: 0px;
position:absolute;
width: 100%;
height: 100%;
}
#header {
position: absolute;
height: 220px;
width: 100%;
background-image: url('../../gfx/header7.jpg');
}
#menu {
position: absolute;
width: 150px;
height: 100%;
margin-top: 0px;
background-color: #939393;
background-image: url('../../gfx/bg-industrial-left.jpg');
background-repeat: no-repeat;
background-position: bottom left;
}
#main {
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: #EAEAEA;
background-image: url('../../gfx/bg-industrial.jpg');
background-repeat: no-repeat;
background-position: bottom right;
}Kan iemand mij tot betere inzichten brengen?
Cheers, J.B.