kamera.org
Die screen.css Datei, die im css Ordner des Templates abgelegt ist, definiert die Bildschirmdarstellung der Seite unter Kamera.org oder Geiziege.de. Die Seite ist klassisch aufgebaut, der linksseitig (float: left; ) angebundene div-container mit der id #page wird in einen Kopfbereich (#header) einen Mittelteil (#frame) und einen Fußteil (#footer) unterteilt.
Im Bereich #frame befindet sich links der div-container mit der id #menu. In diesem Menü können die Besucher zwischen den verschiedenen Herstellern und Produkten wählen. Die einzelnen Listenpunkte in diesem Menü sind voneinander durch gepunktete Linien der Höhe 2 Pixel und in der Farbe #B5B8BBgetrennt. Die Schrift der einzelnen Menüpunkte ist 11px hoch. Der dazu gehörige CSS-Befehl, der diese Darstellung anzeigt, ist folgender:
.menu li
{
border-bottom: 2px dotted #B5B8BB;
font-size: 11px;
}
Derjenige Menüpunkt, über dem sich der Mauszeiger gerade befindet unterscheidet sich von den anderen Menüpunkten: Er ist weiss und verfügt über eine schwarze Schrift. In der css Datei wird das so dargestellt:
{
background-color: #fff;
color: #000;
}
Der Kopfbereich von kalender-2012.net, jedes Hauptpunktes innerhalb der Navigation ist in einem mittleren graublau (#94a5ac;) gehalten, während die Schrift in einem sehr hellen graublau (color: #eaf0f0;) festgelegt ist. Darüber hinaus wir die Klasse .menuHeader durch einige andere CSS-Befehle formatiert:
.menuHeader
{
background: #94a5ac;
color: #eaf0f0;
font-size: 1em;
font-weight: bold;
padding: 6px 10px 6px 35px;
}
Die einzelnen Bereiche werden auch noch durch Unterklassen weiter differenziert und mit verschiedenen Icons hinterlegt. So sorgt z. B. Der CSS-Code
.menuHeader.menuHeader-1
{background: #94a5ac 5px url(../images/hersteller.gif) no-repeat;}
dafür, dass die Abteilung „Hersteller“ innerhalb des linken Menüs mit einem kleinen Hersteller-Icon hinterlegt wird. Den Surfern, die diese Seite nutzen, werden durch die unterschiedlichen Bilder leicht und problemlos zu den jeweiligen Bereichen geleitet und finden die gewünschten Produkte sehr leicht.