CSS-Styles für alle Monitor-Größen

Teil 3: CSS für Profis

  1. CSS für Profis
  2. Teil 2: CSS für Profis
  3. 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.

h1 {
font: bold 2.0em/1.0em Arial,
sans-serif;
text-transform: uppercase;
margin-bottom: 5px;
}

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.

#navi h1 {
font-size: 1.3em;
line-height: 1.8em;
text-align: center;
background: black;
margin-top: 0.8em;
color: white;
}

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.

h2 {
font: bold 1.5em/1.0em Arial,
sans-serif;
margin-top: 1.5em;
margin-bottom: 5px;
}

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.

p {
font: 1.1em/1.6em Verdana,
Arial, sans-serif;
margin-bottom: 1em;
}

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.

#navi p {
color: gray;
}

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.

CSS für Profis

© Archiv

YAML ist ein kostenloses (X)HTML/CSS Framework zur Erstellung flexibler Layouts.

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".