Immer gleich lange Spalten mit Hilfe einer Hintergrundgrafik

Jeder kennt das Problem, dass sich Elemente nicht vertikal ausrichten lassen. D. h., dass die Elemente nur so hoch werden wie ihr Inhalt. Wer keine bzw. eine Hintergrundfarbe verwendet, dürfte das Problem nicht bemerken. Aber was, wenn man verschiedenfarbige Spalten möchte?

Die Lösung

Eine elegante und einfache Lösung ist, dem übergeordneten Element bspw. body oder #wrapper eine Hintergrundgrafik, die sehr breit sein kann, aber dafür nur geringfügig hoch ist, zuzuweisen.

Diese Methode lässt sich nicht nur auf Layouts mit fester Breite, sondern auch auf flüssige Layouts mit flexiblen Spaltenbreiten, anwenden.

Mit einem Grafikprogramm eurer Wahl könnt ihr eure Hintergrundgrafiken erstellen. Die hier verwendeten Grafiken wurden alle mit Gimp erstellt.

1. Zweispalten –Layout mit fester Breite

Das folgende Beispiel hat eine Gesamtbreite von 950 Pixel, wobei die linke Spalte 300 Pixel breit ist.

HTML-Dokument


<body>
 <div id="wrapper">
  <div id="kopf">.... </div>
   <div id="links">... </div>
    <div id="rechts">.... </div>
     <div id="fuss">.... </div>
 </div>
</body>

Style-Angaben

 * {
  margin:0;
  padding:0;
}

body {
  background:#555;
  float:left;
  width:100%;
}

#wrapper {
  background-color:#ddd;
  margin:0 auto;
  width:950px;
} 
 
#kopf {
  background:#58c38b;
  height:200px;
}
 
#links {
  width:300px;
  float:left;
  background:#b4e3b4;
}

#rechts {
  width:650px;
  float:right;
  background:#e3f9e4;
}

#fuss {
  background:#58c38b;
  height:100px;
  clear:both;
}

So sieht’s bisher aus

Hintergrundgrafik erstellen

Die Hintergrundgrafik wird nun so aufgeteilt, wie es in den Style-Angaben festgelegt wurde. Aber auch die Farben sollen identisch sein.

Hier könnt ihr euch die Grafik ansehen oder kopieren»

Grafik einbinden

#wrapper {
  background-image:url(bg_wrapper.gif");
  background-repeat:repeat-y;
  background-position:0 0;
  background-color:#ddd;
  margin:0 auto;
  width:950px;
} 

Mit background-images: wird die Hintergrundgrafik dem div#wrapper-Element zugewiesen. Für die vertikale Wiederholung wird noch die Style-Angabe background-repeat: repeat-y; benötigt. Die Startposition der Grafik wird mit background-position: festgelegt.

Ihr könnt natürlich auch die Kurzschreibweise benutzen.

background:url(bg_wrapper.gif") repeat-y 0 0 #ddd;

Das war eigentlich alles und hier ist nun das Endergebnis»

Wer erfahren möchte wie Grafiken für flüssige Layouts erstellt und eingebunden werden, der sollte hier weiterlesen».

erstellt am 27.08.2011

nach oben