Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

17.1 Zweispaltiges, teilweise flexibles Layout

Bei flexiblen Layouts bekommen die div-Bereiche für das Layout eine Breitenangabe in Prozent und orientieren sich daher an der Größe des Browserfensters. Mit einer Breite von 80% für #wrapper hat dieser immer eine Breite von 80% des Browserfensters, egal wie groß oder klein es gerade ist.

Der Vorteil ist, dass gerade bei großen Bildschirmauflösungen die zur Verfügung stehende Bildschirmfläche besser ausgenutzt wird. Dieser Vorteil kann aber auch zum Nachteil geraten, denn bei sehr breiten (oder sehr schmalen) Browserfenstern erschwert die zu große (oder zu kleine) Zeilenlänge des Textes das Lesen. Die Definition einer maximalen Breite mit max-width beugt diesem Nachteil vor.

Im Folgenden wird der auf float und margin basierende Zweispalter aus Kapitel 16.1 so geändert, dass die Webseiten eine flexible Breite in Prozent haben. Der Navigationsbereich behält vorerst seine feste Breite, während der Textbereich als Block-Element ohne Breitenangabe immer den zur Verfügung stehenden Platz ausfüllt.

Schematisch dargestellt sieht dieses Layout so aus:

Abbildung 17.1: Schema für teilweise flexibles zweispaltiges Layout
Abbildung 17.1: Schema für teilweise flexibles zweispaltiges Layout

Zur Umsetzung dieses Layouts sind im CSS nur wenige Änderungen erforderlich, die im folgenden ToDo erledigt werden. Die Erklärungen folgen danach.

ToDo: Zweispaltiges, teilweise flexibles Layout
  1. Kopieren Sie die Dateien aus dem Basisordner für diesen Abschnitt in einen Übungsordner.
  2. Öffnen Sie das Stylesheet bildschirm.css in einem Editor.
  3. Ändern Sie den Style für #wrapper wie folgt:

    #wrapper {
      background: white url(farbverlauf_zweispaltig.jpg) repeat-y left top;
      color: black;
      width: 80%; /* Breite in Prozent */
      min-width: 660px; /* Minimale Breite in px */
      max-width: 72em; /* Maximale Breite in em */
      margin: 10px auto;
    }

  4. Speichern Sie die Webseiten und betrachten Sie sie im Browser.

Das CSS benutzt für drei Eigenschaften drei verschiedene Einheiten, und das aus gutem Grund. Mit width: 80% wird erreicht, dass die Webseite (oder genau genommen #wrapper) immer 80% des sichtbaren Bereichs vom Browserfenster (auch viewport genannt) einnimmt.

Die zweite Anweisung min-width: 660px schränkt dies ein und sorgt dafür, dass das Layout niemals schmaler als 660px wird. So verhindern Sie, dass die Layoutbereiche ineinander geschoben und unbenutzbar werden. Wird der Viewport kleiner als 660px, wird ein horizontaler Scrollbalken sichtbar, aber das Layout bleibt erhalten:

Abbildung 17.2: Schmaler wird’s nicht – Layout in kleinem Browserfenster
Abbildung 17.2: Schmaler wird’s nicht – Layout in kleinem Browserfenster

Last, not least folgt mit max-width: 72em noch eine maximale Breite, die durch die Einheit em an die Schriftgröße gekoppelt ist. So verhindern Sie, dass die Zeilen im Textbereich zu lang und somit schlecht lesbar werden:

Abbildung 17.3: Breiter wird’s nicht – Layout in großem Browserfenster
Abbildung 17.3: Breiter wird’s nicht – Layout in großem Browserfenster

Diese Mischung aus verschiedenen Einheiten für die drei Eigenschaften zur Definition der Breite ist ideal, um das Verhalten der Webseite in verschiedenen Situationen zu optimieren, wobei die genauen
Werte für die drei Eigenschaften von dem zu gestaltenden Layout und der Menge des auf den Webseiten vorhandenen Inhalts abhängen. Nebenbei bemerkt: In diesem Beispiel wird der Trick zur scheinbaren Verlängerung der Hintergrundgrafik zum ersten Mal richtig nützlich.