nicht angemeldet
+ Positionierung: Problem ??
Hallo,
ich möchte eine Seite (die dann per PHP angzeigt werden soll, das nur nebenbei) in drei Bereiche aufteilen:
|----------------------------------|
| Kopfbereich |
|---|
| Body (content) |
| ---------------------------------- |
| Footer |
| ---------------------------------- |
So soll's ungefähr aussehen; dabei ist der obere Kopf- und der untere Footer-Bereich per CSS (position: absolute; bottom: 0px bzw. top: 0px; ...) positioniert.
Ergebnis: egal wie groß das Window ist, diese beiden Bereiche "kleben" immer am oberen bzw. unteren Rand.
Nun zum Problem:
der mittlere Bereich (Body) soll immer den restlichen übrig zur Verfügung stehenden Bereich in der Mitte bekommen.
In diesem Bereich soll u.a. ein Menü angezeigt werden (in einem div oder span -Bereich):
1. wie kann ich diesem Menü die genaue Start-Pos vom oberen Rand mitteilen ? Momentan ist der Kopfbereich in der Höhe nicht definiert, sondern passt sich sozusagen an den Inhalt dort an.
Wenn ich dessen Höhe per CSS fix vorgebe (height: ??px;) könnte ich doch dann
Body.css ... { top: height-von-Kopfbereich; }
schreiben ? Oder ?
2. Zum anderen würde ich gerne im Body-Bereich in der Mitte davon einen kurzen Text von oben und unten zentrieren.
Bisher in meiner Vorgängerseite hab ich das mit einer blinden Tabelle (width und height auf 100% gesetzt) gemacht; wenn ich das jetzt aber versuche, dann ist natürlich die Tabelle 100% hoch aber ragt unten über den Footer-Bereich hinaus, so dass man scrollen muss/kann und der Footer dann plötzlich mitten im Bildschirm steht ???
Frage: Wie kann ich (einfach) den zur Verfügung stehenden Platz für den Body-Bereich in Erfahrung bringen ?
Ok, viel Text, aber hoffentlich könnt ihr mir ein wenig auf die Sprünge helfen ?
Danke.
Michael
-
ich möchte eine Seite (die dann per PHP angzeigt werden soll, das nur nebenbei) in drei Bereiche aufteilen:
|----------------------------------|
Kopfbereich Body (content) ---------------------------------- Footer ---------------------------------- So soll's ungefähr aussehen; dabei ist der obere Kopf- und der untere Footer-Bereich per CSS (position: absolute; bottom: 0px bzw. top: 0px; ...) positioniert.
der mittlere Bereich (Body) soll immer den restlichen übrig zur Verfügung stehenden Bereich in der Mitte bekommen.
In diesem Bereich soll u.a. ein Menü angezeigt werden (in einem div oder span -Bereich):- wie kann ich diesem Menü die genaue Start-Pos vom oberen Rand mitteilen ?
Falscher Ansatz. Wenn Dein Kopfbereich als erstes in der Datei steht, wird er auch automatisch ganz oben angezeigt, d.h. das position:absolute;top:0 ist vollkommen überflüssig.
Gleiches gilt für den Fußbereich. Wenn Du diesen (sinnigerweise) als letztes im HTML-Dokument hast, wird er auch ganz unten angezeigt - position:absolute;bottom:0 ist ebenfalls überflüssig.Du kannst ganz einfach
<div>
Mein schönstes Ferienerlebnis
</div>
<div>
Ferien bei Oma und Opa.
</div>
<div>
Geschrieben von Michael.
</div>schreiben, ohne position einsetzen zu müssen.
- Zum anderen würde ich gerne im Body-Bereich in der Mitte davon einen kurzen Text von oben und unten zentrieren.
Das wird sehr schwierig werden, weil CSS-formatierte Dokumente die Fensterhöhe nicht kennen. Deine drei Bereiche werden immer nur so hoch sein, wie es benötigt wird (Ausnahme: gesetztes min-height).
Somit wird auch Dein mittlerer Bereich nur die Höhe einer Zeile haben, wenn nur eine Zeile drin ist - Zentrieren sinnlos.Frage: Wie kann ich (einfach) den zur Verfügung stehenden Platz für den Body-Bereich in Erfahrung bringen ?
Du könntest die Höhe des Fensters sowie der Kopf- und Fußbereiche per Javascript/DOM auslesen und dem mittleren Bereich eine entsprechende Mindesthöhe verpassen. Dummerweise kennt der IE min-height nicht (zumindest nicht in Version 5, ob's in 6 besser ist weiß ich nicht)..
Gruß,
soenk.e-
Hi,
danke für die schnelle Antwort.
Beim Durchlesen deiner Antwort ist mir aufgefallen, dass ich vergaß zu erwähnen, dass der Header und der Footer so platziert sein sollen, dass sie wirklich am Rand kleben, also ohne Platz dazwischen. In diesem Fall sind die position: .. schon sinnvoll (denke ich) weil damit unabhängig vom restlichen Inhalt die beiden Bereiche immer am Rand sind.
Dein Tipp mit dem Auslesen könnte vielleicht klappen, wenn ich dem Header und dem Footer (bereits passiert) eine feste Höhe zuweise und dann die sichtbare Bildschirmhöhe minus die beiden Werte habe und diese Höhe dann einer blinden Tabelle zuweise, kann ich doch auf Umwegen das genannte in der Mitte zentrieren (?).
Gruß
Michael-
Beim Durchlesen deiner Antwort ist mir aufgefallen, dass ich vergaß zu erwähnen, dass der Header und der Footer so platziert sein sollen, dass sie wirklich am Rand kleben, also ohne Platz dazwischen. In diesem Fall sind die position: .. schon sinnvoll (denke ich) weil damit unabhängig vom restlichen Inhalt die beiden Bereiche immer am Rand sind.
Welchen Rand meinst Du denn genau? Mit position:absolute klemmst Du die Elemente an den Rand des Elternelements, d.h. egal ob mit oder ohne position:absolute (und top/bottom:0), erstes und letztes Element werden _immer_ am jeweiligen äußersten Rand des Elternelements kleben. Möchtest Du die Elemente ganz an den Rand des Fensters, musst Du die Randbereiche margin und padding des Elternelements auf 0 setzen (hier: <body>).
Du kannst Dir das unter [http://kino-fahrplan.de/programm/ufa] anschauen. Die breiten, schwarzen Balken (div.cache) kleben ohne Einsatz von top oder bottom von alleine ganz oben bzw. unten am Dokumentenrand (n.b. das position:relative hat andere Gründe).Falls Du mit "Rand" den Fensterrand als Referenzpunkt (im Gegensatz zum Dokumentenrand) meinst: Diese Idee wirst Du Dir vorerst aus dem Kopf schlagen müssen, weil der IE das dazu benötigte Attribut position:fixed nicht versteht.
Nur zur Sicherheit: Fensterrand und Dokumentenrand sind oben und links die gleichen, unten und rechts wird der Dokumentenrand vom Inhalt bestimmt.
Dein Tipp mit dem Auslesen könnte vielleicht klappen, wenn ich dem Header und dem Footer (bereits passiert) eine feste Höhe zuweise und dann die sichtbare Bildschirmhöhe minus die beiden Werte habe und diese Höhe dann einer blinden Tabelle zuweise, kann ich doch auf Umwegen das genannte in der Mitte zentrieren (?).
Du könntest sogar ganz auf eine Layouttabelle verzichten und einfach das mittlere <div>-Element entsprechend bearbeiten.
Gruß,
soenk.e-
Hallo,
Danke für die Antwort!
Gruß
Michael
-
-