In HTML eine Sidebar gestalten - so geht's mit CSS

Die folgende Anleitung wird ein Layout mit vier Teilen erstellen: Einen Kopfbereich ("header"), die Sidebar, einen Hauptbereich ("content") und eine Fußzeile ("footer"). Dabei werden lediglich Beispielsfarben verwendet und keinerlei weitere Formatierungen erstellt, sodass Sie zum Beispiel selbst die gewünschte Schriftart oder Farben festlegen bzw. ändern müssen.

Grundgerüst für die HTML-Seite

Um für Ihre Website ein Layout mit einer Sidebar zu erstellen, müssen Sie im Prinzip nur wenige Zeilen HTML-Code schreiben und diesen mit CSS gestalten:

1. Zunächst erstellen Sie einen DIV-Bereich ("container"), der alle vier Bereiche umfasst, und unterteilen diesen dann in die einzelnen Bereiche. Schreiben Sie dafür in den Body-Bereich zum Beispiel: 
   <div id="container">
   <div id="header"><h1>Header</h1></div>
   <div id="sidebar"><h1>Navigation</h1></div> 
   <div id="content"><h1>Hauptbereich</h1></div>
   <div id="footer"><h1>Footer</h1></div>
   </div> 
2. Nun müssen Sie sich nur noch um die Gestaltung der DIV-Bereiche kümmern. Schreiben Sie dazu im Head-Bereich "style></style", um einen CSS-Definitionsbereich einzufügen, in welchem Sie die folgenden Gestaltungen schreiben.
3. Kümmern Sie sich zunächst um den Container, indem Sie diesem eine bestimmte Breite zuweisen und diesen - wenn Sie möchten - zentriert auf der Website darstellen lassen. Dies könnten Sie zum Beispiel mit "#container {width:960px; margin:20px auto;}" machen.
4. Danach können Sie den Kopf- und Fußbereich gestalten. Zum Beispiel könnten Sie hierbei eine bestimmte Hintergrundfarbe und Schriftfarbe einstellen sowie den Text zentriert mit etwas Abstand darstellen lassen. Dabei haben Sie die Möglichkeit, beide Bereiche gleichzeitig zu formatieren, indem Sie diese nur mit einem Komma trennen: #header, #footer {text-align:center; background: #777; color:#fff; height:75px; padding:5px}
5. Der vorletzte Schritt besteht darin, dass Sie die Sidebar und den Hauptbereich nebeneinander darstellen lassen. Dafür müssten Sie beiden Bereichen eine bestimmte Breite zuweisen und mit "float" ("fließen") einstellen, dass ein Bereich dargestellt wird und dann von dem nachfolgendem Bereich umflossen wird. Schreiben Sie für die Sidebar zum Beispiel #sidebar {float:left; width:250px; min-height:100px; background:#eee;} und für den Hauptinhalt #content {float:left; width:690px; text-align:left; padding-left: 5px;}.
6. Zuletzt müssen Sie nur noch den Footer so formatieren, dass dieser nicht in den Bereich der beiden vorherigen Elemente (Sidebar und Hauptbereich) hineinfließt, sondern erst nach diesen dargestellt wird. Dies machen Sie mit "clear:both;", wodurch Sie eine Fortsetzung unterhalb der vorherigen Elemente erzwingen. Schreiben Sie nun also: #footer {clear:both;}

Sidebar-Inhalt gestalten

Sobald Sie das grobe Layout Ihrer HTML-Seite festgelegt haben, können Sie in wenigen Schritten eine einfach Navigation für die Sidebar erstellen.

1. Diese könnten Sie zum Beispiel mit einer Aufzählung machen, wobei Sie dann die Bulletpoints einfach ausblenden lassen. Erzeugen Sie dafür zunächst eine simple Aufzählung im DIV-Bereich "sidebar", in der Sie die Links zu einem Bereich Ihrer Website anbieten. Dies könnte zum Beispiel so aussehen: <ul><li><a href="">Link 1</a></li><li><a href="">Link 2</a></li><li><a href="">Link 3</a></li></ul>
2. Nun müssen Sie diese Aufzählung nur noch mit CSS gestalten. Dabei könnten Sie zum Beispiel einstellen, dass die Aufzählung keinen (Außen-)Abstand hat und die Aufzählungspunkte nicht zu sehen sind. Dafür müssten im Style-Bereich bspw. schreiben: #sidebar ul {margin: 0px; padding: 0px; list-style: none;}
3. Dadurch würden die Links lediglich untereinander sein. Nun könnten Sie die einzelnen Aufzählungspunkte ("li") noch gestalten, also zum Beispiel einen unteren Rahmen und einen Hintergrund festlegen, der sich dann beim Fahren mit der Maus über den Aufzählungspunkt ändert ("hover"). Dies könnten Sie bspw. mit wenigen Zeilen CSS-Code machen:
   #sidebar ul li {border-bottom: 1px dotted black; background-color: #bbb;}
   #sidebar ul li:hover {background-color: #ccc;} 
4. Kümmern Sie sich zuletzt um die Links. Diesen könnten Sie eine Farbe bzw. Hover-Farbe zuweisen und den Text mit etwas Abstand darstellen lassen (padding):
   #sidebar ul li a {padding: 10px; display: block;color: #000; text-decoration: none;}
   #sidebar ul li a:hover {color: blue;}

Nun haben Sie eine Sidebar erstellt, in der untereinander Links angezeigt werden, die farblich gestaltet sind und das Farbschema beim Drüberfahren mit der Maus ändern. Sie können sich den fertigen HTML- und CSS-Code bei Sourcepod anschauen.