Daniel: Seitengerüst mit <div> und css

Hallo,

ich möchte das "Gerüst" einer Seite mit Hilfe von <div> und CSS gestalten.

Das Gerüst soll aus folgenden Bereichen bestehen:

  • Ein Kopf-Bereich mit fixer Höhe. Der Kopf-Bereich nimmt die
      gesamte Breite des Browsers ein.
  • Ein Fuß Bereich, ebenfalls mit fixer Höhe. Der Fuß-Bereich nimmt
      ebenfalls die gesamte Breite des Browsers ein.
  • Ein linker Rand: Dieser hat eine fixe Breite und erstreckt sich
      vom Kopfbereich bis zum Fußbereich. Er ist am linken Seitenrand
      des Browsers positioniert.
  • Ein rechter Rand. Wie der linke Rand, nur am rechten Seitenrand
      des Browsers positioniert.
  • Der Content-Bereich: Das ist der Bereich zwischen Kopf- und Fuß-
      Bereich sowie linkem und rechten Rand.

Nachfolgende Skizze soll dieses Gerüst noch einmal veranschaulichen:

+--------------------------------------------------------+
|                                                        |
| Kopf                                                   |
|                                                        |
+----------+-----------------------------------------+---+
|          |                                         | r.|
|          |                                         | R.|
| linker   |      Content                            |   |
| Rand     |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
|          |                                         |   |
+----------+-----------------------------------------+---+
| Fuß                                                    |
+----------------------------------------------------+---+

Wie könnte eine solche Realisierung aussehen?

Ich freue mich sowohl über theoretische Lösungsvorschläge als auch über konkrete Beispiele!
Ich werde alle Informationen nutzen und in weiteren Postings versuchen einen „Arbeitsstand“ dieses Threads zu hinterlegen.
Als letztes Posting erhoffe ich mir eine Lösung die beiden Arten von Vorschägen gerecht wird: den HTML-Code und eine Erklärung dazu!

Viele Grüße
Daniel

  1. Hallo,

    fang doch einfach mal selbst mit der Umsetzung an.
    Es gibt jede Menge Tutorials und Beispiele, die dir sicher weiterhelfen.
    http://www.google.de/search?hl=de&q=tutorial+css+layout&btnG=Suche&meta=

    Wenn dann konkrete Problemstellungen auftauchen, postest du eine Problembeschreibung (was hast du versucht? was willst du erreichen? wie sieht der relevante Quelltext (html und css) aus? wie verhält sich welcher Browser? u.s.w) innerhalb dieses Threads, und dir kann sicher geholfen werden ;)

    mfg NAG

    --
    signatur