Schonwieder <div> : )

[Ralle]

Hallo!

Ich habe dank Beispiel 3 (http://www.alistapart.com/d/footers/footer_css3.html) auf http://www.alistapart.com/articles/footers/
jetzt eine header-div und ein footer-div.

Jetzt möchte ich ein <div> dazwischen stecken welches oben am header- und unten am footer-<div> anliegt.
Nicht nur am oberen und so hoch wie der Inhalt ist.

Bin wie immer über jeden Tip dankbar!

mfg Ralle :D

[schwarze Piste]

Tachchen!

Aber wnn du keine Inhalte hast, die bis dort unten reichen, brauchst
du doch wahrscheinlich höchstens den "Look" eines Bereiches, der oben
und unten anliegt!?

Warum also nicht überlegen, wo man überall Hintergrundfarben/-bilder
definieren könnte? ;-)

Gruß

Die schwarze Piste

[Ralle]

Tach!

Leider fließt der Hauptinhalt der seite dann unter dem menü weiter.

Gruß, Ralle

So wäre es:
+---------------------------------------------------------+
| Header                                                  |
+------+--------------------------------------------------+
| Menü | Inhalt der Seite ...                             |
+------+  bla                                             |
|  bla                                                    |
|  bla                                                    |
|                                                         |
+------+--------------------------------------------------+
| Header                                                  |
+---------------------------------------------------------+

So soll es:
+---------------------------------------------------------+
| Header                                                  |
+------+--------------------------------------------------+
| Menü | Inhalt der Seite ...                             |
|      |  bla                                             |
|      |  bla                                             |
|      |  bla                                             |
|      |                                                  |
+------+--------------------------------------------------+
| Header                                                  |
+---------------------------------------------------------+

[schwarze Piste]

Tachchen!

Ich kenne deinen Quelltext jetzt nicht so genau, aber je nach Header
müsste man da durchaus was mit position:abolute statt float machen können?

Gruß

Die schwarze Piste

[Ralle]

Ich hab gestern angefangen die Seite zu bauen deswegen ist "sie" noch ganz schön unaufgeräum.
http://phpug-kiel.de/preview.html

Wenn ich mit position arbeite dann funktioniert dieser css box hack oder so nichtmehr.

Gruß, Ralle

[Ralle]

Was vergessen:

Wenn ich mit float arbeite und der spacer unten clear hat klappt alles.
-Dann wäre ich wieder bei der Anfangsfrage dieses Threads

Ralle

[schwarze Piste]

Tachchen!

Ungetestet:

• Content margin in Headerhöhe verpassen
• Menü, Leiste rechts und Header absolut positionieren

Gruß

Die schwarze Piste

[Ralle]

Puh!

Naaaagut wenn ich die rechte Leiste erstmal weglassen funzt es jetzt.
Wusste nie das CSS so anstrengent sein kann.

Danke!

Ralle

[Webblob]

Hallo Ralle!

Habe den Thread jetzt schon eine Weile lang verfolgt, und will jetzt auch noch meinen Senf dazugeben.

Es gibt verschiedene (CSS-) Ansätze für ein Layout. IMHO leider nicht den "perfekten" Ansatz, denn alle haben Vor- & Nachteile. Welcher Ansatz für ein Projekt der "günstigste" ist, hängt von verschiedenen Faktoren ab, wie z.B.: Art & Struktur der Inhalte, gewünschte Flexibilität des Layouts, persönliche Vorlieben, Browserkompatibilität, etc.

Ich empfehle http://css-discuss.incutio.com/?page=CssLayouts um sich einen Überblick zu verschaffen.

Ich habe dank Beispiel 3 (http://www.alistapart.com/d/footers/footer_css3.html) auf http://www.alistapart.com/articles/footers/
jetzt eine header-div und ein footer-div.

Dieser Ansatz birgt auch schon Probleme in sich, da der Footer absolut positioniert wird, somit also aus dem "normalen Fluß" herausgelöst ist. Denn ist der darüberliegende Inhalt größer (höher) als das Browserfenster, wird er vom Footer überlagert. Womit wir bei deinem aktuellen Problem/ Wunsch wären.

Jetzt möchte ich ein <div> dazwischen stecken welches oben am header- und unten am footer-<div> anliegt.
Nicht nur am oberen und so hoch wie der Inhalt ist.

Das ist afaik mit CSS bei diesem Ansatz nicht möglich, da sich der Footer ja nicht am vorhergehenden Inhalt orientiert (s.o.). Hier würde eine Variante helfen, die bei aktiviertem JavaScript den Footer unten am Browserfenster platziert, die Größe (Höhe) von Header & Footer ermittelt und ein <div> entsprechend dazwischen platziert. Bei deaktiviertem JavaScript wird der Footer "ganz normal" per CSS unterhalb (und ggf. ausserhalb des sichtbaren Bereichs des Browserfensters) des Inhalts platziert. Beispiele hierzu findest du ebenfalls auf der zuvor schon genannten Seite unter http://css-discuss.incutio.com/?page=MultiColumnLayoutWithFooterAndJavascript

Gruß Gunther