nicht angemeldet
wie bei Frameset nur mitte mit scrollbalken
Hallo!
Ich würde gerne oben und unten einen Bereich haben, der immer am Browser -Rand anliegt und sich der mittlere Bereich je nach Bildschirmauflösung unabhängig vom Inhalt entsprechend größer wird bzw. bei mehr Inhalt ein Scrollbalken erscheint ohne dass der untere Bereich "verschwindet".
Als Frameset ging das Problemlos, aber das will ich aus den bekannten nicht mehr.
Bei folgender Lösung klappt es nur im IE6, aber gar nicht im Firefox 1.5. Zu dem würde ich gerne auch den linken Bereich mit "overflow: auto" versehen, da es bestimmt auf einigen Seite mehr Menüunterpunkte geben wird, die dann über scrollen erreichbar sein sollten. Beim Versuch das so einzufügen wie im rechten Bereich mit "div und oversize", entsteht das Scrollen nur im Browser aussen und die untere Leiste verschwindet in den Scrollbereich, was ich ja gar nicht will.
Hoffentlich weiß jemand eine Lösung - vielleicht ja auch ohne Tabellen mit verschachtelten div-Container!? Ich bin da im Moment mit meinem Latein am Ende.
Vielen Dank für die Mühen im Voraus
<html>
<head>
<title>Tabellen mit Scrollen</title>
<style type="text/css">
body{
position: relative;
text-align:center;
}
</style>
</head>
<body topmargin="0" marginheight="0" marginwidth="0">
<div style="margin: 0 auto 0 auto;">
<!-- Tabelle1: folgende Tabelle füllt lückenlos den ganzen Div -->
<!-- Farbe: rot -->
<table width="950" height="100%" bgcolor="#ff0000" cellspacing="0" cellpadding="0">
<!-- ohne cellspacing und cellpadding gibt es einen (hier roten) Rand um die Tabelle -->
<tr>
<td>
<!-- Hier wird jetzt die Tabelle mit der eigentlichen Tabellenstruktur eingebaut -->
<!-- Tabelle2: Diese Tabelle füllt ebenfalls lückenlos den Div (entsprechend der oberen Tabelle 1) Farbe: grün -->
<table width="100%" height="100%" bgcolor="#00ff00" cellspacing="0" cellpadding="0">
<!-- Tabelle3: Das hier ist schon die erste Zeile -->
<tr>
<td valign="top">
<!-- valign muss top sein, damit der Inhalt ganz oben eingezeigt wird -->
<!-- 3.1: Die Tabelle füllt die ganze obere Zeile aus. Hier kann der Inhalt rein -->
<table bgcolor="#0000ff" width="100%" height="130">
<!-- Die "100%" beziehen sich auf die übergreifende Tabelle 2, dessen Größe wiederum über
dessen übergreifende Tabelle bestimmt wird -->
<tr>
<td valign="top">
Obere Leiste
</td>
</tr>
</table>
<!-- 3.1: Die Tabelle füllt die ganze obere Zeile aus. Hier kann der Inhalt rein -->
</td>
</tr>
<!-- 3: Das hier ist schon die erste Zeile -->
<!-- Tabelle4: Das hier ist die mittlere Zeile -->
<tr>
<td valign="top" height="100%">
<!-- 4.1: Die Tabelle füllt die ganze mittlere Zeile aus. Hier kann der Inhalt rein -->
<table bgcolor="#ff00ff" width="100%" height="100%" cellspacing="0" cellpadding="0">
<!-- Wenn man hier die Farbe wegnimmt, sieht man die untere Tabelle in grün! -->
<tr>
<td valign="top" width="100%" height="100%">
<!-- 6: Hier muss die Zeile in 2 Spalten unterteilt werden -->
<table width="100%" height="100%" bgcolor="#ffff00" cellspacing="0" cellpadding="0">
<!-- Farbe: orange -->
<tr>
<!-- 6.1: Die Spalte der linken Seite -->
<td height="100%" bgcolor="#B35F00">
<!-- Hier ist keine Breitenangabe notwendig -->
<!-- Erklärung: Es ist so, dass die rechte Spalte auf 100% ist und alles an Platz
beansprucht. Wenn jetzt aber der Inhalt einer Spalte die Spalte verbeitert
(durch die feste Pixelbreite), dann füllt die 100%-Spalte den ganzen Rest aus.
Der Vorteil ist dabei, dass die "Restgröße" wiederum von den verschieden engestellten
Auflösungen abhängig ist. Somit bleibt die linke Seite immer gleich, der rechte Teil
pass sich an, wenn er nicht fest (mit Pixelangabe) definiert wird.
-->
<!-- 6.1.1: Die Tabelle, die die linke Spalte füllt - Inhalt -->
<table width="150">
<!-- Mit diesem width bestimmst Du die wirkliche Breite des Linken Teils -->
<tr>
<td>
<p>Linke Seite
</p>
<p>MenüPunkt 1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</td>
</tr>
</table>
<!-- 6.1.1: Die Tabelle, die die linke Spalte füllt - Inhalt -->
</td>
<!-- 6.1: Die Spalte der linken Seite -->
<!-- 6.2: Die Spalte der rechten Seite -->
<td width="100%" height="100%" bgcolor="#006300">
<!-- 6.2.1: Die Tabelle, die die rechte Spalte füllt - Inhalt -->
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<!-- Das widht auf 100%, damit es auch wirklich alles ausfüllt -->
<tr>
<td width="100%" height="100%" bgcolor="#FFD52B">
<!-- Dieses Div füllt die ganze rechte Seite aus -->
<!-- Ich habe aber mit left-margin einen Rand eingestellt !! -->
<div style="height: 100%; background-color: #FFD52B; overflow: auto; margin-left: 8">
<p>Rechte Seite <br>
<br>
Hallo!<br>
Es sieht nicht unbedingt schön aus, was ich hier gemacht habe, aber ich wollte die einzelnen Bereiche deutlich durch die Farben trennen.. <br>
<br>
sdg</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>ssdf</p>
<p>sdf</p>
<p>sdg</p>
<p>gfgj</p>
<p>fgj</p>
<p>fgj</p>
<p>fgj</p>
<p>fgj</p>
<p>fgj</p>
<p>fgj</p>
<p>fgj</p>
<p>beim Scrollen zu sehen :) </p>
</div>
<!-- Dieses Div füllt die ganze rechte Seite aus -->
</td>
</tr>
</table>
<!-- 6.2.1: Die Tabelle, die die rechte Spalte füllt - Inhalt -->
</td>
<!-- 6.2: Die Spalte der rechten Seite -->
</tr>
</table>
<!-- 6: Hier muss die Zeile in 2 Spalten unterteilt werden -->
</td>
</tr>
</table>
<!-- 4.1: Die Tabelle füllt die ganze mittlere Zeile aus. Hier kann der Inhalt rein -->
</td>
</tr>
<!-- 4: Das hier ist die mittlere Zeile -->
<!-- 5: Das hier ist die unterste Zeile -->
<tr>
<td valign="top" height="100">
<!-- 5.1: Die Tabelle füllt die ganze untere Zeile aus. Hier kann der Inhalt rein -->
<table bgcolor="#00ffff" width="100%" height="100">
<tr>
<td valign="top">
Untere Leiste
</td>
</tr>
</table>
<!-- 5.1: Die Tabelle füllt die ganze untere Zeile aus. Hier kann der Inhalt rein -->
</td>
</tr>
<!-- 5: Das hier ist die unterste Zeile -->
</table>
<!-- 2: Diese Tabelle füllt lückenlos den ganzen Bildschirm (entsprechend der oberen Tabelle 1 -->
</td>
</tr>
</table>
<!-- 1: Diese Tabelle füllt den ganzen Bildschirm -->
</div>
</body>
</html>
-
Hallo Wolfgang,
Ich würde gerne oben und unten einen Bereich haben, der immer am Browser -Rand anliegt und sich der mittlere Bereich je nach Bildschirmauflösung unabhängig vom Inhalt entsprechend größer wird bzw. bei mehr Inhalt ein Scrollbalken erscheint ohne dass der untere Bereich "verschwindet".
ein erster Anlaufpunkt für dich könnte der Artikel zu feststehenden Footern im Tipps&tricks-Bereich von SELFHTML sein.
Zu dem würde ich gerne auch den linken Bereich mit "overflow: auto" versehen,
Das müsste man dann wohl exttra beleuchten.
Mit freundlichen Grüßen,
André--
Ein Geleitzug aus tausend Explosionen
irgendwo in den Sternen verborgen
relatives Sein zerbricht die Stille
eine Träne flüstert Gottes Wille