Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren

HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren

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:

Bilder



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:

Bilder



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.

Bilder



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.

Bilder



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:

Bilder



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.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Kiasa
  • 09.07.2015 - 09:05

Herzlichen Dank für das gut erklärte PDF!

Portrait von Monti7
  • 17.04.2015 - 09:19

Vielen dank für das Video-Tutorial!

Portrait von rfg
rfg
  • 17.03.2015 - 01:06

Vielen Dank für das Tutorial.

Portrait von kopfam
  • 14.03.2015 - 20:30

Vielen Dank für das weitere interessante Tutorial.

Portrait von fe_web
  • 14.03.2015 - 17:47

Super - Danke fuer dieses Tutorial

Portrait von Kundentest
  • 14.03.2015 - 17:41

Herzlichen Dank für das Tutorial.

Portrait von dlieb
  • 14.03.2015 - 16:36

Vielen Dank für Teil 33.

Portrait von BOPsWelt
  • 14.03.2015 - 15:39

Vielen Dank für den 33. Teil. :-)

Portrait von teste123
  • 14.03.2015 - 15:33

vielen Dank
MfG

Portrait von samtron
  • 14.03.2015 - 15:33

vielen Dank
MfG

Portrait von suzana
  • 14.03.2015 - 15:03

Vielen Dank für das Tutorial!

Portrait von MARIA52
  • 14.03.2015 - 14:02

Vielen Dank für das Tutorial.

Portrait von rocking_sid
  • 14.03.2015 - 13:25

Vielen Dank für das interessante Tutorial!

Portrait von pallasathena
Portrait von Enigmon
  • 01.02.2015 - 12:16

Schön einfach erklärt.. Vielen Dank!!

Portrait von fe_web
  • 27.01.2015 - 14:19

Danke für dieses Tutorial.

Portrait von AnneRick
  • 22.01.2015 - 13:41

Herzlichen Dank für das Video.

Anne

Portrait von visualb
  • 21.01.2015 - 21:53

Vielen dank für dein Tutorial! Bin gespannt auf weitere Teile.

Portrait von Domingo
  • 21.01.2015 - 20:07

Gute tipps. vielen Dank.

Portrait von Michl-Neckar
  • 21.01.2015 - 19:57

Prima Video, sehr interessant. Das mit der h1- Einrückung hinterm Logo, habs gleich ausprobiert.

x
×
×
teststefan