speicherkarten.net
Die Seite unter www.speicherkarten.net wird durch eine einzige css Datei formatiert, die sich im Unterordner „css“ des Templates der Seite befindet. Wie der Name der Seite bereits signalisiert, besteht auf der Seite speicherkarten.net die Möglichkeit Speicherkarten für Digitalkameras zu kaufen und die Modelle der verschiedenen Hersteller betreffend Leistungen und Preis zu vergleichen.
Das angenehme Layout der Seite macht es den potentiellen Käufern leicht das gewünschte Produkt zu finden. In dem Conatainer mit der id #content gibt es zwei Spalten, in denen die entsprechenden Produkte gelistet sind. Jede der Spalten wird durch eine eigene Klasse in der CSS-Datei definiert:
Während die linke Spalte durch die Klasse .contentColumn-1 definiert wird, wir die rechte Spalte aber durch die Klasse .contentColumn-1 beschrieben. Die Kopfbereiche der jeweiligen Spalten werden durch die Klassen .contentHeader-1 und .contentHeader-2 festgelegt.
Die Klassen beider Spalten sind ähnlich aufgebaut und floaten links. Sie haben beide eine Breite von 390 Pixel und am Boden einen Innenabstand von 6 Pixel. Ein Hintergrundbild für beide Klassen ist in der CSS-Datei zwar vorgegeben, wurde aber auskommentiert. Die Kopfbereiche der Klassen sind in einem mittleren blaugrau (#94A5BF ) mit weisser, fetter Schrift der Größe 1.0 em gehalten.
Im Code stellen sich diese Eigenschaften folgendermaßen dar:
.contentColumn-1 {
float: left;
width: 390px;
padding-bottom: 6px;
/*background: bottom url(../images/content-column-1-footer.gif) no-repeat;*/
bzw. für den Kopfbereich der Klassen:
.contentHeader-1 {
padding: 6px 10px;
color: #fff;
font-size: 1em;
font-weight: bold;
background: #94A5BF;
}
Unter den beiden Spalten gibt es noch einen Bereich, der beide Spalten umfasst und ähnlich aufgebaut ist. Er ist doppelt so breit, aber ansonsten genau gleich gestylt. Durch den Codeschnipsel clear: both; ist gewährleistet, dass die Eigenschaften „float: left;“ der beiden darüber liegenden div-Container wieder aufgehoben wurden. Alles in allem eine klassisch, angenehm gestylte Lösung mit der dieser Internetshop sicherlich viele Kunden von der Qualität der angebotenen Waren überzeugen wird.