MrPutty: CSS / HTML Layout - Was, Wann und Wo...

Hallo zusammen!

Gleich vorneweg, das Beispiel, welches mich zur Zeit beschäftigt...

Anforderungen:

  • Website mit fester Breite, horizontal zentriert;
  • Kopf und Seitenleiste (Menu) fix;
  • Inhaltsbereich mit dynamischer Länge, scrollbar;

------------------------
  -         Kopf         -
  ------------------------
  -   -                  -
  - M -                  -
  - E -                  -
  - N -    Inhalt        -
  - U -                  -
  -   -                  -
  ------------------------

  • Fehlerfrei in IE7/6/5 - FF2 - Opera
  • Suchmaschinen freundlich

Es gibt mehrere Möglichkeiten dies umzusetzen. Jede ist aber an irgendeiner Stelle unpassend. Die Trennung von Inhalt und Layout/Design erscheint durchaus Sinnvoll - hier bietet sich ein CSS Layout an:

  • CSS Layout: Unterstütz alle obigen Anforderungen, außer der Browser-kompabilität. IE7, FF2 und Opera 9.02 kommen damit bestens zurecht. Ältere Browser jedoch, haben hier Schwierigkeiten. Abhilfe scahfft hier z.B. der IE7 Patch von Dean Edwards. Dieser verhilft den Versionen IE<7 u.a. zu Position:Fixed und anderen IE7 Fähigkeiten.

..Javascript muss jedoch aktiviert sein.
  ..IE6 unter XP erzeugt zuerst eine Warnmeldung (ActiveX/Scripting)
  ..Resize funktioniert nicht. Div Conatiner verschwinden.

  • HTML / Tabellen Layout: Mir ist keine Möglichkeit bekannt, die feststehenden Elemente umzusetzen. Zwar bieten Frames diese Funktion, aber die Suchmaschinen Tauglichkeit bleibt auf der Strecke. Scheinbar gilt diese Art der Programmierung auch nicht mehr als Zeitgemäß.

Wie ist also obige Aufgabenstellung zu lösen - und zwar Möglichst ohne Hacks, Tricks und Co? Hiebei möchte ich nicht nach dem fertigen Code fragen, sondern welche Techniken miteinander zu kombinieren sind um ein ordentliches Ergebnis zu erzielen.

"Mit den Nerven am Ende",

MrPutty

