Teil 3: CSS für Profis

Die passenden Schriftarten

Als Überschrift wird Arial gewählt mit einer Schriftgröße von 20 Pixeln - auch an dieser Stelle wird aus bekannten Gründen auf die Größe em ausgewichen.

Die Überschrift soll komplett in Großbuchstaben dargestellt werden. Dies wird über eine Text-Transformation bewerkstelligt. Damit die Überschrift nicht direkt auf dem Fließtext hängt, wird zum Abschluss noch ein Absatz von 7 Pixeln festgelegt.

Innerhalb der Navigation haben Sie nicht ganz so viel Platz wie im Inhaltsbereich. Aus diesem Grund sollten Sie die allgemeine Überschrift h1 für diesen Bereich übersteuern und ihr eine kleinere Schriftgröße zugewiesen.

Damit sich der Text auch als Überschrift von den Navigationselementen abhebt, bekommt dieser sowohl mit schwarzer Farbe einen entsprechenden Hintergrund als auch eine weiße Schriftfarbe zur optischen Hervorhebung. Der Text als solcher wird zentriert und über die Absatzformatierungen richtig in Szene gesetzt.

Benötigen Sie für die einzelnen Menüpunkte weitere Beschreibungen, bevor die einzelnen Linkelemente kommen, könnten Sie dazu die zweite Überschrift verwenden. Es sind im Vorfeld lediglich einige kleine Anpassungen notwendig.

Optisch ansprechend wirkt eine Schriftart für den Inhaltsbereich, wenn Sie stimmig zu den anderen Darstellungen gewählt wird. Legen Sie übergreifend für <p> eine Formatierung fest und übersteuern Sie diese in den untergeordneten Containern.

Damit sich die Texte des Inhaltsbereichs auch optisch ein wenig von den Inhalten des Navigationsbereichs unterscheiden lassen, sollten Sie einem von beiden eventuell eine andere Schriftfarbe zuweisen.

Funktionsweise

Verändern Sie nun die Größe des Browserfensters und sinkt die Breite unter den zuvor festgelegten Wert, im Beispiel 800 Pixel + 200 Pixel, wird automatisch die Navigation umgehängt und wandert unter den Inhaltsbereich. Neben den klassischen Frame- basierten Lösungen gibt es also auch noch andere Methoden, der Problematik der Auflösung entgegenzutreten.

Die beiden gezeigten Lösungsansätze nehmen die Herausforderung von unterschiedlichen Auflösungen auf unterschiedliche Weisen an. Während Erstere sich auf eine Auflösung konzentriert und für alle anderen eine flexible Möglichkeit zur Skalierung von Schrift und Inhalten bietet, versucht die Zweite den vorhandenen Platz optimal zu nutzen. Ist dies nicht möglich, wird die Navigation automatisch ans Seitenende umgehängt.

YAML (Yet Another Multicolumn Layout)

Das (X)HTML/CSS Framework YAML wurde speziell für die Belange von flexiblen Layouts geschaffen. Es bietet Ihnen Unterstützung bei der Erstellung von spaltenbasierten Layouts ebenso wie bei der Erstellung von Grids.

Als Standard-Layout liefert YAML ein Gerüst aus drei Spalten, einem Header und einem Footer. Die nicht benötigten Bereiche können durch Anpassen der HTML-Struktur gelöscht werden. Die weitere Bearbeitung und Formatierung erfolgt anschließend mithilfe von CSS.

Das Framework fängt die meisten Browser-spezifischen Implementierungsfehler ab, sodass Sie sich komplett auf die Gestaltung Ihrer Seiten konzentrieren können.

Das Framework und die Anleitung sind komplett in Deutsch und unter zu finden.