Beschreibung

Textfluss

Der Text, der in einer HTML-Datei gespeichert ist, muss ins Ausgabemedium, z..B. den Bildschirm oder den Drucker, übertragen werden. Textfluss wird das Verhalten genannt, wie sich die Wörter der Reihe nach in die Darstellung einfügen. Dies betrifft das Platzieren des Textes, den Zeilenumbruch und gegebenenfalls das Umfließen von anderen HTML-Elementen.

weicher Zeilenumbruch

Wird in einer Sprache von links nach rechts geschrieben, so wird die Darstellung oben beginnen und der Text wird in einer Zeile so lange wie möglich von links nach rechts Wort für Wort dargestellt. Sobald sich ein Wort in der Zeile nicht mehr ausgeht (d.h. es passt nicht mehr in die Zeile, weil die Breite des Wortes größer ist als der restliche Platz in der Zeile), dann wird unter der bisherigen Zeile mit dem nicht mehr hineinpassende Wort eine neue Zeile begonnen und dort wiederum Wort für Wort die Darstellung fortgesetzt.

Dieser Vorgang wird als "weicher Zeilenumbruch" bezeichnet. Weich deshalb, weil die Stelle des Umbruchs nicht fix ("hart") ist und sich ohne weiteres verändern kann. Sobald sich die die Zeilenlänge oder der Platzbedarf des Textes ändert, wird die Zeile an einer anderen Stelle umgebrochen. Die Zeilenlänge kann sich ändern wenn die Benutzerin oder der Benutzer die Fenstergröße oder den Zoomfaktor des Browsers ändert. Der Platzbedarf des Textes kann sich ändern, wenn die Autorin oder der Autor der Webseite Wörter einfügt oder löscht oder die Schriftgröße ändert.

harter Zeilenumbruch

Beeinflusst wird der Textfluss aber auch durch "harte Zeilenumbrüche", die sich immer an einer fixen Stelle im Text befinden. Sie entstehen durch das Einfügen des HTML-Elements break (<br>) oder "automatisch" nach HTML-Blockelementen, wie z.B. Absätze, Überschriften oder Listenelemente. An deren Ende wird immer ein Zeilenumbruch durchgeführt - das heißt, der Rest der Zeile bleibt "leer" und die Darstellung des nachfolgenden Textes wird darunter in einer neuen Zeile fortgesetzt.

Ausbrechen aus dem Textflusses

Im normalen Textfluss ist es nicht möglich Blockelemente nebeneinander anzuordnen. Das vorhergehende Blockelement bewirkt einen harten Zeilenumbruch und somit wird das nachfolgende Blockelement immer darunter dargestellt.

Nun gibt es in CSS einige Eigenschaften, mit denen man HTML-Elemente aus dem Textfluss herausnehmen und somit die Position der Darstellung verändern kann. Der Textfluss des nachfolgenden Textes passt sich an die veränderten Platzverhältnisse an. Um nicht erwünschte Wirkungen zu vermeiden, kann man mit weiteren CSS-Eigenschaften auch darauf Einfluss nehmen.

float (schwebend)

float bedeutet im Englischen treiben, schwimmen. Dieser Begriff wird auch verwendet im Sinn von: Nicht auf eine Position (Meinung, Wert) fixiert, sondern frei veränderbar. Aber auch etwas in Umlauf bringen oder etwas (Meinung, Idee) in den Raum stellen. Technisch, auch finanztechnisch, wird der Begriff auch verwendet, wenn sich ein Parameter (Wert) an einen anderen Parameter orientiert bei bei einer Veränderung von diesem sich auch anpassen soll.

https://en.wiktionary.org/wiki/floating#Adjective
https://en.wiktionary.org/wiki/float#Verb

Die Übersetzung, die im am meisten im Zusammenhang mit der CSS-Eigenschaft float verwendet wird, ist schwebend.

Beschreibung float

Mit der CSS-Eigenschaft float kann ein HTML-Element aus dem Textfluss heraus genommen und - frei schwebend - zur Seite gestellt werden. Verbraucht das schwebende Element nicht die gesamte vorhandene Breite, so wird alles nachfolgende nachrücken und der Textfluss umfließt dann das schwebende Element.

Das mit float aus dem Textfluss genommene Element wird zur linken oder rechten Innenkante (Kante des Inhaltsbreichs/content) seines Elternelements verschoben, wobei seine vertikale/senkrechte Positon nicht verändert wird.

Die Box des Elternelements wird durch ein gefloatetes Element nicht verändert. Es wird jedoch eine Fläche seines Inhaltsbereichs durch das gefloatete Element verbraucht und steht für den restlichen Inhalt nicht mehr zur Verfügung. Der Textfluss muss sich daher auf den freien, restlichen Platz beschränken.

