Ihr könnt Absätze oder Inhalte von Tabellenzellen durch die folgenden Eigenschaften euren Wünschen entsprechend ausrichten. Anwenden lassen sich diese Eigenschaften darüber hinaus aber auch auf alle sonstigen Elemente, denen eine definierte oder berechnete Höhe oder Breite zugewiesen werden kann.
Einrückung der ersten Zeile
Los geht es mit der Eigenschaft text-indent. Legt hierüber fest, wie die erste Zeile eines Absatzes eingerückt werden soll. Auch eine "Ausrückung" nach links ist möglich. Dazu muss ein negativer text-indent-Wert verwendet werden. (Ausführliche Informationen darüber, wann eine extreme Ausrückung sinnvoll sein kann, folgen im Anschluss). Erwartet wird eine numerische Angabe.
Ein Beispiel:
.absatz { text-indent: 2em; }
Im Browser sieht das folgendermaßen aus:
Wenn ihr einen negativen Wert verwendet, gibt es eine Textausrückung in der ersten Fließtextzeile.
.absatz {
text-indent: -2em;
}
Und auch hier natürlich wieder ein Blick auf das Ergebnis im Browser:
Auch so etwas ist also möglich. Achtet bei der Definition von Ausrückungen aber darauf, dass die Inhalte dann tatsächlich noch zu lesen sind, wenn das gewollt ist. Tatsächlich kann text-indent nämlich auch im Zusammenhang mit dem Thema Suchmaschinenoptimierung interessant werden. So möchte man beispielsweise hin und wieder lieber Grafiken anstelle von Text anzeigen.
Soll der Text aber für Suchmaschinen dennoch verfügbar sein, steht man zunächst vor einem Dilemma. Jenes Dilemma lässt sich durch den Einsatz von text-indent beheben. Denn diese Eigenschaft ermöglicht euch bekanntermaßen das Verschieben von Texten. Ihr könnt Texte somit also aus dem Gesichtsfeld der Besucher verschwinden lassen.
Vorteil der text-indent-Variante: Der Text, der durch eine Grafik ersetzt werden soll, ist im Quelltext unverändert vorhanden.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Durch diese Syntax wird dem h1-Element eine Hintergrundgrafik zugewiesen. (Die background-Eigenschaft wurde in dieser Reihe bereits vorgestellt). Über text-indent: -99999px wird der Text der Überschrift um 99999 Pixel nach links verschoben. Sichtbar ist der Text somit also nicht mehr. Angezeigt wird nun tatsächlich nur noch das Bild.
Deaktiviert man das Stylesheet, ist der Text aber wieder ganz normal zu sehen.
Die Zeilenhöhe festlegen
Auf die Zeilenhöhe hatte ich bereits einmal im Zusammenhang mit der allgemeinen font-Eigenschaft hingewiesen. An dieser Stelle geht es nun etwas ausführlicher um dieses Thema. Interessant ist die Definition der Zeilenhöhe in Verbindung mit der Schriftgröße (font-size).
Festlegen lässt sich die Zeilenhöhe über die Eigenschaft line-height. Erlaubt sind numerische Angaben. Prozentuale Werte sind ebenfalls möglich. Diese beziehen sich dann auf die Schriftgröße des Elements, für das die Zeilenhöhe angegeben wurde. Beachtet vor der Definition der Zeilenhöhe auch Folgendes: Es kann passieren, dass ein Browser/Endgerät der Angabe der Zeilenhöhe Vorrang vor anderen Eigenschaften einräumt und Elemente abgeschnitten darstellt, wenn diese höher sind. Ärgerlich kann das vor allem bei Grafiken sein. Testet also die Ergebnisse, bevor ihr die Seite online stellt.
Das folgende Beispiel zeigt, wie sich line-height einsetzen lässt.
<p style="line-height:1.4em; font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:2em;font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:1em; font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p>
Definiert wurden hier drei Textabsätze, denen jeweils unterschiedliche Zeilenhöhen zugewiesen wurden.
Wie ihr seht, lässt sich durch die Zeilenhöhe die Lesbarkeit von Fließtexten sehr stark beeinflussen. Geht also vorsichtig mit line-height um.
Stellt sich abschließend natürlich die Frage, welche Zeilenhöhe man eigentlich wählen sollte. Üblicherweise geht man von Zeilenhöhen zwischen 130 und 150 Prozent aus.
p {
line-height: 150%;
}
Letztendlich hängt die gute Lesbarkeit aber vor allem von der Laufweite der Schrift ab. Hier gilt: Die Zeilenhöhe sollte umso größer sein, je länger die Textzeilen laufen. Testet daher unbedingt die Seite daraufhin, dass die Lesbarkeit tatsächlich gewahrt bleibt.
Horizontale Textausrichtung
Über die Eigenschaft text-align wird die horizontale Ausrichtung von Textabsätzen und anderen in Block-Elementen enthaltenen Fließtexten oder Inline-Elementen festgelegt. Die folgenden Werte lassen sich für text-align festlegen:
• left – linksbündige Ausrichtung
• right – rechtsbündige Ausrichtung
• center – zentriert
• justify – als Blocksatz ausrichten
Auch hierzu wieder ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Und so sieht das Ergebnis im Browser aus:
Beachtet, dass sich text-align nicht nur auf Textinhalte bezieht. Die Eigenschaft gilt tatsächlich für sämtliche Inline-Elemente. Wird also ein Bild eingebunden, gilt die text-align-Definition auch für dieses Element.
Ein Hinweis noch: text-align soll sich – zumindest laut offizieller CSS-Spezifikation – nicht auf Block-Elemente auswirken. (Auch wenn es durchaus Browser gibt, die es auch auf Block-Elemente anwenden). Wenn ihr Block-Elemente ausrichten wollt, verwendet in diesen Fällen die bereits vorgestellten margin-Eigenschaften.
