Sidebar länger als Content

Sidebar länger als Content.

Einige von Euch kennen das Problem:

Endlich das optimale Design für die eigene Homepage, ( das Blog) , aber wenn der Text nicht so lang ist, dann wandert die Sidebar über den Content und sieht nicht so gut aus.

Das Bild zeigt die derzeitige Website von stranger und da ich Stranger versprach zu erklären wie dies änderbar ist, nehme ich diese Website als Beispiel.

In der style.css des Blogs fand ich die Struktur der Website.

body{
   background-image: url(/blackbird/blackbird2.gif);
   font-family: garamond, serif;
   font-size: 11.5pt;
}

#head{
   background-image: url(/blackbird/blackbird1.gif);
   position: absolute;
   left: 0px;
   top: 0px;
   width: 800px;
   height: 350px;
   background-position: top left;
   border-right: 2px groove #999999;
}

#main{
   background-color: #ffffff;
   position: absolute;
   left: 0px;
   top: 350px;
   width: 800px;
   border-right: 2px groove #999999;
}

Da sowohl der #header wie #main auf 800px fixiert ist funktioniert folgende Background Lösung:

Das Hintergrundbild bei #body ändern

Der Website Background zeigt sich am ganzen Bildschirm so:
Weiß – der schmale dunkle Rand – die kleinen Kästchen.

Die weiße Fläche ist bis zum Rand ganz genau 800px, die kleinen Kästchen können in ihrer Breite varieren.

Das derzeitige Bild, das bei #body (blackbird2.gif) eingebunden wurde zeigt derzeit nur die kleinen Kästchen.

Methode 1:

Dieses Bild (blackbird2.gif)müßte so geändert werden:
1024x (Höhe der kleinen Kästchen)

Von Links nach Rechts:788px weiß dann 2px in der Farbe des jetzigen rechten Randes, die restliche Fläche aufgefüllt mit den kleinen Kästchen.

Methode 2:

Oder einen Screenshot der jetzigen Website machen und aus dieser einen Streifen herausschneiden – dies funktioniert nur, wenn man sehr genau arbeitet, aber es funktioniert.

Wenn dieser lange Streifen dann wieder unter blackbird2.gif abgespeichert wird, muss die CSS Angabe bei #body nur mehr so geändert werden:

body{
   background-image: url(/blackbird/blackbird2.gif)repeat-y;
   font-family: garamond, serif;
   font-size: 11.5pt;
}

Dieses repeat-y gibt an, dass das Bild nur Vertikal wiederholt werden darf.
Fertig!

Bei der Schriftgröße fand ich die Angabe:

..font-size: 11.5pt;.. 
  1. Eine fixierte Schriftgröße sperrt viele Leser aus – alle, die Brillen tragen als Beispiel.
  2. pt ist eine Größenangabe aus der Druckerei, aber nicht für Websites geeignet.
    Prozentangaben oder die Angabe:1em, 0.9em ist sinnvoll, hilfreich und einfach richtiger.
… viel Spaß beim Website Background Tüfteln ;-)