** Remove SPAM from Mailadd. **

  1. Ahoi MrPutty,

    Anforderungen:

    ...

    Es gibt mehrere Möglichkeiten dies umzusetzen. Jede ist aber an irgendeiner Stelle unpassend. Die Trennung von Inhalt und Layout/Design erscheint durchaus Sinnvoll - hier bietet sich ein CSS Layout an:

    korrekt

    • CSS Layout: Unterstütz alle obigen Anforderungen, außer der Browser-kompabilität.

    stimmt ja garnicht *g* evt. würde es sich anbieten dem Inhaltsdiv
    eine feste größe zu geben und es per overflow scrolbar zu machen.

    "Mit den Nerven am Ende",

    tjaja, der gute alte IE,... immer für was gut :D

    MfG

      • CSS Layout: Unterstütz alle obigen Anforderungen, außer der Browser-kompabilität.

      stimmt ja garnicht *g* evt. würde es sich anbieten dem Inhaltsdiv
      eine feste größe zu geben und es per overflow scrolbar zu machen.

      Hallo Daniel,

      danke für Deine Antwort. Das würde einen weitern Scrollbalken erzeugen, so wie Harlequins Vorschlag - richtig?

      MfG MrPutty

      1. Ahoi MrPutty,

        danke für Deine Antwort. Das würde einen weitern Scrollbalken erzeugen, so wie Harlequins Vorschlag - richtig?

        jopp, unsere vorschläge sind fast identisch und das ergebniss so gut wie das gleiche.

        MfG

  2. Yerf!

    Anforderungen:

    • Website mit fester Breite, horizontal zentriert;
    • Kopf und Seitenleiste (Menu) fix;
    • Inhaltsbereich mit dynamischer Länge, scrollbar;

    Das sollte eigentlich auch mit position:absolut erreichbar sein. Wichtig ist dann dabei nur, das nicht die komplette Seite scrollen darf, sondern nur der Inhalts-DIV (mittels overflow:auto). Dadurch wird erreicht, dass die positionierten Elemente fixiert bleiben.

    Gruß,

    Harlequin

    1. Das sollte eigentlich auch mit position:absolut erreichbar sein. Wichtig ist dann dabei nur, das nicht die komplette Seite scrollen darf, sondern nur der Inhalts-DIV (mittels overflow:auto). Dadurch wird erreicht, dass die positionierten Elemente fixiert bleiben.

      Hallo Harlequin,

      wenn ich das richtig verstehe, hieße das, der Inhaltscontainer bekäme seinen eigenen Scrollbalken, zusätzlich zu dem des Viewport?

      Mfg, MrPutty

      1. Yerf!

        wenn ich das richtig verstehe, hieße das, der Inhaltscontainer bekäme seinen eigenen Scrollbalken, zusätzlich zu dem des Viewport?

        Ja, der Inhalt wird über eine Scrollbar am DIV erreicht. Allerdings sollte in diesem Fall der Viewport keine Scrollbars bekommen (die Elemente dürfen nicht größer als das Fenster sein).

        Gruß,

        Harlequin

        1. wenn ich das richtig verstehe, hieße das, der Inhaltscontainer bekäme seinen eigenen Scrollbalken, zusätzlich zu dem des Viewport?

          Ja, der Inhalt wird über eine Scrollbar am DIV erreicht. Allerdings sollte in diesem Fall der Viewport keine Scrollbars bekommen (die Elemente dürfen nicht größer als das Fenster sein).

          Danke, Harlequin! Habe gerade überprüft, welche Browser "overflow:auto" verstehen - scheinen fast alle gebraüchlichen zu können!
          Selbst ohne Scrollbalken ist die Leiste dafür im Viewport vorhanden. Zwar bin ich mir nicht sicher, aber ich glaube mal etwas gesehen zuhaben um den Scrollbalken / Leiste im Viewport auszublenden.

          **"Yerf!" ....???

          MfG - MrPutty

          1. Hey - html, body {overflow:hidden} funktioniert anscheinend von IE5 bis 7, sowie in Opera und FF2. Feine Sache!
            Vielen, vielen Dank nochmals für den Tip! Nun bin ich wieder glücklich - bis zum nächsten Hindernis ;-)

            MfG MrPutty

          2. Yerf!

            Selbst ohne Scrollbalken ist die Leiste dafür im Viewport vorhanden. Zwar bin ich mir nicht sicher, aber ich glaube mal etwas gesehen zuhaben um den Scrollbalken / Leiste im Viewport auszublenden.

            Ein overflow:hidden für Body sollte helfen.

            **"Yerf!" ....???

            Hehe... Begrüßung in Fuchssprache[1] ;-)

            Gruß,

            Harlequin

            [1] für Interessierte: die Definition - der 3. Abschnitt von Revar

  3. Als Zeitgemäß wäre noch Flash zu nennen.
    Vorteile: Absolut frei in der Gestaltung, definitiv gleiche
    Darstellung in allen Browsern, alles erdenkliche machbar (Video,
    3D, Sound, Animationen etc.)
    Nachteile: Flash-Plugin im Browser erforderlich, Suchmaschinen-
    unfreundlich (wenn man auf eine Platzierung auf Seite 34564 Wert
    legt *grins*), kostenpflichtiges Programm erforderlich.

    1. Hallo Steffi

      ..., kostenpflichtiges Programm erforderlich.

      Wirklich?
      Flash - Programm kostenlos
      Flash als Bestandteil von SELFHTML 9.0

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!