Ist seitlich des gefloateten Elements Platz übrig, so werden dort die einzelnen Zeilen im Textfluss kürzer sein - aber der Text wird das gefloatete Element umfließen.

Ist seitlich kein Platz mehr vorhanden, so kann sich dort auch kein Text mehr befinden.

Bei sehr wenig Platz kann eine unangenehme Nebenerscheinung sein, dass ein sehr langes Wort nicht in die verkürzen Zeilen passt. Dann bewirkt der Textfluss immer neue Zeilenumbrüche, bis die nächste Zeile unterhalb des gefloateten Elements erstellt wird. Dann ist genügend Platz um das Wort darzustellen und der Text wird erst hier fortgesetzt.

Umfließen erzeugen: float

Float ist eine Möglichkeit, Elemente nebeneinander zu stellen. Im normalen Textfluss ist dies nicht möglich.

float stellt ein Element an den linken oder rechten Rand und es wird dann von nachfolgenden umflossen. Daher muss das gefloatete Element im HTML-Code immer vor den anderen umfließenden Elementen stehen.

In Dreamweaver wird diese Eigenschaft Schwebend genannt und befindet sich in der Kategorie Box.

Anwendungsbeispiele:

• Bild: Bild an der Stelle einfügen, an der die obere Kante des Bildes stehen soll. Dies ist meist der Anfang eines Absatzes. Dabei das Bild vor dem ersten Buchstaben einfügen.
  Danach eine CSS-Regel erstellen, entweder für alle Bilder (Tag-Selektor: img) oder nur für bestimmte (Klassen-Selektor: .name), in der Kategorie Box bei Schwebend (=float) links oder rechts auswählen.
• Bild mit Bildtext kombiniert: Um mehr als ein HTML-Element zu floaten, muss man diese mit einem div zu einem zusammenfassen.
  Möchte man ein Bild und unterhalb einen Bildtext floaten, so erstellt man ein div, in das dann das Bild und der Text kommt. Nun wird wie beim Beispiel für nur ein Bild vorgegangen, nur dass nicht das Bild sondern das div gefloatet wird.
  Dem div muss eine fixe Breite zugeordnet werden und diese muss der Breite des Bildes entsprechen, damit der Text unter dem Bild platziert wird. Ansonsten würde er neben dem Bild erscheint und dabei das div immer breiter werden lassen.
• Textkästen: Wird nur ein Absatz gefloatet und umflossen, so kann diesem eine entsprechende Klasse zugewiesen werden (wie beim Beispiel mit Bild). Werden mehrere Absätze oder auch eine Kombination Überschrift und Absatz verwendet, so verwendet man eine div (wie beim Beispiel Bild mit Bildtext kombiniert)
• Layoutieren: Es können floats auch verwendet werden um ganze Bereiche (divs) nebeneinander zu stellen. (Nur eine Vorschau gezeigt.)

Abstände zwischen dem gefloateten Element und dem umfließenden Text.
Diese Abstände werden mit dem Außenabstand (margin, Rand) des gefloateten Element gemacht. Ist ein Element rechts gefloatet, dann wird der linke Außenabstand (z.B. 1em) und meist auch der untere Außenabstand (z.B. 0.5em) benutzt.

Umfließen verhindern/beenden: clear

clear: Verhindert, dass bestimmte Elemente andere umfließen.

Wird z.B. ein Bild gefloatet, rückt der Text des Absatzes nach. Ist nun der Absatz sehr kurz, so kann passieren, dass die nächste Überschrift auch neben das Bild rückt. Ist dies nicht erwünscht, das heißt, soll die Überschrift immer unterhalb des Bildes platziert sein, so kann man das erzwingen, indem man dieser Überschrift die Eigenschaft clear zuweist. Dazu im Dreamweaver in der Kategorie Box bei Frei entweder both oder die entsprechenden Wert des float des Bildes (links oder rechts) auswählen.

Anmerkung: In diesem Fall kann der Abstand zwischen Bild und Überschrift nicht über den oberen Außenabstand der Überschrift eingestellt werden.

Positionierungstyp und Versetzung: position, top…bottom

siehe  Tutorial: Positionierungstyp und Versetzung

Anzeige: display

Mit der CSS-Eigenschaft display kann der Typ der einem HTML-Element zugeordneten Box (siehe Boxmodell) geändert werden.

So kann z.B. mit der Deklaration display: block; ein Hyperlink <a href…> oder ein Bild <img> wie ein Block-Element dargestellt werden obwohl beide Inline-Elemente sind. Mit der Deklaration display: inline-block; können für ein Navigationsmenü Listeneinträge einer Liste nebeneinander dargestellt werden.

Die in den Unterlagen verwendeten Beispiele beinhalten nur die Attributwerte block, none und inline-block.

siehe Beispiele:

