Probleme mit Ebenen / DIV

brax.

Hallo zusammen,

ich möchte eine anscheinlich simple Aufgabe mit Ebenen lösen.

In einer HTML-Seite werden zwei Ebenen benutzt. Eine, die "fest" verankert am oberen Bildschirmrand positioniert ist (z.B. für Überschrift) und eine zweite die direkt anschließend unterhalb posioniert ist. Die zweite soll scrollbar sein, wenn der Text über die Browsergröße hinausgeht. Ebenfalls soll die zweite Ebene auf 100% der vertikalen Browsergröße skaliert werden. Alles klar?

Problem: Die zweite Ebene verschiebt sich um die Höhe der ersten Ebene nach unten und somit verschiebt sich auch der Scrollbalken nach unten. Als Referenz für die Höhe der zweiten Ebene nehmen die Browser (getestet mit Firefox 1.0.6 und IE6) die Gesamthöhe. Blöd!

Mit margin-top:30 funktionierts nicht und mit top:30 auch nicht. Habt ihr ne Idee?

Die Seite und somit der Quelltext ist unter:

http://www.mittelalterbilder.de/ebenen.htm

einzusehen.

thx!
Viele Grüße
brax.

pindakaas

mir würde jetzt nur einfallen es die überschrift auch mit einer relativen höhe zu versehen das würde ungefehr so ausehen

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer1" style=" width:200px; height:5%; z-index:2; background-color: #CCCC33; layer-background-color: #CCCC33; border: 1px none #000000; top: 0; left: 0; overflow: hidden; visibility: visible;">&Uuml;berschrift
</div>
<div id="Layer1" style=" width:200px; height:95%; z-index:1; background-color: #AAABBB; layer-background-color: #993399; border: 1px none #000000; top: 0; left: 0; overflow: auto; visibility: visible;">



1 Test</p>



2 Test</p>


  


3 Test</p>



4 Test</p>



1 Test</p>



2 Test</p>



3 Test</p>



4 Test</p>


  


1 Test</p>



2 Test</p>



3 Test</p>



4 Test</p>



1 Test</p>



2 Test</p>


  


3 Test</p>



4 Test</p>



1 Test</p>



2 Test</p>



3 Test</p>



4 Test</p>


  </div>
</body>
</html>

Alles anzeigen

brax.

An das habe ich auch schon gedacht. Allerdings ist es ja mein Wunsch pixelgenaue Angaben zu machen und nicht je nach Browsergröße anhängig zu sein. Trotzdem danke!

brax.

Hab inzwischen eine/mehrere Lösungen erfahren:

1. beste Lösung: mit CSS (geht unter IE und Firefox)
2. mit Javascript
3. Schachtelung (geht nur im IE)

1. CSS-Lösung

Code

html, body


{


margin:0;


border:0;


padding:0;


height:100%;


max-height:100%;


overflow: hidden;


}






#header


{


position:absolute;


top:0;


left:0;


width:100%;


height:75px;


overflow:hidden;


}






#content


{


position:fixed;


top:75px;


left:0;


bottom:0px;


right:0;


}






* html body


{


padding:75px 0 0px 0;


}






* html #content


{


height:100%;


width:100%;


}






<div id="header">


Header


</div>


<div id="content">


Content


</div>

Alles anzeigen

2. mit Javascript

Code

<script type="text/javascript">


  function korr_L2() {
    if(navigator.appName == "Netscape") {
      document.getElementById("Layer2").style.height = window.innerHeight -30;
    } else {
      document.getElementById("Layer2").style.height = document.body.offsetHeight -34;
    }
  }


</script>


<body onLoad="korr_L2()" ...

Alles anzeigen

3. Schachtelung (geht nur im IE)

Code

<div id="Layer2" style="position:absolute; width:200px; height:100%; z-index:1; padding-top:30; top:0; left: 0; overflow: hidden; visibility: visible;">


  <div id="Layer3" style="height:100%; background-color: #AAABBB; layer-background-
  color: #993399; border: 1px none #000000; overflow: auto; visibility: visible;">




  </div>


</div>

Alles anzeigen

So, das wars. Danke an alle die mir geholfen haben. Insbesondere an Undying ! thx! brax.

Tags