Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

17.2.1 Die Breite für #wrapper ändern

Als Basis dient das dreispaltige, auf float und margin basierende Beispiel aus Kapitel 16.2. Um dieses Beispiellayout flexibel zu gestalten, werden im folgenden ToDo zunächst einige Änderungen an #wrapper vorgenommen, ähnlich wie im vorherigen Abschnitt, nur mit etwas anderen Werten. Allerdings taucht danach beim Testen ein Problem mit der Sidebar am rechten Rand auf.

ToDo: Dreispaltiges, teilweise flexibles Layout (1)
  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_dreispaltig.jpg) repeat-y left top;
      color: black;
      width: 80%; /* Breite in Prozent */
      min-width: 720px; /* Minimale Breite in px */
      max-width: 80em; /* Maximale Breite in em */
      margin: 10px auto;
    }
  4. Speichern Sie die Webseiten und betrachten Sie sie im Browser.

Wenn Sie Glück haben und das Browserfenster genau die richtige Größe hat, sieht die Seite zunächst sogar okay aus, aber spätestens wenn Sie das Browserfenster verkleinern, zeigen sich die angekündigten Probleme mit der Sidebar:

Abbildung 17.5: Sidebar passt nicht – Layout in kleinem Browserfenster
Abbildung 17.5: Sidebar passt nicht – Layout in kleinem Browserfenster

Auch in einem größeren Browserfenster macht die Sidebar keine gute Figur:

Abbildung 17.6: Sidebar passt nicht – Layout in großem Browserfenster
Abbildung 17.6: Sidebar passt nicht – Layout in großem Browserfenster

Diese Probleme werden im nächsten Abschnitt gelöst.