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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…