Webdesign: Sidebar und Content mittig + Tricks für Hintergrundfarbe

Nachfolgend stelle ich ein einfaches Grundgerüst eines Webdesigns vor. Vielmehr ist es der Grundaufbau eines Layouts.
Die Besonderheit liegt nicht nur an HTML5 und CSS3 Techniken, sondern auch an der oft gefragten Hintergrundfarbe, welche für Sidebar und Content die gesamte Browserbreite einnimmt.

So sieht die schematische Darstellung des Layouts aus

Webdesign Aufbau: Layout-Schema

Webdesign Aufbau: Layout-Schema


Kurze Erläuterung, was wir hier mit HTML5 und CSS3 eigentlich machen wollen:

Es soll ein Header und Footer geben. Im mittleren Content-Bereich ist der eigentliche Inhalt und die Sidebar. Beide haben unterschiedliche Größen - die Sidebar hat sogar eine feste Größe.
Wir arbeiten hier also nicht mit Prozentangaben, da das einfach (finde ich) unschön ist. Der Inhalt selbst hat jedoch eine variable Größe. Da kann man auch mit festen Größen arbeiten und die Media-Queries nutzen.

Am Ende stell ich noch den Trick vor, wie man die Sidebar und den restlichen rechten Bereich bis zum Browserrand in einer Farbe einfärbt.

Hier im Webeditor live ansehen!

Das Layout für unser Webdesign: HTML Code

<header>Header</header><section><article>Artikel</article><aside>Sidebar</aside></section><footer>Footer</footer>


Wir nutzen die HTML5 Elemente: header, section, article, aside und footer und füllen diese mit etwas Inhalt vor.

CSS Code: mittels Flexbox und Margin zum Erfolg

header , footer{background-color: #7F7F7F;padding: 20px;}section{display: flex;max-width: 1000px;margin: 0 auto;}article, aside{padding: 20px;}article{flex: 1 1 0%;width: auto;background-color: #F1EFDD;}aside{width: 250px;background-color: #E2E2E2;}

Zur besseren Übersicht habe ich ein paar Farben und padding genutzt.

Mittels display: flex werden die Childs article und aside flexibel. Diese erhalten für die variable Breite flex: 1 1 0% und die Sidebar eine fixe width. Durch die margin-Angabe auto wird das ganze noch mittig ausgerichtet.

Die max-width Angabe verhindert, dass die Inhalt-Box article zu breit wird. Hier könne man auch feste width-Angaben machen und media-query nutzen.

Das Layout sieht nun so aus

Webdesign Layout: klein

Webdesign Layout: klein

Webdesign Layout: breit

Webdesign Layout: breit


Als Beispiel mal zwei verschiedene Größen des erstellten Layouts. Sieht ziemlich simple aus, oder?

Was nun noch stört, ist die Hintergrundfarbe. Wäre es nicht schön, wenn die Sidebar bis zum rechten Browserrand verlängert wird? Und, falls wir nicht weiß für den Artikel-Hintergrund nutzen, den Artikelhintergrund optisch am linken Browserrand beginnen lassen?

JA! Hier befarf es ein Trick!
Bei dem aktuellen Webmaster-Glossar.de Layout stande ich auch vor diesem Problem. Aber, ein Hintergrundbild schafft hier abhilfe.

Der Trick mit dem Hintergrundbild

Um aufwendigen Code mit DIV-Verschachtelungen zu vermeiden, außerdem um für das Problem nicht mit padding arbeiten zu müssen, kannst du ein Hintergrundbild nutzen.

Wir benötigen ein Hintergrundbild, welches mittig geteilt ist und auf der linken Seite die Farbe des Artikels enthält, rechts die der Sidebar.

Falls du den Artikelhintergrund in weiß nutzen möchtest, solltest du für article die background-color: #fff nutzen, damit es über dem Hintergrundbild liegt.

Trick: Hintergrundbild

Trick: Hintergrundbild


Das Hintergrundbild hat die beiden Farben - die Breite ist, ebenso wie die Höhe, nicht wichtig. Je kleiner, desto besser.

Wichtig ist nur, dass die Farben exakt in der mitte geteilt sind. Verwende bitte unbedingt .PNG statt .JPG oder .JPEG oder gar .GIF - noch schlimmer .BMP.
Das PNG-Format hat die beste Farbwiedergabe, denn diese sollte sich mit den per CSS gesetzte Hintergrundfarbe nahtlos ineinander fügen.

Zum Code:

Das Bild wird als Hintergrundbild (background-color) für body genutzt. Für section können wir es nicht nutzen, da es eine maximale Breite hat und mittig ausgerichtet wurde.
body{background-image: url(\'hintergrund.png\');background-repeat:repeat-y;background-size:100%;}

Das ganze sieht dann so aus:
Layout Finish

Layout Finish

Der komplette Code des Webdesign-Layout Tutorials

Nachfolgend kannst du dir den Code kopieren oder dir das Tutorial live im Webmaster-Glossar.de Webeditor anschauen und selbst verändern.
<html><head><style type=\"text/css\">body{background-image: url(http://webmaster-glossar.de/wp-content/uploads/2015/09/layout-css-trick-hintergrundbild.png);background-repeat:repeat-y;background-size:100%;}header , footer{background-color: #7F7F7F;padding: 20px;}section{display: flex;max-width: 1000px;margin: 0 auto;}article, aside{padding: 20px;}article{flex: 1 1 0%;width: auto;background-color: #F1EFDD;}aside{width: 250px;background-color: #E2E2E2;}</style><title>Webeditor - Webmaster-Glossar.de</title></head><body><header>Header</header><section><article>Artikel</article><aside>Sidebar</aside></section><footer>Footer</footer></body></html>