billard-kicker.de
billard-kicker.de ist eine Webseite, die alles rund um die Themen Billard und Darts anbietet. Besucher finden auf dieser Seite die Möglichkeit Billardtische, Kugeln, Queues, aber auch Dartscheiben und Dartpfeile zu kaufen. Das Angebot ist ausgesprochen vielseitig und bietet wirklich alles, was ein eingefleischter Billard-Fan benötigt.
Verständlich, dass so eine komplexe und umfangreiche Seite auch aus technischer Sicht gut aufgebaut sein muss. Ein Blick hinter die Kulissen von www.billard-kicker.de/ zeigt, dass diese Seite gut und solide gemacht ist. Sie besteht im Wesentlichen aus einer Reihe von php-files, die sich die erforderlichen Informationen zum korrekten Darstellen der Site aus einer MySQL-Datenbank holen. Das „gestalterische“ Kleid, in das diese Seite gebettet wird, ist in der CSS-Datei „styles.css“ festgehalten.
Diese Datei styles.css ist nach klassischen Prinzipien aufgebaut und beginnt mit dem Universalselektor „*“ mit dessen Angaben die Innen- und die Aussenabstände für alle unterschiedlichen Browsertypen auf 0 Pixel gesetzt werden. Sofort danach folgt #body mit den Grundeinstellungen der Seite: 12 Pixel Arial/ Helvetica als Schrift vor einem grauen (#cccccc) Hintergrund. Der nächste Bereich, der in der CSS-Datei definiert ist, ist #container – der Bereich in dem die eigentlichen Inhalte der Webseite untergebracht sind. Mit der Breite 800 Pixel und seiner automatischen Zentrierung sowie dem weissen Hintergrund {width:800px; margin:auto; background:#FFFFFF;}ist er zwar eher schmal, folgt aber dennoch klassischen, gestalterischen Gesichtspunkten.
Auch im Weiteren folgt die Seite den klassischen Kriterien des Seitenaufbaus in die Bereiche Header, Mittelteil, Footer. In diesem Fall werden sie in der CSS Datei folgendermaßen definiert:
#layoutHeader: Mit den Maßen von 216 Pixel Höhe und 800 Pixel Breite entspricht der Kopfbereich den üblichen Kriterien. Ein Hintergrundbild mit Billardkugeln darauf wird ein Mal wiederholt und gibt dem Seitenkopf seine charakteristische Form {width:800px;height:216px;background:url(images/headerBackground.jpg) no-repeat;} Die Überschrift in diesem Bereich wird in der CSS-Datei als #layoutHeader h1 definiert und ist fett und weiss mit 36 Pixel Höhe. {color:#FFFFFF; font-size:36px; font-weight:bold; padding:20px 20px 0 20px;}
#layoutCenterBody enthält dann die übliche Auftrennung in die Elemente Navigation (#layoutNavigation) und Content (#layoutBodyContent) die abschließend beide durch einen Container der Klasse .clearer mit der Höhe von 10 Pixel gecleared werden. Abgeschlossen wird der klassische Aufbau dann mit dem Fußbereich (#layoutFooter)
Die Datei styles.css enthält also insgesamt eine fundierte und solide CSS-Lösung für diese Seite.