✔ dreispalter soll scollen - nicht die ganze Seite

Status
Nicht offen für weitere Antworten.
ritasboss

ritasboss

Grünschnabel
Hallo,
beim Aufbau des klassischen Dreispalters kriege ich es einfach nicht hin, dass die mittlere Spalte "inhalte" scollt. Es scollt immer die komplette Webseite.

Mit Höhe "100%" und Rändern oben und unten habe ich schon rumgespielt. Aber nichts wirkt.

Die Testseite zum Angucken des Maleurs habe ich hier hingelegt:
verwaister Link

Liegt's am DOCTYPE? an PHP? am Sack Reis, der in China umgefallen ist? Hilfe ich verzweilfle.

Code: 
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFCC;
}
#head-line {
height: 56px;
clear: both;
background-color: #FFFF00;
z-index: 1;
}
#navigation {
z-index: 2;
width: 160px;
left: 0px;
position: absolute;
top: 56px;
background-color: #00FF00;
}
#seitentitel {
margin-right: 160px;
margin-left: 160px;
height: 150px;
overflow: hidden;
background-color: #66FFFF;
z-index: 4;
}
#inhalte {
background-color: #CCCCCC;
margin-right: 160px;
margin-left: 160px;
overflow: auto;
z-index: 5;
margin-bottom: 60px;
}
#schmuckleiste {
z-index: 3;
width: 160px;
position: absolute;
top: 56px;
right: 0px;
background-color: #00FF00;
}
#fussleiste {
background-color: #FFFF00;
height: 60px;
z-index: 6;
bottom: 0px;
position: absolute;
width: 100%;
left: 0px;
}
 
ritasboss hat gesagt.:
Liegt's am DOCTYPE? an PHP? am Sack Reis, der in China umgefallen ist?
Zum Vergrößern anklicken....

:offtopic: Ich hab mal rumgefragt. Ist keiner umgefallen. :)

Back to topic: position:fixed; funktioniert nicht im Internet Explorer. Die Erfahrung musste ich leider machen als ich angefangen hab meine Page zu basteln.
 
Habe das erwähnte CSS-Tutorial auf das relevante DIV#inhalte angewendet:

Code: 
#inhalte {
position: absolute;
left: 160px;
right: 160px;
top: 206px;
bottom: 60px;
background-color: #CCCCCC;
overflow: auto;
z-index: 5;
width: expression((document.body.clientWidth - 320) + "px");
                          /* left-Wert + right-Wert = 320 */
height: expression((document.body.clientHeight - 266) + "px");
                          /* top-Wert + bottom-Wert = 266 */
}
[ Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Opera 7.23 ]
 
Hi,

das Problem an der Lösung von @michaelsinterface ist, dass das Seitenlayout bei deaktiviertem
JavaScript nicht korrekt angezeigt wird (wegen der Wertzuweisung mit expression).

Geeigneter wäre eine Variante, bei der absolut positionierte Elemente wie gewünscht platziert
werden - über top, left, bottom und right. Da dies vom IE nicht verstanden wird, muss hier korrigierend
eingegriffen werden. Die Elemente bekommen ihre Aussenabstände über Rahmen zugewiesen.
Da die Rahmen in tieferen z-Ebenen liegen als zum Beispiel Header und Footer, werden sie von
diesen überlagert und bleiben somit unsichtbar.

Zu beachten ist, dass das folgende Beispiel nur funktioniert, wenn sich der IE im Quirksmode
befindet.

Der IE befindet sich im Quirksmode, wenn
  • kein DocType angegeben wird
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (HTML 4.01)
  • bei XHTML 1.0 Dokumenten, wenn der Prolog angegeben wird:
    <?xml version="1.0" encoding="iso-8859-1"?>

Beispiel:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
body{ margin: 0;
      padding: 0;
      overflow: hidden;}
body, html{ height: 100%;}

#head-line{ position: absolute;
            top: 0;
            left: 0;
            height: 56px;
            width: 100%;
            z-index: 8;
            background: #ffff00;}

/* Nicht-IE-Browser beherrschen das Aufspannen von Elementen anhand von absoluten
   Positionsangaben (top, right, bottom, left). */
#navigation{ position: absolute;
             top: 56px;
             left: 0;
             bottom: 60px;
             width: 160px;
             z-index: 4;
             background: #00ff00;}
/* IEs beherrschen obiges Verhalten nicht, so dass hier korrigierend mit einem CSS-Filter
   eingegriffen werden muss. Die Positionsangaben werden zunächst zurückgesetzt. Anschliessend
   wird dem Element 100% Höhe zugewiesen. Header und Footer werden durch das zuweisen von
   Rahmen in deren Stärke ausgespart. Da Footer und Header höhere z-Indizes besitzen, werden
   die Rahmen überdeckt und sind somit nicht sichtbar. */
* html #navigation{ top: 0;
                    bottom: 0;
                    height: 100%;
                    border-top: 56px solid #ffffff;
                    border-bottom: 60px solid #ffffff;}

#seitentitel{ position: absolute;
              top: 56px;
              left: 160px;
              right: 160px;
              height: 150px;
              background: #00ffff;
              z-index: 3;}
* html #seitentitel{ top: 0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    height: 206px;
                    border-top: 56px solid #ffffff;
                    border-left: 160px solid #ffffff;
                    border-right: 160px solid #ffffff;}

#inhalte{ position: absolute;
          top: 206px;
          left: 160px;
          right: 160px;
          bottom: 60px;
          background: #cccccc;
          z-index: 2;
          overflow: auto;}
* html #inhalte{ top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 height: 100%;
                 width: 100%;
                 border-style: solid;
                 border-color: #ffffff;
                 border-width: 206px 160px 60px 160px;}

#schmuckleiste{ position: absolute;
                right: 0;
                top: 56px;
                bottom: 60px;
                width: 160px;
                background: #00ff00;
                z-index: 5;}
* html #schmuckleiste{ top: 0;
                       height: 100%;
                       width: 160px;
                       border-top: 56px solid #ffffff;
                       border-bottom: 60px solid #ffffff;}

#fussleiste{ position: absolute;
             bottom: 0;
             left: 0;
             height: 60px;
             width: 100%;
             background: #ffff00;
             z-index: 6;}
 //-->
</style>
</head>
<body>
<div id="head-line">head-line</div>
<div id="navigation">Navigation</div>
<div id="seitentitel">Seitentitel</div>
<div id="inhalte">
  <h3>Inhalt</h3>
  <div style="height: 1000px; margin: 6px; border: 1px dashed #ffffff;">
  <h4>Höhendiv zum Erzwingen von Höhe</h4>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
   tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi ...
  </div>
  <div>&nbsp;</div><!-- Abstandhalter zum unteren Rand -->
</div>
<div id="schmuckleiste">Schmuckleiste</div>
<div id="fussleiste">Fußleiste</div>
</body>
</html>
Eine Positionierung für IE und Non-IEs habe ich kommentiert. Die anderen funktionieren ähnlich.

Das Ganze funktioniert im IE 5.0, IE 5.5, IE 6, Netscape 7.1, Opera 7.54 und Firefox 1.0.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück