Bildschirmbereich in 3 Teile teilen

[Giovanni Rena]

Hallo,

ich möchte folgendes machen.
Ich will meinen Bildschirmbereich in 3 Teile aufteilen:

• Top       (Menüleiste)
• Center    (Inhalt)
• Bottom    (Sonstige Infos - wie Impressum)

Mit folgendem CSS kann ich oben meine Menüleiste hinpositionieren:
#Space1      { background-color:#01458B; position:absolute; top:0px;  left:0px;    width:100%;  height:75px; }

Aber wie bekomme ich das ganze in die mitte und nach unten? Was noch wichtig ist, dass das ganze auch verkleinert werden kann und immer noch alles passt - ohne zu scrollen! Was fest sein soll - von der Größe ist die obere Menüleiste und die Untere, Center soll variabel sein. Oh man, wie krieg ich das nur hin, ich such schon ewig!
Hoffe mir kann jemand helfen!

Gruß Giovanni

PS: wäre auch bereit das ganze mit Tabellen zu machen (wenns nich anders geht) aber auf keinen Fall mit Frames!

[Giovanni Rena - Update]

Ist ja echt ....... kaum hab ich den Artikel geschrieben, schon find ich ne Teillösung. Habs für den unteren Bereich grad in SelfHTML gefunden:

#Space2      { background-color:#01458B; position:absolute; bottom:0px;:0px;  left:0px;  width:100%;  height:75px; }

Aber wie ich das in der Mitte hinbekomme, weiß ich auch nicht. Gut wäre eine Tabelle, in der ich dann meinen Inhalt schreiben könnte. Aber wie sag ich der Tabelle dass sie von Oben 100px gehen soll bis unten 50px? Sozusagen
start bei 100px von oben
stop bei 50px von unten

Gruß Giovanni

[Fabian St.]

Hi!

Mit folgendem CSS kann ich oben meine Menüleiste hinpositionieren:
#Space1      { background-color:#01458B; position:absolute; top:0px;  left:0px;    width:100%;  height:75px; }

Aus position:absolute solltest du auf alle Fälle verzichten - dadurch wird die Seite sehr unflexibel und passt sich schlecht an verschiedene Auflösungen an!

Verwende stattdessen margin, padding in Kombination mit em.

PS: wäre auch bereit das ganze mit Tabellen zu machen

Lieber nicht, Tabellen sind - zur Realisation des Layouts - böse ;-)
---------------------------------------------------------

Grüße,

Fabian St.

[Arx]

Hallo,

PS: wäre auch bereit das ganze mit Tabellen zu machen

Lieber nicht, Tabellen sind - zur Realisation des Layouts - böse ;-)

^^^^

Du hast das [tm] vergessen. [dsf 4.2]

SCNR
Arx

[Ingo Turski]

Hi,

genauso wie Du den oberen Bereich mit top positioniert hast, kannst Du doch auxch einen unteren mit bottom positionieren. Der mittlere bekommt dann passende margin-top bzw. -bottom.
Ein Problem bekommst Du erst, wenn der Inhalt des mittleren Bereichs nicht mehr in das Fenster paßt (viel Inhalt, kleines Fenster oder große Schrift). Ich würde daher lieber auf die ganzen Positionierungen verzichten und die Elemente einfach im Textfluß lassen; d.h. der untere Bereich ist dann am Ende der Seite und nicht des Fensters.

freundliche Grüße
Ingo

[Michael - Hannover]

Hallo,

ich möchte folgendes machen.
Ich will meinen Bildschirmbereich in 3 Teile aufteilen:

• Top       (Menüleiste)
• Center    (Inhalt)
• Bottom    (Sonstige Infos - wie Impressum)

Aber wie bekomme ich das ganze in die mitte und nach unten? Was noch wichtig ist, dass das ganze auch verkleinert werden kann und immer noch alles passt - ohne zu scrollen! Was fest sein soll - von der Größe ist die obere Menüleiste und die Untere, Center soll variabel sein. Oh man, wie krieg ich das nur hin, ich such schon ewig!

du hast also generell einen Container der die drei Teile beinhaltet (Top,Center,Bottom)
der in der Mitte des Browser-Fensters sein soll (falls möglich)
der sich variabel dem Inhalt (hier ist es Center, dass die Höhe bestimmt) anpasst ?

nüx leichter als das

Container 1 - umschließt alle anderen und wird mit CSS per Margin:auto Angaben mittig positioniert...und damits auch wirklich horizontal UND vertikal genau mittig ist und sich IMMER dem Browser Fenster anpasst...machst du um den Container 1 eine Tabelle mit den HTML Angaben für die Position (ich weiß veraltet, funktioniert aber dafür auch überall)

...und nu die drei Teile OHNE Positionierung

TOP --> feste Höhe/Breite geben, und overflow:hidden (sollte eigentlich unnötig sein)
Center --> feste Breite wär nicht schlecht, Höhe = variabel entsprechende Content
Bottom --> feste Breite/Höhe

und fertig

falls die Breite AUCH variable sein soll...ginge auch das, sieht aber ab bestimmten Browser-Fenster-Größen ziemlich blöd aus, dann lieber fixe Breiten...bissl scrollen hat noch keinem geschadet..und scrollen muß man dann so oder so