Nützliche CSS Techniken

Erstellt: 03.02.2009 | Aktualisiert: 08.03.2009

Dieses Snippet ist Teil des Seminars «Website (XHTML/CSS)» und befasst sich mit nützlichen CSS-Techniken für die Gestaltung von Web-Layouts.

Weiterführende Artikel und Roundups zu nützlichen CSS-Techniken:

Folgend einige ausgewählte Techniken, welche im Seminar «Website (XHTML/CSS)» angewendet werden.

Global Reset

Problem

Unterschiedliche Browser interpretieren CSS nach verschiedenen Prinzipien. So werden beispielsweise Überschriften oder Abstände standardmässig, d.h. noch ohne CSS-Formatierung, unterschiedlich dargestellt.

Lösung

Damit man bei der Entwicklung von Websites bei einem ‘neutralen’ Zustand beginnen kann, empfiehlt es sich einen so genannte ‘Global Reset’ vorzunehmen, der Browser-Inkonsistenzen aufhebt. Empfohlen wird eine Variante von Eric Meyer:

CSS Reset (meyerweb.com)

Footer Stick

Problem

Manchmal wünscht man sich, dass der Footer einer Website ganz unterst am Browserrand ausgerichtet wird, auch wenn nur wenig Inhalt auf der Website vorhanden ist und er ohne Dazutun sich irgendwo im Browserfenster befindet. Wie kann man also denn Footer dazu zwingen, sich immer zu unterst auszurichten, also so wie im folgenden Beispiel?

http://ryanfait.com/sticky-footer/

Lösung

Der Ansatz ist eigentlich relativ simple. Man gibt der Website eine Höhe von 100% und zieht einen dem Footer entsprechend Block von dieser Höhe wieder ab.

XHMTL-Struktur
<html>

<head>
<link rel="stylesheet" href="layout.css" ... />
</head>

<body>

<div class="wrapper">
<p>Inhalte der Website hier.</p>
<div class="push"></div>
</div>

<div class="footer">
<p>Copyright (c) 2008</p>
</div>

</body>
</html>
CSS-Formatierung

* { margin: 0;}

html, body {height: 100%;}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

.footer, .push {height: 4em;}

Mehr dazu auch in den folgenden Artikel:

Image Replacement

Problem

Es ist wichtig, dass man seine HTML-Struktur möglichst korrekt aufbaut und Elemente wie beispielsweise Überschriften entsprechend auszeichnet. Es macht aus diesem Grund Sinn der Name der Website in einen h1-Tag zu packen. Nun ist es aber des Öftern so, dass man anstelle normalen HTMLs lieber ein bestimmtes Logo verwenden würde. Wie kann man also semantisch korrekten HTML-Code schreiben und trotzdem Bilder verwenden? Oder noch einfacher formuliert, wie wird HTML-Text mit Bildern ersetzt?

Lösung

Für das so genannte Image Replacement bieten sich verschieden Methoden an. Bevorzugt wird eine Variante, welche diese Problem mit Hilfe von CSS löst.

XHTML-Struktur

<h1 class="logo">Logo der Firma</h1>
CSS-Formatierung
.logo {
width: 200px;
height: 50px;
background: url(logo.png);
text-indent: -999em;
}

Weitere Methoden in der Übersicht

Print CSS

Problem

Informationswebsites möchte man oft nicht nur im Browser anschauen, sondern spezifische Seiteninhalte auch ausdrucken. Wie lassen sich Websites für den Druck optimieren?

Lösung

Man schreibt ein externes CSS-Print-File, welches unnötige Seitenelemente ausschaltet und relevante Inhalte optimal für den Ausdruck darstellt. Das CSS-File lässt sich dann entsprechend in die HTML-Datei einbinden.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Es bieten sich hierfür verschiedene Techniken an:

Highlight Links

Problem

Nicht immer weiss man, was sich hinter einem Link genau verbirgt. Meistens handelt es sich um Verweise auf die eigen oder fremde Websites, es können aber auch PDF- oder Word-Files sein. Welche Möglichkeiten bieten sich an, Benutzer bereits vor dem Klicken darauf vorzubereiten?

Lösung

Roger Johansson beschreibt in seinem Blog 456 Berea Street eine elegante Lösung, welche ausschliesslich über CSS funktioniert.

clearfix

Problem

Umschliessende Blöcke von ‘gefloateten’ Elementen werden vertikal nicht entsprechend gestreckt. Wie lässt man übergeordnete Elemente wissen, wo sich das letzte ‘gefloatete’ Element genau befindet?

Lösung

Es braucht als Abschluss ein Blockelement, welches mit der CSS-Anweisung clear versehen wird. Allerdings ist es nicht immer erwünscht ein zusätzliches HMTL-Element einzufügen. Es bieten sich aus diesem Grund andere Methoden an.

Deutsche Übersetzung: Einschliessen von Floats ohne zusätzliches Markup (jassesnee.de)