Tim Bade: Inhaltscontainer ausrichten?

Hallo!

Ich habe folgendes Design per CSS (DIVs) definiert:

+----------------------------------+
| HEADER 100% breit + fixed        |
+----------------------------------+
+-------+ +------------------------+
| NAVI  | | CONTENT                |
| etwa  | | soll 100% abzüglich der|
| 200   | | Breite der Navi und des|
| Pixel | | margins sein, soll     |
| breit | | scrollbar sein         |
|   +   | |                        |
| fixed | |                        |
+-------+ +------------------------+

  • Der Header nimmt 100% des Browserfensters ein und ist fixiert.
  • Die Navigation ist etwa 200 Pixel breit und auch fixiert.
  • Nun soll den CONTENT-Bereich in der Breite auch immer 100% einnehmen, abzüglich eines Außenabstands zu allen Elementen von 30 Pixel. Wenn ich schreibe width:100%; dann ist in allen Browser ein hori. Scrollbalken zu sehen. Statt oder mit display:block; klappt es auch nicht. position:absolute; oder position:relative; zeigt keine Wirkungen.

Was tun?

Danke für alle Antworten im vorraus!
Tim Bade

  1. Hallo!

    Ich habe folgendes Design per CSS (DIVs) definiert:

    +----------------------------------+
    | HEADER 100% breit + fixed        |
    +----------------------------------+
    +-------+ +------------------------+
    | NAVI  | | CONTENT                |
    | etwa  | | soll 100% abzüglich der|
    | 200   | | Breite der Navi und des|
    | Pixel | | margins sein, soll     |
    | breit | | scrollbar sein         |
    |   +   | |                        |
    | fixed | |                        |
    +-------+ +------------------------+

    Hallo !
    Also wenn ich versuche, statt eines Tabellen-Layouts ein Div-Layout zu erstellen, brauch ich in der Regel 10mal so lange, bei gleicher Performance. Soviel zum Thema Tabellen ...
    Meist klappt das auch nur, wenn ich die Container ineinander verschachtele ...
    Wenn du die unteren beiden Divs ( Navi, Content ) in einen Container packst und diesen dann auf 100% setzt, müsste es eigentlich klappen.
    Ich muß da aber auch immer ewig rumprobieren, bis das dann endlich mal klappt ...
    Gruß Frodo

    1. Hallo.

      Also wenn ich versuche, statt eines Tabellen-Layouts ein Div-Layout zu erstellen, brauch ich in der Regel 10mal so lange, bei gleicher Performance. Soviel zum Thema Tabellen ...

      Nein, soviel zu deiner "Performance".

      Meist klappt das auch nur, wenn ich die Container ineinander verschachtele ...
      Wenn du die unteren beiden Divs ( Navi, Content ) in einen Container packst und diesen dann auf 100% setzt, müsste es eigentlich klappen.
      Ich muß da aber auch immer ewig rumprobieren, bis das dann endlich mal klappt ...

      Danke, eines Beweises hätte nicht bedurft.
      MfG, at

    2. Also wenn ich versuche, statt eines Tabellen-Layouts ein Div-Layout zu erstellen, brauch ich in der Regel 10mal so lange, bei gleicher Performance.

      Na, das liegt dann wohl an noch rudimentärem Verständnis von CSS und den ganzen Prinzipien, die dem zugrunde liegen. Wenn Du mehr Erfahrung mit CSS hast, gibt sich das von selbst. Irgendwann wird es *klick* machen, und Du wirst begriffen haben, wie CSS funktioniert.

      Ein grundlegender Fehler, den CSS-Anfänger nämlich immer wieder machen ist, dass sie glauben, sie bräuchten divs für das Layout. Ein div ist aber ein Mittel zur Struktur (Semantik) des Inhalts und nicht zum Layout. divs werden nur zur Gruppierung von mehreren Elementen benötigt.

  2. Hallo.

    Wenn ich schreibe width:100%; dann ist in allen Browser ein hori. Scrollbalken zu sehen.

    Und wenn du diese Angabe weglässt? Sind dir denn die Grundlagen solcher Layouts vertraut?
    MfG, at

    1. Hallo.

      Wenn ich schreibe width:100%; dann ist in allen Browser ein hori. Scrollbalken zu sehen.

      Und wenn du diese Angabe weglässt? Sind dir denn die Grundlagen solcher Layouts vertraut?
      MfG, at

      Ja, dann wird der Bereich nur so breit wie der Text. Lösungsbeispiel? Die Grundlagen sind mir vertraut.

      1. Hallo.

        Ja, dann wird der Bereich nur so breit wie der Text.

        Ein Block-Element passt sich der Textbreite an?

        Die Grundlagen sind mir vertraut.

        Daran zweifele ich nach deiner letzten Aussage umso mehr.

        Lösungsbeispiel?

        Hast du bekommen -- wenn du die Unterseiten der genannten ebenso zu Rate gezogen hast.
        MfG, at

  3. Ich habe folgendes Design per CSS (DIVs) definiert:

    Um das auch hier mal klar zu stellen: Ein div ist HTML, nicht CSS. Wie kommt es also zu der Aussage "Ein Design per CSS (DIVs)"? Nur durch die Fehlinformation, die CSS-Anfänger immer wieder verbreiten, CSS-Layouts mache man "mit divs". Das ist völlig sinnfrei. CSS-Layouts macht man mit CSS. Die Basis dafür ist ein HTML-Code, der den Inhalt nach semantischen Gesichtspunkten strukturiert.
    Ein div ist für CSS-Layout nicht zwingend nötig, und es gibt einen Haufen Block-Elemente, die bei vielen div-Suppen von CSS-Anfängern sinnvoller wären.
    Ein div wird NUR zum Gruppieren von mehreren Elementen verwendet.

    Gruß,
    -Efchen

    1. Ja geil dich halt an diesem Ausdrucksfehler auf. *kopfschüttel*

      1. Ja geil dich halt an diesem Ausdrucksfehler auf. *kopfschüttel*

        Deine Antwort zeigt mir nur, dass Du keine Ahnung von CSS-Layout hast. Das an sich wäre ja nicht schlimm, aber diese patzige Antwort lässt halt vermuten, dass Du daran auch nichts ändern willst.
        Wenn ich mich daran "aufgeilen" würde, oder das nur ein "Ausdrucksfehler" wäre, warum erzeugen dann 90% der CSS-Anfänger immer eine semantische Katastrophe, eine div-Suppe, die in Sachen Semantik nicht besser ist, als missbrauchte Tabellen?

        1. Ja geil dich halt an diesem Ausdrucksfehler auf. *kopfschüttel*

          Deine Antwort zeigt mir nur, dass Du keine Ahnung von CSS-Layout hast. Das an sich wäre ja nicht schlimm, aber diese patzige Antwort lässt halt vermuten, dass Du daran auch nichts ändern willst.
          Wenn ich mich daran "aufgeilen" würde, oder das nur ein "Ausdrucksfehler" wäre, warum erzeugen dann 90% der CSS-Anfänger immer eine semantische Katastrophe, eine div-Suppe, die in Sachen Semantik nicht besser ist, als missbrauchte Tabellen?

          LOL, du bist echt der Hammer. xD

          Gleich kommt sowas wie: "Was soll denn diese komische Zeichenkonstruktion xD bedeuten?". Wirklich zum Lachen.

          Grüßle, Tim