Deko
Unter der Domain deko.net befindet sich eine sehr schön und übersichtlich gestaltete Webseite zu den Themen Deko und moderne bzw. klassische Dekorationsideen. Formal ist die – auf Joomla 1.5 basierende Seite – durch einen Mittelteil und zwei Sidebars mit Navigationselementen gekennzeichnet. Die Seite ist in hellen Farbtönen gehalten, den Hintergrund bildet im oberen Teil ein dezentes Cremeweiss, unten wandelt es sich in reines Weiss (#ffffff;). Die Schrift im Fließtext und in der Navigation ist klassisch (font-family: Tahoma, Arial, sans-serif;
) und auch sehr hell gehalten. (color: #333;). Das Layout ist auf Tabellen aufgebaut.
Die einzelnen Elemente und ihre Definition in der CSS-Datei im Überblick:
Die Sidebars:
Die linke Sidebar dient der Navigation nach inhaltlichen Kriterien und ist in zwei verschiedenen Grautönen definiert. Die einzelnen Menüpunkte werden ohne Unterstreichungen in einem mittleren Grau dargestellt, sobald man mit der Curser über einen Punkt fährt, wird dieser Menüpunkt heller. Durch eine Hintergrundgrafik, die aber kaum sichtbar ist, werden die einzelnen Elemente dezent getrennt. In der CSS-Datei liest sich das folgendermaßen: #left ul.menu li a {padding: 4px 0; display: block; color: #333333; background: url(../images/sep.gif) repeat-x bottom; text-decoration: none; outline: none; } bzw. #left ul.menu li a:hover, { color: #333333; background: url(../images/sep.gif) repeat-x bottom #f9f9f9; text-decoration: none;}
Die rechte Sidebar – hier kann man die einzelnen Artikeln nach saisonalen Gesichtspunkten ansteuern (Oster-Deko, Weihnachtsdeko etc.) - ist gleichfalls in verschiedenen Grautönen gehalten, hier sind die Links aber im Unterschied zur linken Sidebar allerdings unterstrichen.
Die Überschriften:
Es sind 4 verschiedene Überschriften (von h1 bis h4) definiert. Sie unterscheiden sich nach den einzelnen Größen und werden in Prozentangaben zum Fließtext festgelegt. h1 ist mit 180% die größte Überschrift, gefolgt von h2 (150%) h3 (125%) und h4, die sich mit 100% Schriftgröße nicht vom Fließtext unterscheidet. Allerdings verwendet h4 Kapitälchen und differenziert sich dadurch vom Fließtext: h4 {font-size: 100%; text-transform: uppercase;}