Attributwerte:

display: block;

Das HTML-Element wird immer wie ein Block-Element dargestellt.

Die verwendete Box ist die eines Block-Elements. Sie erzeugt am Ende einen Zeilenumbruch (wodurch nachfolgende HTML-Elemente darunter dargestellt werden) und ist so breit wie möglich und so hoch wie nötig.

Anwendungsbeispiele:

• Hyperlinks in einem Navigationsmenü
• Bilder in einer Bildgalerie

display: inline;

Das HTML-Element wird immer wie ein Inline-Element dargestellt.

Die verwendete Box ist die eines Inline-Elements. Sie erzeugt keinen Zeilenumbruch (wodurch nachfolgende HTML-Elemente in der selben Zeile dargestellt werden, sofern genügend Platz vorhanden ist) und ist nur so breit wie nötig.

Anwendungsbeispiele:

• ?

display: inline-block;

Das HTML-Element wird in manchen Beschaffenheiten wie ein Inline-Element und in manchen wie ein Block-Element dargestellt.

Die verwendete Box verhält sich nach "außen" wie die eines Inline-Elements und nach "innen" wie die eines Block-Elements. Sie erzeugt keinen Zeilenumbruch (wodurch nachfolgende HTML-Elemente in der selben Zeile dargestellt werden, sofern genügend Platz vorhanden ist) und ist nur so breit wie nötig. Sie kann aber in der Höhe formatiert werden und weitere block-boxen beinhalten.

Beachten Sie: Der Internet Explorer unterstützt display: inline-block; erst seit Version 8 fehlerfrei. Ältere Versionen wenden die Deklaration nur auf Elemente an, die von Natur aus zu den Inline-Elementen gehören (z.B. die Elemente a und span). Ein inline-block ähnliches Verhalten kann im Internet Explorer 6 und 7 bei allen Elementen erzwungen werden, wenn display: inline; zusammen mit der Microsoft-spezifischen Deklaration zoom: 1; notiert wird.
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display

Anwendungsbeispiele:

• Anordnung der Hyperlinks in einer waagrechten Navigation
• generell als Alternative zu float: left;

display: none;

Das HTML-Element wird nicht dargestellt.

Es wird keine Box für das HTML-Element erzeugt. Daher wird das HTML-Element gar nicht dargestellt. Alle nachfolgenden HTML-Elemente rutschen nach oben nach, als ob das HTML-Element gar nicht vorhanden wäre.

Anwendungsbeispiele:

• Bilder in einer Bildgalerie, die aktuell nicht sichtbar sein sollen.

display: run-in; und weitere CSS3-Werte

später.

display: list-item;

Das HTML-Element wird wie ein Eintrag in einer Liste dargestellt. Es ist ein Block-Element mit einem Aufzählungszeichen davor.

display: table-…;

Verschiedene Boxen entsprechend der HTML-Elemente für Tabellen.

display: ruby-…;

Für Schriftzeichen ostasiatischer Sprachen.

Stapelposition: z-index

Durch das Positionieren können sich CSS-Boxen überlappen. Dabei liegen die im HTML-Code später stehende Elemente auf den vorherigen und überdecken diese.

Möchte man diese Reihenfolge ändern, kann man die CSS-Eigenschaft z-index verwenden.

Überlappen sich CSS-Boxen, so liegen sie wie in einem Stapel Spielkarten übereinander. Betrachtet man den Bildschirm des Ausgabegeräts als 2-dimensionale Ebene mit x-Achse (Horizontale) und y-Achse (Vertikale), so ergibt der Stapel die 3. Dimension, also die z-Achse. Die Position innerhalb des Stapel - also die "Höhenlage" - wird mit dem z-index angegeben.

Ein größerer Wert des z-index ergibt, dass die CSS-Box oberhalb anderer Boxen mit niedrigeren Werten liegt und sie daher überdeckt. Als Werte kann man Ganze Zahlen angeben, also auch negative Zahlen. Der Standardwert (default) ist die Zahl 0.

Anmerkung: Meist genügt diese Erklärung, um die Reihenfolge von CSS-Boxen im Stapel, und somit die Sichtbarkeit bei Überlappungen zu bestimmen. In Wirklichkeit ist dies ein sehr vielfältiges Thema, weil nicht jede Box "gestapelt" werden kann und weil der z-index immer nur lokal innerhalb einer Box und der in ihr befindlichen Boxen gilt.

Kurz gesagt: Ein höherer z-index ergibt nicht zwangsläufig, dass die Box oberhalb einer Box mit niedrigeren z-index liegt.
Denn der z-index gilt nicht über das gesamte Fenster, sondern nur lokal innerhalb bestimmter Bereiche. Und es kann auch nur bestimmten Boxen ein z-index zugewiesen werden.