Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de
Cascading Style Sheets, level 2
6.Exakte Ausrichtung
Die Zeit der Dummy-Grafiken als Abstandshalter ist vorbei. Diese arbeitsintensive Fummelei zur Erzeugung wunschgemäßer Einzüge übernimmt ab sofort CSS - und dies sogar viel eleganter.
Mit Style Sheets können Sie einem Absatz, einer Grafik, einer Tabelle
oder einem anderen Element zuweisen, dass es beispielsweise einen
Zentimeter Abstand zum linken Fensterrand haben soll. Genauso können
Sie ein Element wie gewohnt rechtsbündig ausrichten, dabei aber
bestimmen, dass bis zum rechten Fensterrand genau 15 Millimeter
Platz bleiben sollen.
Sinnvoll sind diese Angaben zu Abständen, Rändern und Ausrichtung
bei allen HTML-Tags, die einen Absatz bilden oder einen Block
erzeugen, also etwa für <h[1-6]>,
<p>, <blockquote>,
<address>, <pre>,
<div>, <table>,
<tr>, <th>
und <td>. Auch auf
<body> lassen sich die hier
aufgelisteten Style-Sheet-Angaben anwenden. In diesem Fall wird der
gesamte sichtbare Körper einer HTML-Datei wie ein Block behandelt.
Wichtig dabei ist: Rand, beziehungsweise Abstand, bedeutet den
Rand/Abstand des aktuellen Elements zu seinem logischen
"Eltern-Element". Im normalen Fließtext ist dies das
<body>-Tag, innerhalb einer
Tabellenzelle etwa ist es jedoch das <td>-
oder <th>-Tag, in dem sich das aktuelle
Element befindet. Wenn das aktuelle Element etwa innerhalb eines
<div>-Tags vorkommt, das selbst Ränder,
beziehungsweise Abstände, definiert, sind die Angaben relativ dazu.
Auch negative Werte sind erlaubt. Damit können Sie besondere
gestalterische Effekte erzeugen, wie beispielsweise sich
überlappende Elemente.
Mit margin-top: legen Sie den oberen
Abstand/Rand eines Elements zu seinem vorausgehenden Element fest.
Erlaubt sind numerische Angaben
Listing 13:
<style type="text/css">
h1,h2,h3 { margin-top:2cm; }
</style>
.
Die Style-Sheet-Angabe margin-bottom:
ist das Äquivalent zu margin-top: für
den unteren Abstand/Rand eines Elements zu seinem vorausgehenden
Element
Listing 14:
<style type="text/css">
h1,h2,h3 { margin-bottom:20pt; }
</style>
Mit margin-left: legen Sie den
Abstand/Rand links des Elementes fest, mit
margin-right: den Abstand/Rand rechts des Elementes. Auch
hier gilt: Zulässig sind numerische Werte.
Listing 15:
<style type="text/css">
h1,h2,h3 { margin-left:20pt; margin-right:20pt;}
</style>
Mit margin: bestimmen Sie einen
einheitlichen Rand/Abstand für oben, unten, links und rechts.
Erlaubt sind bis zu vier numerische Angaben. Bei einer Angabe
erhalten alle Ränder den gleichen Abstand. Bei zwei Angaben legt der
erste Wert den Abstand für oben und unten fest, der zweite Wert den
Abstand für rechts und links. Bei mehreren Angaben werden die Werte
nach der angenommenen Reihenfolge für 1=oben,
2=rechts, 3=unten,
4=links interpretiert
Listing 16:
<style type="text/css">
body { margin:2cm; }
p.var1 { margin: 1cm 2cm; }
p.var2 { margin: 1cm 2cm 3cm; }
p.var3 { margin: 1cm 2cm 3cm 4cm; }
</style>
.
Mit text-indent: definieren Sie eine
Einrückung für die erste Zeile. Erlaubt ist eine numerische Angabe.
Listing 17:
<style type="text/css">
p { text-indent:5mm;}
</style>
.
Mit line-height: legen Sie die
Zeilenhöhe fest. Erlaubt ist eine numerische Angabe:
Listing 18:
<style type="text/css">
p.gross { font-size:14pt; line-height:16pt; }
p.klein { font-size:8pt; line-height:8pt; }
</style>
.
Mit vertical align: bestimmen Sie die
vertikale Ausrichtung.
Listing 19:
<style type="text/css">
td { vertical-align:bottom;}
</style>
Mögliche Werte sind: top (= obenbündig
ausrichten), middle (= mittig
ausrichten), bottom (= untenbündig
ausrichten), baseline (= an der
Basislinie ausrichten oder untenbündig, wenn es keine Basislinie
gibt), sub (= tiefer stellen, ohne die
Schriftgröße zu reduzieren), super (=
höher stellen, ohne die Schriftgröße zu reduzieren),
text-top (= am oberen Schriftrand
ausrichten) und text-bottom (= am
unteren Schriftrand ausrichten). Bei Fließtext ist auch eine
prozentuale Angabe ist möglich. Die Ausrichtung orientiert sich dann
an der elementeigenen Zeilenhöhe.
Durch text-align: oder alignment:
richten Sie gewünschte Elemente für Textinhalte aus.
Listing 20:
<style type="text/css">
p { text-align:justify; }
</style>
Mögliche Werte sind: left (=
linksbündig ausrichten), center (=
zentriert ausrichten), right (=
rechtsbündig ausrichten), justify (=
als Blocksatz ausrichten). Die Style Sheet-Angabe text-align: ist
Bestandteil der CSS Version 1.0 und ist in Netscape und im MS
Internet Explorer implementiert. alignment: dagegen ist Bestandteil
der CSS Version 2.0 und wird von den Browsern (noch) nicht
unterstützt.
|
bezahlte Bannerwerbung:
|
|
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde
