Gartengeraete.org
Die Seitenwww.gartengeraete.org & vornamen.woxikon.de nutzt das Wordpress-Theme „Hanging“. Dieses Therme von webdesignlessons.com verfügt über 2 Kolumnen und hat eine fixe Breite. Passend zum Thema Garten ist es vor allem in Grün gehalten. In der CSS-Datei des Themes – style.css - sind alle Eigenschaften aufgelistet, die notwendig sind um die Webseite durch die einzelnen Browser korrekt darzustellen. Wir wollen im Folgenden mal einen kleinen Überblick über die CSS Datei erhalten und vorallem den oberen Bereich dieses Themes etwas genauer unter die Lupe nehmen.
Öffnet man die CSS Datei style.css sieht man zu Beginn erst mal die Definitionen für die Bereiche #body und #page, Der Bereich #page legt den div-container fest, in dem sich der eigentliche Bloginhalt befindet. Mit einer Breite von 1000px ist er zwar relativ großzügig bemessen, wird aber dennoch auch von kleineren Bildschirmen dargestellt.
Weiter geht es dann mit dem Bereich #header, der in diesem Fall besonders opulent ausgefallen ist. Die Höhe von 188 Pixel bietet einem ziemlich großen Bild Platz, das bis an den oberen Rand reicht. Außerdem ist auch noch der RSS-Feed im Header untergebracht. Auch die Überschrift der Seite wird in diesem Bereich definiert: #header h1 hält fest, dass der Blogtitel in weiss mit einer Größe von 88px und der Schriftart Times New Roman dargestellt wird. Um auch längere Titel richtig unterbringen zu können, hat der Designer den Buchstabenabstand mit -6px etwas verringert. Um die Überschrift nicht direkt am oberen Rand „kleben“ zu lassen, wurde ein Innenabstand von 30 Pixel zum oberen Bildrand eingefügt. Im Code liest sich das wie folgt:
#header h1{color:#fff; font-size:88px; font-weight:normal; font-family:”Times New Roman”, Times, serif; letter-spacing:-6px; padding:30px 0 0 0; font-style:italic; float:left; width:832px; text-align:center;}
Als abschließende div-Container des oberen Bereichs kommen dann die beiden Bereiche div #mainmenu und div #searchbox. Dort sind die Hauptnavigation und die Suchmaske des Themes untergebracht.
Ein weiteres Beispiel wäre die Seite von Wohnzimmermöbel.de . Auch diese ist dem Thema Garten nicht so unähnlich.
Eine klassische CSS-Lösung für ein auffallend hübsches und gelungenes Theme zum Thema Garten!