z-index fortæller hvor tæt på brugeren et element lægges, og kan derfor bruges til at stable noget ovenpå hinanden så (kun) det forreste ses ...
Ideen i den måde, det er lavet på er, at man lægger et element hhv. øverst og nederst på siden, som absolut positioneres, bagved dem, lægger man så det element, der skal fylde resten ud, og da den eneste højde, man kan kende i et stylesheet er 100%, sættes det bageste til dn højde, og for at undgå, at indholdet skjules bag de foranliggende elementer, lægger man skygge-elementer, der kan optage pladsen bagved !-)
-- og følgende virker helt ens i alle browsere, hvis ikke indholdet er højere end skærmen, hvor Geckoerne og Opera tager bottom:0; alvorligt og lægger det der, hvor view-porten slutter ved start ...
-- og bruger man position:fixed på .bund-elementet, er der 3 forskellige visninger i mine 3 browsere ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/REC-html40/strict.dtd"><html>
<head>
<title>Midlertidig side</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0px;
background-color: #003333;
border: none;
height:100%;
min-height:100%;
}
#container{
position:relative;
width: 950px;
margin:0 auto;
padding:0;
height:100%;
min-height:100%;
}
table {
width: 950px;
height: 100%;
min-height:100%;
background-color: white;
border-collapse:collapse;
}
td {
width: 650px;
border: 0; }
.toplogo,.topSkygge {
position:absolute;
top:0;
left:0;
height: 120px;
width: 100%;
vertical-align: top;
border: 0;
background-color:green;}
.topSkygge{position:relative;background:transparent;}
td.menu {
width: 150px;
border: 0; }
td.content {
vertical-align:top;
border: 0;
background-color:red;}
td.right {
width: 150px;
border: 0; }
.bund,.bundSkygge {
position:absolute;
bottom:-1px;
left:0;
height: 30px;
width: 100%;
border: 0;
background-color:green;}
.bundSkygge{position:relative;background:transparent;}
</style>
</head>
<body>
<div id="container">
<div class="toplogo">Toplogo</div>
<table>
<tr>
<td class="menu">
<div class="topSkygge"> </div>
Menu
<div class="bundSkygge"> </div></td>
<td class="content">
<div class="topSkygge"> </div>
Content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
bund
<div class="bundSkygge"> </div></td>
<td class="right">
<div class="topSkygge"> </div>
Right
<div class="bundSkygge"> </div></td>
</tr>
</table>
<div class="bund">Bottom</div>
</div>
</body>
</html>
-- fjerner du de mange linjeskift, virker det helt ens !o]
Ny bruger
Nybegynder
Opret
Preview
