Höhen für div 100%-Text länger als div bei kl. Auflösung

[taffiduff]

Hallo

Habe folgendes spezifisches Problem.
Vorne weg - ich definiere die Höhe mit 100% der Browserhöhe.
Das folgende Layout funktioniert wunderbar für Bildschirme mit hoher Auflösung. Leider passiert das logische bei Bildschirmen mit niedriger Auflösung: Die Höhe des divs reicht nicht für den Text und somit wird das Layout zerissen.

CSS

Code: Alles auswählen

#hauptebene {
   position:absolute;
   left:50%;
   top:0px;
   width:820px;
   height:768px;
   z-index:10;
   margin-left: -410px;
   background-repeat: repeat-x;
}

#hg-hauptebene-white {
   display:talbe-cell;
   position:absolute;
   left:50%;
   top:0px;
   width:820px;
   height:100%;
   z-index:6;
   margin-left: -410px;
   background-color: #FFCC00;
   background-image: url(irgenein Bild);
   background-repeat: repeat-y;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #DBDDCF;
}
#schatten-rechts {
   float: right;
   width:17px;
   height:100%;
   z-index:11;
   position: relative;
   top: 0px;
   margin-right: -17px;
   background-repeat: repeat-y;
   background-color: #999999;
}
#schatten-links {
   float: left;
   width:17px;
   height:100%;
   z-index:11;
   position: relative;
   top: 0px;
   margin-left: -17px;
   background-repeat: repeat-y;
   background-color: #CCCCCC;
}


#bild-rest {
   position:absolute;
   left:0px;
   top:207px;
   width:210px;
   height:178px;
   z-index:6;
}

#menue {
   position:absolute;
   left:0px;
   top:50%;
   width:210px;
   height:384px;
   z-index:5;
}

#logo {
   position:absolute;
   left:40px;
   top:90px;
   width:85px;
   height:90px;
   z-index:2;
}



#spruch-rest {
   position:absolute;
   left:230px;
   top:126px;
   width:556px;
   height:66px;
   z-index:8;
}

#ci {
   position:absolute;
   left:440px;
   top:29px;
   width:340px;
   height:30px;
   z-index:4;
}
#text {
   position:absolute;
   left:232px;
   top:227px;
   width:570px;
   height:541px;
   z-index:7;
}


HTML:

Code: Alles auswählen

<div id="hg-hauptebene-white">
  <div id="schatten-links"></div>
  <div id="hauptebene">
    <div id="spruch-rest">bild</div>
    <div id="text">
      <p>text der länger werden kann - problem: wenn der text länger als die Seite wird, wird das Layout gesprengt</p>
    </div>
    <div id="bild-rest">bild</div>
    <div id="menue">Navi</div>
    <div id="ci">bild</div>
    <div id="logo">bild</div>
  </div>
  <div id="schatten-rechts"></div>
</div>

Zu sehen unter:
http://taffi.bplaced.net/test.php

Wichtig ist aber, dass die Ebenen schatten-links, hg-hauptebene-white, schatten-rechts das gesamte Layout "umgeben". Das heisst also, falls der Text mal länger sein sollte, als die Höhe des Bildschirms, dann (UND NUR DANN) sollte ein Scrollbalken erscheinen und diese Ebenen trotzdem von ganz oben bis ganz unten angezeigt werden - ich hoffe das war verständlich ;o)

Hat jemand von euch eine Idee, wie ich das lösen kann?

Vielen Dank für eure Rückmeldungen

[sejuma]

Verzichte überall auf die absoluten Positionierungen. Die heißen deshalb so, weil die meist "absolut" unnötig sind
Zentriere besser so:

Code: Alles auswählen

#hauptebene {
width:820px;
margin: 0 auto;
height:768px;
background-repeat: repeat-x;
}

Siehe http://www.ohne-css.gehts-gar.net/0001.php

[taffiduff]

das sieht super aus - danke.

Mein Problem ist aber jetzt, dass ich die ganzen absoluten Ebenen mit dieser absolut zentrierten Ebene verschachtelt habe und somit innerhalb dieser positioniert hatte.

Wie kann ich das z.B. mit der Ebene #ci oder #menue ohne absolute machen? Hast du hierfür auch zufällig einen Link *g*

Vielen Dank erstmal

P.S.: im konkreten Fall geht es um die Ebenen die ich jetzt erst blau eingefärbt habe auf

http://taffi.bplaced.net/test.php

[sejuma]

Grundsätzlich so:
bisher:

Code: Alles auswählen

#ci {
   position:absolute;
   left:440px;
   top:29px;
   width:340px;
   height:30px;
   z-index:4;
   background-color: #0099CC;
}

neu:

Code: Alles auswählen

#ci {
   margin-left:440px;
   margin-top:29px;
   width:340px;
   height:30px;
   z-index:4;
   background-color: #0099CC;
}

Wenn dann Elemente links oder rechts angeordnet werden sollen, dann gib diesen "float: left" oder float: right" und an der richtigen Stelle das Clearen nicht vergessen.
Zum Floaten: http://css-technik.de/css-examples/219_9/

[taffiduff]

super - danke ;o)

[sejuma]

Noch eine Möglichkeit, ist mir gerade eingefallen:
Wenn du die äußere Hülle mit "margin: 0 auto" zentrierst und mit "position: relative" versiehst, dann müssten die bisherigen absoluten Positionierungen auch wieder passen.
Besser wäre m.E. jedoch die erste Lösungsvariante.