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)

Inhaltsbereich

17.2.2 Die Hintergrundgrafik von #wrapper anpassen

Die Ursache für die Probleme mit der Sidebar ist die Hintergrundgrafik: Die Grafik farbverlauf_dreispaltig.jpg hat eine feste Breite von 720px mit links und rechts jeweils 130 eingefärbten Pixeln. Dazwischen liegen genau 460 weiße Pixel. Wenn der Textbereich also zufällig 460px breit ist, dann passt auch die Hintergrundgrafik, ansonsten eher nicht.

Da man den weißen Bereich in der Grafik nicht flexibilisieren kann, müssen Sie eine andere Technik benutzen, die im Abschnitt über Faux Columns im Tipp bereits angesprochen wurde:

  • Der Wrapper bekommt die Hintergrundgrafik farbverlauf.jpg aus dem Kopfbereich. Wenn Sie keinen Farbverlauf benötigen, können Sie statt einer Hintergrundgrafik auch einfach nur eine bestimmte Farbe definieren.
  • Der Textbereich bekommt einen weißen Hintergrund, damit der Text lesbar bleibt.

Dies wird im folgenden ToDo gemacht.

ToDo: Dreispaltiges, teilweise flexibles Layout (2)
  1. Öffnen Sie das Stylesheet bildschirm.css in einem Editor.
  2. Ändern Sie den Style für #wrapper wie folgt:

    #wrapper {
      background: #ffe574 url(farbverlauf.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;
    }

  3. Geben Sie dem Textbereich einen weißen Hintergrund:

    #textbereich {
      background-color: white; /* weißer Hintergrund */
      padding: 20px 10px 20px 20px;
      margin-left: 130px; /* Platz für #navibereich */
      margin-right: 130px; /* Platz für #sidebar */
    }

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

Mit dieser einfachen Änderung passt sich das Layout einem kleinen Browserfenster flexibel an:

Abbildung 17.7: Sidebar passt – Layout in kleinem Browserfenster
Abbildung 17.7: Sidebar passt – Layout in kleinem Browserfenster

Und auch in einem größeren Browserfenster ist die Sidebar farblich hinterlegt:

Abbildung 17.8: Sidebar passt – Layout in großem Browserfenster
Abbildung 17.8: Sidebar passt – Layout in großem Browserfenster

Einziger Nachteil dieser Technik ist, wie gesagt, dass der farbige Wrapper zwischen Text- und Fußbereich durchscheint, wenn der Textbereich kürzer als eine der gefloateten Randspalten ist.

Genau genommen könnte man im Style für den Kopfbereich die Deklaration für den background übrigens entfernen, denn sie ist identisch mit der im Wrapper. Da der Kopfbereich innerhalb des Wrappers sitzt, wird der Farbverlauf auch im Kopfbereich sichtbar, sofern für den Kopfbereich kein eigener Hintergrund definiert wurde.

Spalten ohne Hintergrundfarbe machen weniger Probleme

Nachdem das Problem mit dem farbigen Hintergrund für die beiden Randspalten gelöst ist, soll hier der Hinweis nicht fehlen, dass Randspalten ohne Hintergrundfarbe dieses Problem gar nicht erst gehabt hätten. Achten Sie bei den nächsten Surfgängen mal darauf, welche Randspalten farblich abgesetzt sind und welche nicht.