Text senkrecht platzieren

Diesen Tipp in Originalversion zeigen.

Text senkrecht platzieren

Sie möchten einen senkrechten Text auf Ihrer Seite anzeigen lassen, jedoch keine Bilder nutzen, da die Ladezeiten dadurch nur unnötig erhöht werden? Dann drehen Sie den Text doch mit Hilfe von CSS.
Weisen Sie dazu einer CSS-Klasse die Anweisung "writing-mode: tb-rl;" zu.
Weiterhin können Sie in der Klasse Ihre Schriftart definieren, die (absolute) Position Ihres Textes, und vieles mehr.
Im folgenden ein kleines Beispiel für die CSS-Klasse (namens "senkrecht"):

.senkrecht {
writing-mode: tb-rl;
position: absolute;
width: 50px;
right: 10px;
top: 20px;
}

Kopieren Sie die oben gezeigte CSS-Klasse und kopieren Sie diese in eine CSS-Datei namens "style.css".

Anschließend müssen Sie in den <head> - Bereich Ihrer Seite den folgenden Code einfügen, um die CSS-Datei "style.css" in Ihre Seite einzubinden:

<link href='style.css' rel='stylesheet'>

In den <body> - Bereich Ihrer Seite schreiben Sie dann den Text mit und weisen dem Text die Klasse "senkrecht" zu, indem Sie dem Attribut "class" den Namen der Klasse ("senkrecht") zuweisen.

Ein Beispiel wie dies aussehen könnte:


Dies ist ein beliebiger Text, der senkrecht auf der rechten Seite angezeigt wird. 
Mit Hilfe dieses Tipps können Sie einfach Text senkrecht anzeigen lassen, ohne 
umständlich auf Bilder zurückgreifen zu müssen.


Sollte Ihnen der Tipp zu schwer gewesen sein, so können Sie sich auch die fertigen Dateien weiter unten im ZIP-Format downloaden. (as)

Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign90.html