Website-Gestaltung mit CSS
CSS-Gimmicks

Standardkonformes Design

Website-Gestaltung mit CSS

Wenn sich alle Webdesigner nur an die von CSS und HTML vorgegeben Standards hielten, wäre das Web dröge und ohne individuelle Highlights. Die hohe Kunst des Webdesigns besteht jedoch darin, ohne Verletzung vorgegebener Standards und unter Beachtung weitgehender Browser-Kompatibilität die vorgegebenen Werkzeuge so auszureizen, dass eine individuelle Note erkennbar wird. Im folgenden Workshop sollen einige CSS-Tricks vorgestellt werden, mit deren Hilfe man dieses Ziel erreichen kann.

Runde Ecken

Website-Gestaltung mit CSS

Beim Webdesign mit Kästen zu arbeiten, ist üblich. Damit kann man eine Seite hervorragend strukturieren, farblich gliedern und die Übersichtlichkeit erhöhen. Mit div-Containern ist dies auch kein allzu großer Aufwand. Möglicherweise stört Sie jedoch der hier noch vorherrschende Standard, der von rechtwinkligen Ecken ausgeht.

Noch deshalb, weil CSS 3 hier Abhilfe schaffen soll. Einen div-Container mit runden Ecken zu versehen wird dann einfach sein und sich mit folgender Stildefinition realisieren lassen:

div { border: 1px dotted black; border-radius: 3px; }

Damit wird sich in Zukunft der Designer-Wunsch nach runden Formen einfach realisieren lassen. Noch ist es allerdings nicht so weit, und deshalb ist hier noch Improvisation angesagt.

Grafische Lösung

Website-Gestaltung mit CSS

Eine Variante, mit der Sie Boxen mit runden Ecken erzeugen können, ist die grafische Lösung. Wie so etwas realisiert werden kann, lässt sich am besten am Beispiel des Templates round des CMS Websitebaker zeigen.

Die Navigationsleiste ist hier innerhalb einer Box mit runden Ecken realisiert. Dazu wurden zwei Grafiken, menu_top.gif und menu_bottom.gif, erstellt. Es handelt sich dabei um einfache Balken in einer Höhe von 10 Pixel. Die Kanten sind oben beziehungsweise unten abgerundet und die Farbe muss natürlich mit der Hintergrundfarbe der Box korrespondieren. Das Konstrukt wird dann im eigentlichen Template-File mit Hilfe einer Tabelle eingebunden:

Wichtig ist hier in jedem Fall, dass durch Zurücksetzen von cellpadding und cellspacing auf 0 keine störenden Lücken zwischen den einzelnen Elementen der Navigationsbox entstehen. Deshalb muss auch der Wert für border auf 0 gesetzt werden.

Variationen

Website-Gestaltung mit CSS

Dieses Websitebaker-Prinzip können Sie natürlich beliebig variieren und auf andere Elemente einer Seite anwenden. Das hier praktizierte Layout mit Hilfe von Tabellen kommt jedoch mehr und mehr aus der Mode. Deshalb wäre die moderne Form in jedem Fall eine Variante mit verschachtelten div-Containern:

Hier erscheinen die einzelnen Menüpunkte

Am Prinzip ändert sich jedoch nichts. Zuerst kommt der obere abgerundete Balken, dann der eigentliche Inhalt der Box und schließlich der untere abgerundete Balken. Die genaue Positionierung der Konstellation auf der Seite können Sie über entsprechende CSS-Positionsangaben umsetzen. Die grafische Lösung ist eine Variante, die jedoch wegen der Erstellung der GIFs aufwendig und wegen der fixen Farbwahl für die Grafiken auch nicht sehr flexibel ist. Wenn Sie zum Beispiel eine Box mit einer anderen Farbe aufbauen wollen, müssen Sie auch neue Balken mit abgerundeten Ecken konstruieren.

Lösung ohne Grafik

Website-Gestaltung mit CSS

Es liegt deshalb nahe, nach einer Lösung ohne Grafiken zu suchen. Prinzipiell geht das so: Sie verschachteln einfach so viele div-Container ineinander, dass derselbe Effekt erzielt wird. Nach oben und unten muss die Breite immer mehr abnehmen, damit der Effekt mit den abgerundeten Kanten erzielt wird. Eine Beispiel-Stildefinition dafür kann so aussehen:

Body der Seite

Website-Gestaltung mit CSS

Wollte man damit die Navigationsleiste von Websitebaker nachbauen, müsste im Body-Bereich der Seite Folgendes codiert werden:

Sie können sich übrigens das Eingeben des Codes auch ersparen. Auf der Seite www.spiffycorners.com gibt es einen Generator dafür. Sie müssen nur einen Klassennamen, eine Vorder- und eine Hintergrundfarbe definieren, und Sie erhalten per Klick den fertigen Code, den Sie dann per Cut and Paste in Ihre Site einbauen können.

