Thomas Lindgaard <thomas@it-snedkeren.BLACK_HOLE.dk> wrote in
news:Xns932F76DA5146Dthomasitsnedkerendk@130.225.247.90:
> Det jeg gerne vil er illustreret i ASCII herunder:
>
> +---------------------------------+
> | |
> +------+------------------+-------+
> | | | |
> | | | |
> | | | |
> +------+------------------+-------+
> | |
> +---------------------------------+
Hej gutterne (og gutinderne)
Jeg prøvede lige noget (inspireret af Lasse og Anders). Det er noget med at
placere 5 lag og så bare nøjes med at skrive på den del af hvert lag som
ikke er dækket af andre lag.
Det giver dog lidt snavs i HTML'en, idet jeg er nødt til at indlejre en
<DIV> i de tre kolonner for at flytte teksten væk fra de overlappende top-
og bund-div'er (samt at rykke teksten ind fra højre og venstre i
midterkolonnen). Desuden kan jeg ikke få den til at vise scrollbars i
kolonnerne, når teksten fylder for meget - jeg kan ikke lige gennemskue
hvorfor overflow: auto ikke virker...?
Nogen ideer?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
HTML, BODY { height: 100%; padding: 0px; margin: 0px; }
DIV { margin: 0px; padding: 0px; }
#top { position: absolute; width: 100%; background-color:
yellow; color: black; height: 20px; z-index: 3; }
#left { position: absolute; width: 200px; height: 100%;
background-color: red; z-index: 2; overflow: auto; }
#center { position: absolute; top: 0px; left: 0px; width: 100%;
height: 100%; background-color: fuchsia; z-index: 1;
overflow: auto; }
#right { position: absolute; right: 0px; top: 0px; width: 200px;
height: 100%; background-color: blue; z-index: 2;
overflow: auto; }
#bottom { position: absolute; bottom: 0px; width: 100%;
background-color: cyan; z-index: 3; }
</style>
</head>
<body>
<div id="top">toppen</div>
<div id="left"><div style="margin: 20px 0px;">venstre</div></div>
<div id="center"><div style="margin: 20px 200px;">midten</div></div>
<div id="right"><div style="margin: 20px 0px;">højre</div></div>
<div id="bottom">bunden er nået</div>
</body>
</html>
--
Hyggehej
/Thomas