CSS einfach erklärt

Das Layout von HTML Fließtext ist auf den meisten Websites eine recht langweilige Angelegenheit. Gerne würde mancher Webdesigner auf die aus dem Printbereich bekanten Layoutmöglichkeiten zurückgreifen. So ist es beim Desktop-Publishing kein Problem, etwa runden Text um ein rundes Bild herumfließen zu lassen. Bei Verwendung der CSS-Eigenschaft float fließt der Text zwar um das Bild herum, allerdings wieder in eckiger Form. Das verwundert nicht, denn Websites bestehen nun mal aus viereckigen Kästen, die übereinander, nebeneinander oder ineinander gestapelt werden.

Wem die Rechteckformen beim Textlayout zu langweilig sind, ist gezwungen unzählige DIVs anzulegen und zu positionieren, um die Illusion runder Texte zu erschaffen. Alternativ kann man auf die Dienste eines Online-Editors namens CSS Text Wrapper zurückgreifen. Die Bedienung ist denkbar einfach: Rechts und links steht eine schwarze Linie zur Verfügung, die man durch das Setzen von beliebig vielen Kontrollpunkten verformen kann. Mit wenigen Klicks lässt sich auf diese Weise z. B. eine abgeschrägte Textführung erschaffen. Welche Formen möglich sind, zeigen einige Beispiele auf der Demoseite, wo beispielsweise Text in die Form eines Weinglases gebracht wurde. Auch das Umfließen von Bildumrissen lässt sich problemlos bewerkstelligen, da es möglich ist, eigene Bilder hochzuladen, die im Editor angezeigt werden.

Zunächst wird mit Standardvorgaben gearbeitet. Sie haben jedoch auch die Möglichkeit eigenen Text einzufügen, rudimentäre Schriftformatierungen vorzunehmen und die Größe des Arbeitsbereiches zu verändern. Nach einem Klick auf “Update Settings” wird der Quelltext fix und fertig ausgegeben, und zwar in drei Varianten:

1. XHTML mit Inline-CSS
2. XHTML für ein externes Stylesheet auf Basis von Klassen
3. Javascript

Natürlich ist nicht ratsam, sämtliche Texte mit diesem Hilfsmittel zu layouten. Sparsam eingesetzt kann diese Technik - insbesondere im Werbekontext – für besondere Effekte sorgen.

• Ähnliche Beiträge:
• » Neu laden des Browserfensters automatisieren
• » Mit dem Universal-Selektor alle Boxen sichtbar machen
• » Das eigene Webdesign mit anderen diskutieren
• » Statistiken der Browser-Marktanteile
• » Wie groß ist das Browserfenster beim User?

Kategorien: Webdesign.
Schlagwörter: Pixelgenaue Umsetzung, Schriftformatierung, Tools.