CSS-Styles für alle Monitor-Größen
CSS für Profis
Ob 800 oder 1280 Pixel Bildschirm-Auflösung: Der Workshop zeigt, wie Sie das Design Ihrer Website für alle Besucher übersichtlich und attraktiv gestalten.
- CSS für Profis
- Teil 2: CSS für Profis
- Teil 3: CSS für Profis
Dieser Workshop bietet Ihnen zwei Beispiele, wie Sie das Problem der unterschiedlichen Bildschirmauflösungen ohne großen Aufwand in den Griff bekommen. Dabei wird nicht auf die bewährten dynamischen Randbereiche zurückgegriffen - Internet Magazin zeigt Ihnen zwei etwas ausgefallenere Lösungsansätze.
Unterschiedliche Ansätze
Durch das erste Beispiel haben die Besucher Ihrer Website die Option, die Darstellung selbst zu skalieren. Dabei wird die Standardseite mit einer definierten Auflösung entwickelt und die Besucher können mithilfe der Skalierungsfunktion (Seite/Textgröße) nicht nur den Text, sondern auch die anderen Objekte im Bezug auf die Größe anpassen.
Das zweite Beispiel zeigt einen fest verankerten Inhaltsbereich und zwei Navigationsbereiche, die sich jedoch auf Basis des zur Verfügung stehenden Platzes eigenständig und dynamisch unterhalb anordnen. Damit lassen sich die Inhalte vernünftig auch auf kleinere Auflösungen anpassen - bietet der Bildschirm noch zusätzlichen Platz, wird dieser für die Navigationselemente genutzt.
Dynamische Randbereiche
Aus der Not heraus entstand die Basis für die erste Lösung: Bis zum IE 7 hatte der Microsoft Browser massive Probleme bei der Vergrößerung der Schriftarten über die Skalierung der Textgröße innerhalb des Browsers (STRG & PLUS/MINUS). Diesen Umweg hat die erste Lösung als Basis und setzt ihn für Texte und auch für andere Elemente einer Website ein.
Zu Beginn bestand das Problem, dass viele Surfer mit dem Internet Explorer 6 oder einer älteren Version surften, bei denen die Skalierung des Textes über Seite/Textgröße nicht funktioniert hat. Als Lösung bedienten sich viele Entwickler eines einfachen Tricks: Anstelle von Pixel wurde em eingesetzt und diese Hürde nimmt dann auch der Microsoft Browser ohne Probleme.
Bei der Implementierung setzen Sie als Erstes die Größe der Schriftart auf 62,5 Prozent, beispielsweise über den body-Bereich:
body { font-size: 62.5%; }
Nutzen Sie anschließend die Einheit em zur Definition der Schriftgröße, wobei Sie darauf achten müssen, dass diese nur ein Zehntel des Wertes der Pixelgröße besitzt.
h1 { font: bold 1.2em Arial,
sans-serif; }
Mitwachsende Inhalte
Als Beispiel für die HTML-Seite dient eine einfache Struktur mit einem Inhaltsbereich, der links und rechts von jeweils einem Platzhalter umgeben wird. Der Content-Bereich wird über eine verschachtelte DIV-Struktur in mehrere Abschnitte aufgeteilt, damit auch eine Grafik integriert werden kann - diese wird entsprechend mitwachsen oder schrumpfen.
<div class="box_inhalt"><div class="logo_box"><a href="#"><img src="pic1.png" alt="Logo"
width="150" height="52"/></a></div><h1>Eine Überschrift</h1><p>Hier steht der Text [...]</p></div>
Damit sind die Grundlagen auf der HTML-Seite geschaffen.
CSS-Formatierungen anpassen
Nun gilt es nur noch, die passenden CSS-Formatierungen festzulegen, damit eine flexible Skalierung möglich ist. Aus Kompatibilitätsgründen benötigen manche Versionen des Internet Explorers noch folgende Information:
html { font-size: 100%; }
Im nächsten Schritt wird, wie bereits oben beschrieben, die Textgröße auf 62,5 Prozent zurückgesetzt, um die Basis für die Einheit em zu legen. Auf Basis dieser Grundlagen definieren Sie als Nächstes die Einstellungen für den Inhaltsbereich, der über #wrap_body gekennzeichnet ist.
Im Beispiel hat er eine Breite von 800 Pixel, was 80em entspricht. Zusätzlich wird die Hintergrundfarbe weiß gelassen und der Kasten zur besseren Übersichtlichkeit mit einem schwarzen Rahmen versehen.
#wrap_body {
width: 85em;
margin: 0 auto;
background-color: white;
border: 1px solid black;
border-top: 0px;
}
Den Hintergrund können Sie über eine beliebig oft wiederholte Grafik setzen, oder auch einfach statisch mit einer Hintergrundfarbe.
body { background:url(background.jpg)
repeat-x; padding-bottom: 30px; }
Sollten Sie lediglich eine Hintergrundfarbe benötigen, genügt auch der Verweis:
background:#404040;
Die Zeile färbt beispielsweise den Hintergrund, welcher als linker und rechter Platzhalter gilt, dunkelgrau ein.
Kasten innerhalb des Textes
Bis jetzt haben Sie nur eine weiße Box mit Text, welche von einem grauen Hintergrund umgeben ist. Den Inhaltsbereich lockern Sie beispielsweise noch mit einer farblich abgehobenen Box auf, in welcher Sie eine Grafik und etwas beschreibenden Text platzieren.
Definieren Sie dazu einfach einen neuen Container beispielsweise mit dem Namen box_inhalt und folgenden Eigenschaften:
.box_inhalt {
border: 1px solid black;
padding: 55px 85px 15px 15px;
background: gray;
position: relative; }
Die Box wird fortlaufend zum Inhalt positioniert. Die Eigenschaft padding ist notwendig um genügend Platz für das Bild zu schaffen. So stehen nach oben mindestens 55 Pixel und auf der rechten Seite der Box mindestens 85 Pixel an freier Fläche zur Verfügung, in denen das Bild Platz findet.
Sollte dies nicht ausreichend sein, definieren Sie den freien Platz einfach nach Ihren Anforderungen.
