Zehn nützliche CSS-Kurztipps

Tipp 6: Alternative zum CSS Box Model Hack
evolt.org schlägt eine Alternative zum Box Model Hack vor, der häufig zur Korrektur eines Rendering-Problems im IE verwendet wird, bei dem Boxes in einigen IE-Versionen in einer anderen Größe dargestellt werden. Es wird geraten, ein zusätzliches verschachteltes div-Element zum Markup hinzuzufügen und die inneren und äußeren div-Elemente getrennt zu formatieren um eine Box mit gewünschter Größe und Merkmalen zu erhalten. Im äußeren div-Element wird die Boxgröße (und eventuelle Ränder), im inneren div-Element werden border und padding festgelegt.

Hinweis: Das ist ein interessanter Ansatz, aber wie Celik und andere betonen, wird dadurch das HTML mit zusätzlichem Markup voll gestopft, die nur zu Präsentationszwecken dienen. Das ist ein Horror für Semantik-Markup-Puristen, aber für eher pragmatisch eingestellte Web-Designer wohl durchaus akzeptabel.

Tipp 7: Zentrierung eines Blockelements
Dieser Tipp zeigt die Zentrierung eines Elements fester Breite im Browserfenster. Das Attribut auto im linken und rechten Rand zentriert ein div– oder sonstiges Element in den meisten modernen Browsern, inklusive IE 6. Folgender CSS-Code zentriert ein 700-px-breites div-Element horizontal:

Für ältere IE-Versionen muss ein anderer Trick herhalten. Das body-Tag kann mit der Regel text-align:center formatiert werden, das alle untergeordneten Elemente des body-Tag zentriert, unter anderem auch ein content div. Leider werden dadurch auch alle Nachkömmlinge des body-Tag zentriert. Glücklicherweise kann dieser Effekt durch Hinzufügen der Regel text-align:left wieder zu einem div-Element als Umrandung des Seiteninhalts rückgängig gemacht werden, wie im folgenden CSS-Code gezeigt:

Hinweis: Im evolt.org-Artikel wurden der linke und rechte Rand mit der Kurzschrift-Eigenschaft margin (margin: 0 auto) eingestellt. Celik merkt allerdings an, das es zuverlässiger ist, zwei getrennte Regeln margin-left:auto und margin-right:auto zu verwenden.

Tipp 8: Senkrechte Ausrichtung mit CSS
Um eine Textzeile in einem Rahmen vertikal zu zentrieren, wird die Zeilenhöhe auf einen Wert gesetzt, der genau so groß ist wie die Höhe des Rahmens. In folgendem CSS-Beispiel wird der Text in einem 30 mal 100-Rahmen zentriert:

Hinweis: Diese Technik verwendet der Autor regelmäßig. Das Ergebnis ist nicht immer perfekt, aber die Abweichung liegt meist im Rahmen von nur ein oder zwei Pixeln.

Tipp 9: CSS-Positionierung in einem Container
Mit CSS können nicht nur Elemente an einer beliebigen Stelle in einem Dokument positioniert werden, sondern sogar in einem Container-Element. Hierfür wird die Eigenschaft position: relative dem Container-Element zugewiesen. Das Element wird also relativ zum Container und nicht zur Seite positioniert. Daraufhin kann das Element mit position:absolute und den Eigenschaften top, left, bottom und right innerhalb des Containers positioniert werden.

Hinweis: Der gleiche Effekt lässt sich häufig auch durch Weglassen der Eigenschaft position und den Einsatz von Rändern zur Positionierung eines Elements innerhalb eines Containers erreichen. Ränder sind bewährter und werden besser unterstützt als position:relative, also ist diese Alternative wahrscheinlich besser, sofern sie das gewünschte Ergebnis liefert.

Tipp 10: Verlaufende Hintergrundfarben an Bildschirmunterseite
Ziel ist das Anlegen einer vertikalen Spalte mit einer Hintergrundfarbe, die über den Spalteninhalt hinausreicht und die gesamte Höhe des Bildschirms (oder der Container-Box) ausfüllt. Hier ist die Formatierung eines div-Elements mit der entsprechenden Hintergrundfarbe nicht ausreichend, weil die Hintergrundfarbe nur bis zum Ende des Inhalts reicht.

Um die Spalte mit einer Hintergrundfarbe zu füllen, kann dem body-Tag oder einem Container-Element ein Hintergrundbild hinzugefügt werden. Dieses Bild muss die richtige Farbe und Breite haben, so dass sie als Spaltenhintergrund dienen kann. Es wird nach Bedarf vertikal wiederholt, bis der Platz ausgefüllt ist. Danach wird der Spalteninhalt über diesen Hintergrund positioniert. Das folgende CSS erstellt zum Beispiel eine 150 Pixel breite blaue Spalte über die gesamte Höhe (sofern die Datei image.gif die korrekte Breite und Farbe hat):

Hinweis: Eine Abbildung als Spaltenhintergrund ist eine effektive Behelfslösung zur Umgehung einer Einschränkung des CSS-basierten Seitenlayouts. Eine andere Möglichkeit wäre ein Container-div, das den Spaltenhintergrund festlegt. Ein Verschachteln von Container-divs bedeutet allerdings mehr Markup-Code auf der Seite, aber es erlaubt die Spezifizierung von Spaltenbreiten über relative Maßangaben, so dass man nicht die exakten Pixelzahlen anzugeben braucht.