Bildunterschriften

Website-Gestaltung mit CSS

Ein weiteres Betätigungsfeld für individuelles Design sind Bildunterschriften. Was im Printbereich üblich ist, nämlich kein Bild ohne Bildunterschrift, gilt auf Webseiten nur eingeschränkt. Bilder gibt es zwar reichlich, aber der Einfachheit halber stehen diese meist kommentarlos als kleine Auflockerung irgendwo auf der Seite.

Wenn Sie Ihre Bilder mit aussagekräftigen Kommentaren versehen wollen, können Sie natürlich auf das bewährte Instrumentarium zurückgreifen. Sie definieren zum Beispiel eine einspaltige Tabelle mit zwei Zeilen. In die obere Zelle kommt das Bild und in die untere die Bildunterschrift. Der Tabellenrand wird auf 0 gesetzt, die Abstände können Sie mit cellspacing und cellpadding definieren und das Schriftbild und die Position wird mit CSS-Stilen festgelegt.

Auch hier gibt es wieder die moderne Variante, die mit Hilfe von zwei div-Containern realisiert wird. Dabei können Sie natürlich wieder etwas experimentieren, zum Beispiel mit dem Pseudo-Element :after und der Eigenschaft content. Beide Konstrukte sind seit CSS 2 verfügbar. Das folgende Beispiel zeigt, wie man aus diesen Elementen eine Bildunterschrift definieren könnte. Zuerst muss folgender Stil definiert werden:

img:after {content: attr(title);}

Im eigentlichen Dokument wird dann das Bild mit folgendem Befehl platziert:

Problem: Browser

Website-Gestaltung mit CSS

So fortschrittlich diese Konstruktion auch ist, sie hat nur einen Nachteil: Nur der Opera-Browser stellt sie korrekt dar, andere ignorieren dies einfach.

Für eine semantisch korrekte Darstellung von Bild und Bildunterschrift in einem HTML-Dokument plädieren XHTML-Puristen übrigens für eine Konstruktion mit Definitionslisten. Die wurden ursprünglich für den Aufbau von Glossaren im Web in HTML eingeführt. Folgende Tags stehen dafür zur Verfügung: Mit dl wird eine solche Liste eingeleitet und beendet, mit dt wird der Begriff dargestellt und mit dd die Definition des Begriffs.

Übertragen auf die Kombination aus Bild und Bildunterschrift würde sich folgendes Schema ergeben:

Die genaue Positionierung der Konstruktion würde über eine Style-Definition für dl erfolgen und die textliche Gestaltung der Bildunterschrift zum Beispiel durch eine CSS-Klasse für dd.

Initiale und Einrückungen

Website-Gestaltung mit CSS

Eine weitere Möglichkeit für individuelles Webdesign, insbesondere auf textlastigen Seiten, sind zwei Stilelemente, die ebenfalls im Printbereich zum Standard zählen, nämlich Einrückungen und Initiale.

Einrückungen sind schnell realisiert, eine entsprechende Eigenschaft text-indent steht schon seit CSS 1 zur Verfügung. Diese Eigenschaft gibt an, ob und um wie viel die erste Zeile eines Absatzes eingerückt werden soll. Als Wert kann entweder ein Längenmaß oder eine Prozentangabe notiert werden:

p { text-indent: 20px; }

In diesem Fall würde die erste Zeile jedes Absatzes um 20 Pixel eingerückt werden. Wenn Ihnen das zu pauschal ist, können Sie natürlich eine spezielle Klasse definieren und diese immer dann anwenden, wie Sie eine Einrückung zur Auflockerung des Designs wollen.

Reichlich Spielraum gibt es auch beim Einsatz von Initialen, also vergrößerten Zeichen oder Ziffern am Anfang eines Absatzes. Eine Variante kann so aussehen: Mit width und height definieren Sie einen Bereich, der nach links ausgerichtet ist (float: left). Er enthält den ersten Buchstaben eines Absatzes oder eines beliebigen Textes. Anschließend lässt sich nach Herzenslust formatieren:


L


Das Initial kann mit margin-top weiter nach oben oder nach unten verschoben werden. margin-right regelt den Abstand zum Text. Alle modernen Browser liefern dieselbe Ansicht.

Mit Hilfe von CSS lassen sich zahlreiche Elemente, die Printprodukten ein ansprechendes Layout verleihen, mit mehr oder weniger Aufwand auch in Webpublikationen abbilden. Die Entwicklung soll sogar noch weitergehen. Mit CSS 3 werden künftig sogar Eigenschaften zur Verfügung stehen, die die Umsetzung des klassischen Spaltensatzes von Zeitungen und Zeitschriften ohne viel Aufwand erlauben.