Ergebnis 1 bis 4 von 4

Thema: Probleme mit Ebenen / DIV

  1. #1
    brax.
    Gast

    Standard Probleme mit Ebenen / DIV

    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    27.09.2005
    Beiträge
    591
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    Code:
    <!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&#58;200px; height&#58;5%; z-index&#58;2; background-color&#58; #CCCC33; layer-background-color&#58; #CCCC33; border&#58; 1px none #000000; top&#58; 0; left&#58; 0; overflow&#58; hidden; visibility&#58; visible;">&Uuml;berschrift
    </div>
    <div id="Layer1" style=" width&#58;200px; height&#58;95%; z-index&#58;1; background-color&#58; #AAABBB; layer-background-color&#58; #993399; border&#58; 1px none #000000; top&#58; 0; left&#58; 0; overflow&#58; auto; visibility&#58; 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>
    lieber mal hier http://de.selfhtml.org nachgucken

  3. #3
    brax.
    Gast

    Standard

    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!

  4. #4
    brax.
    Gast

    Standard Lösungen gefunden!

    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
    
    &#123;
    
    margin&#58;0;
    
    border&#58;0;
    
    padding&#58;0;
    
    height&#58;100%;
    
    max-height&#58;100%;
    
    overflow&#58; hidden;
    
    &#125;
    
    
    
    #header
    
    &#123;
    
    position&#58;absolute;
    
    top&#58;0;
    
    left&#58;0;
    
    width&#58;100%;
    
    height&#58;75px;
    
    overflow&#58;hidden;
    
    &#125;
    
    
    
    #content
    
    &#123;
    
    position&#58;fixed;
    
    top&#58;75px;
    
    left&#58;0;
    
    bottom&#58;0px;
    
    right&#58;0;
    
    &#125;
    
    
    
    * html body
    
    &#123;
    
    padding&#58;75px 0 0px 0;
    
    &#125;
    
    
    
    * html #content
    
    &#123;
    
    height&#58;100%;
    
    width&#58;100%;
    
    &#125;
    
    
    
    <div id="header">
    
    Header
    
    </div>
    
    <div id="content">
    
    Content
    
    </div>
    2. mit Javascript
    Code:
    <script type="text/javascript">
    
      function korr_L2&#40;&#41; &#123;
        if&#40;navigator.appName == "Netscape"&#41; &#123;
          document.getElementById&#40;"Layer2"&#41;.style.height = window.innerHeight -30;
        &#125; else &#123;
          document.getElementById&#40;"Layer2"&#41;.style.height = document.body.offsetHeight -34;
        &#125;
      &#125;
    
    </script>
    
    <body onLoad="korr_L2&#40;&#41;" ...
    3. Schachtelung (geht nur im IE)
    Code:
    <div id="Layer2" style="position&#58;absolute; width&#58;200px; height&#58;100%; z-index&#58;1; padding-top&#58;30; top&#58;0; left&#58; 0; overflow&#58; hidden; visibility&#58; visible;">
    
      <div id="Layer3" style="height&#58;100%; background-color&#58; #AAABBB; layer-background-
      color&#58; #993399; border&#58; 1px none #000000; overflow&#58; auto; visibility&#58; visible;">
    
    
      </div>
    
    </div>
    So, das wars. Danke an alle die mir geholfen haben. Insbesondere an Undying ! thx! brax.

Ähnliche Themen

  1. problem mit den ebenen
    Von jmm im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.06.2008, 17:28
  2. ebenen probleme
    Von trottel im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.03.2008, 14:29
  3. Ebenen
    Von Darkxor im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 27.01.2008, 20:20
  4. Hilfe mit Ebenen
    Von APR_Alex Pielok im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 23.10.2006, 16:26
  5. Ebenen
    Von odyssee im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.05.2004, 21:05

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •