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

Teil 3: CSS für Profis

6.2.2009 von Redaktion pcmagazin und Andreas Hitzig

ca. 2:10 Min
Ratgeber
  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
YAML ist ein kostenloses (X)HTML/CSS Framework zur Erstellung flexibler Layouts.
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.