nicht angemeldet
DIVs, die sich über die gesamte Fläche erstrecken
Hallo,
ich möchte eine Webseite erstellen, die in drei Bereiche für Titel, Navigation und den eigentlichen Inhalt unterteilt ist, wobei sich die einzelnen Bereiche stets dem jeweils zur Verfügung stehenden Platz anpassen sollen. Zur Realisierung würde ich gern CSS dafür verwenden. Das leere Grundgerüst sieht folgendermaßen aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
color:#000000;
background-color:#ffffff;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px
}
#titel {
position:absolute;
top:0px;
left:0px;
right:0px;
height:140px;
color:#000000;
background-color:#ffffff;
overflow:hidden
}
#navi {
position:absolute;
top:140px;
left:0px;
width:165px;
bottom:0px;
color:#000000;
background-color:#ebebeb;
overflow:hidden
}
#inhalt {
position:absolute;
top:140px;
left:165px;
right:0px;
bottom:0px;
color:#ffffff;
background-color:#000000;
overflow:scroll
}
</style>
</head>
<body>
<div id="titel"></div>
<div id="navi"></div>
<div id="inhalt"></div>
</body>
</html>
Opera und Firefox zeigen das gewünschte Ergebnis, nur der IE zerhackt das Layout komplett :-( Was muß ich in dem Stylesheet ändern, damit die Seite auch im IE (einigermaßen) korrekt angezeigt wird.
Vielen Dank im Voraus.
Daniel
-
Hallo Daniel,
du könntest die absolute Positionierung weglassen und mit 'float' arbeiten. Nur dem Navi-Div gibst du eine feste Breite.
Mit freundlichen Grüßen
André
-
Hi,
float ist schonmal eine gute Idee, zumal dann auch kein Inhalt einfach verschwinden kann, wie Du es jetzt über overflow:hidden provozierst.
Das funktioniert übrigens deswegen so nicht im IE, weil dieser nixcht mehr als zwei Angaben zur Position interpretiert.freundliche Grüße
Ingo-
Hallo,
danke für die Hilfe. Ich habe das Stylesheet folgendermaßen abgeändert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">body {
margin:0px
}#titel {
float:none;
height:140px;
color:#000000;
background-color:#336699;
}#navi {
float:left;
width:165px;
color:#000000;
background-color:#ebebeb;
}#inhalt {
float:none;
color:#ffffff;
background-color:#000000;
}
</style>
</head>
<body>
<div id="titel">Text</div>
<div id="navi">Text</div>
<div id="inhalt">Text<br>Text</div>
</body>
</html>Die Darstellung ist jetzt in allen Browsern gleich, wenn man davon absieht, daß Opera 'nen Trauerrand ringsrum läßt - kann ich aber verschmerzen. Allerdings sind jetzt Navigation und Inhalt nur noch so hoch wie der jeweils angezeigte Inhalt. Dies führt dazu, daß der Inhaltsbereich unterhalb der Navigation weitergeht, wenn dort mehr Inhalt steht (was nicht ganz unwahrscheinlich ist). Wie kann ich erreichen, daß diese beiden Bereiche grundsätzlich bis an den unteren Fensterrand reichen? Wenn darüber hinaus mehr Platz benötigt wird, als insgesamt zur Verfügung steht, erhalte ich Scrollbalken für die gesamte Seite und nicht nur für den Inhaltsbereich.
Grüße,
Daniel-
Hi,
Allerdings sind jetzt Navigation und Inhalt nur noch so hoch wie der jeweils angezeigte Inhalt.
dies ist so vorgesehen.
Dies führt dazu, daß der Inhaltsbereich unterhalb der Navigation weitergeht, wenn dort mehr Inhalt steht
Du kennst margin?
Wie kann ich erreichen, daß diese beiden Bereiche grundsätzlich bis an den unteren Fensterrand reichen?
Du könntest eine entsprechene height für den IE und min-height für modernere Browser angeben.
freundliche Grüße
Ingo-
Hallo,
Allerdings sind jetzt Navigation und Inhalt nur noch so hoch wie der jeweils angezeigte Inhalt.
dies ist so vorgesehen.Ok, sehe ich ein. Klingt logisch, so wie es angegeben war.
Dies führt dazu, daß der Inhaltsbereich unterhalb der Navigation weitergeht, wenn dort mehr Inhalt steht
Du kennst margin?Guter Hinweis, damit bin ich zumindest den Umfluß los ...
Wie kann ich erreichen, daß diese beiden Bereiche grundsätzlich bis an den unteren Fensterrand reichen?
Du könntest eine entsprechene height für den IE und min-height für modernere Browser angeben.Eine (feste) Höhenangabe zu machen ist schwierig, da ich die Fenstergröße ja nicht im Voraus kenne: Bei geringer Bildschirmauflösung (oder entsprechend verkleinertem Browserfenster) erhalte ich ggf. schon einen Scrollbalken bei einer "leeren" Seite. Bei größeren Auflösungen wird u.U. unnötig Platz verschenkt. Wird der Inhalt größer als die verfügbare Fläche, scrollt außerdem das gesamte Fenster, der Titelbereich und die Navigationsleiste wären nicht feststehend. (Das war ja gerade das ungemein praktische an bottom:0px, right:0px und overflow:scroll, hier scrollt nur der Contentbereich.)
Ich denke, das Problem ist ganz ähnlich zu dem im Beitrag "Automatische Höhe" (http://forum.de.selfhtml.org/?t=96110&m=583954).
Was ist denn gegen einen separat scrollenden Contentbereich einzuwenden?Grüße,
Daniel-
Hi,
Du könntest eine entsprechene height für den IE und min-height für modernere Browser angeben.
Eine (feste) Höhenangabe zu machen ist schwierig, da ich die Fenstergröße ja nicht im Voraus kenne
habe ich davon gesprochen? height:100% für ein die Seite umspannenden Container funktioniert im IE und min-height in modernen Browsern.
Was ist denn gegen einen separat scrollenden Contentbereich einzuwenden?
Im Mozilla geht das Scrollrad nicht. Außerdem paßt der Systembalken mitten in einer Seite selten zum Design.
freundliche Grüße
Ingo-
Guten Morgen,
habe ich davon gesprochen? height:100% für ein die Seite umspannenden Container funktioniert im IE und min-height in modernen Browsern.
An die Möglichkeit, relative Werte anzugeben, hatte ich nicht mehr gedacht. Aber egal was ich probiert habe, so wie es aussehen soll, sieht es leider immer noch nicht aus. Die folgende Variante ist im IE schon nah dran, nur hat man hier das bereits erwähnte Problem, daß eine leere Seite schon Scrollbalken erzeugt. Opera & Firefox zeigen sich von diesen Angaben gänzlich unbeeindruckt. (Auch die Angabe von min-height oder irgendeine Kombination aus height und min-height ändert nichts daran.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">body {
margin:0px
}#drumrum {
background-color:#ff0000;
/*min-height:100%;*/
height:100%;
}#titel {
float:none;
height:140px;
color:#000000;
background-color:#336699;
}#navi {
float:left;
width:165px;
height:100%;
/*min-height:100%;*/
color:#000000;
background-color:#ebebeb;
}#inhalt {
float:none;
margin-left:165px;
height:100%;
/*min-height:100%;*/
color:#ffffff;
background-color:#000000;
}
</style>
</head>
<body>
<div id="drumrum">
<div id="titel">Text</div>
<div id="navi">Text</div>
<div id="inhalt">Text<br>Text</div>
</div>
</body>
</html>Evtl. habe ich Deinen Vorschalg auch nicht richtig verstanden. Könntest Du mir in diesem Fall mit einem Codeschnipsel aushelfen? Danke.
Was ist denn gegen einen separat scrollenden Contentbereich einzuwenden?
Im Mozilla geht das Scrollrad nicht. Außerdem paßt der Systembalken mitten in einer Seite selten zum Design.Das mit der fehlenden Scrollradunterstützunh ist natürlich unschön, über den Rest kann man streiten, zumal es ja nicht mitten in einer Seite wäre. Davon abgesehen, ist mir das prinzipielle Layout vorgegeben, ich suche lediglich nach einer Möglichkeit, es browserübergreifend zu realisieren ...
Grüße,
Daniel-
Hi,
daß eine leere Seite schon Scrollbalken erzeugt.
body (und sogar html) kann auch ein padding haben.
Und #titel nimmt sich ja 140px, so daß Du den anderen Elementen keine Höhe geben kannst.Opera & Firefox zeigen sich von diesen Angaben gänzlich unbeeindruckt.
weil die umgebenden Elemente keine Höhe haben.
(Auch die Angabe von min-height oder irgendeine Kombination aus height und min-height ändert nichts daran.)
Gedacht war eine Kombination. height:100% witrd nur vom IE fälschlich erweitert bei überlangem Inhalt. Daher für moderne Browsern nur min-height verwenden, also z.B.
html, body, #drumrum { min-height:100%; } /* das verstehen nur modern Browser */
*html #drumrum { height:100%; } /* das setzt nur ein kaputter Browser um */freundliche Grüße
Ingo-
Hallo,
body (und sogar html) kann auch ein padding haben.
Und #titel nimmt sich ja 140px, so daß Du den anderen Elementen keine Höhe geben kannst.Verstehe ich das dann richtig, daß etwas wie: "Zeichne einen Bereich der x Punkte Abstand vom oberen Rand hat und sich über die gesamte zur Verfügung stehende Breite *und* Höhe erstreckt" über diesen Ansatz garnicht möglich ist? Immer unter der Bedingung, keine feste (Mindest-) Höhe und Breite vorzugeben und wenn der Anwender das Fenster vergrößert oder verkleinert, möge sich der so gekennzeichnete Bereich automatisch anpassen.
Grüße,
Daniel-
Hi,
Verstehe ich das dann richtig, daß etwas wie: "Zeichne einen Bereich der x Punkte Abstand vom oberen Rand hat und sich über die gesamte zur Verfügung stehende Breite *und* Höhe erstreckt" über diesen Ansatz garnicht möglich ist?
Ja. Workarounds wären x% Abstand oder Auslesen der Fensterhöhe über Javascript.
freundliche Grüße
Ingo-
Guten Morgen,
Ja. Workarounds wären x% Abstand oder Auslesen der Fensterhöhe über Javascript.
Ok, dann werden IE-Anwender wohl vorerst mit einem starren Layout leben müssen. Für alle anderen gibt es ja eine Möglichkeit ... Danke für die Hilfe.
Daniel
-
-
-
-
-
-
-
-
-