SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheet-Angaben


Style-Sheet-Angaben: Mehrspaltiger Textfluß

Diese Seite ist ein Dokument mit Informationstext

 Allgemeines zu mehrspaltigem Textfluß
 Anzahl Spalten (columns)
 Spaltenabstand (column-gap)
 Trennstrichdicke (column-rule-width)
 Trennstrichtyp (cloumn-rule-style)
 Trennstrichfarbe (column-rule-color)
 Trennstrich (allgemein) (column-rule)

 

Allgemeines zu mehrspaltigem Textfluß

Was Netscape seinerzeit mit der Version 3.0 seines Browsers eingeführt hat - die Möglichkeit zum  mehrspaltigen Textfluß - wird nun mit Hilfe von Style-Sheet-Angaben auch zum offiziellen Standard erhoben. Die entsprechenden HTML-Befehle von Netscape, die nie Eingang fanden in den offiziellen HTML-Standard und in der Praxis auch nicht viel verwendet wurden, werden dadurch in Zukunft sicher obsolet (möglich, aber unerwünscht) werden. Nachteil der hier beschriebenen Style-Sheet-Angaben ist jedoch, daß sie erst zum CSS-2.0-Standard gehören. Weder Netscape noch der MS Internet Explorer interpretieren diese Angaben in ihren 4er-Versionen.

Mehrspaltiger Textfluß erlaubt das automatische Verteilen von größeren Fließtextabschnitten auf mehrere Textspalten. Anders als bei  blinden Tabellen müssen Sie sich nicht selbst darum kümmern, was in welcher Spalte steht. Der Browser bricht den Text bei der Präsentation automatisch so um, daß er sich optimal auf die Anzahl der definierten Spalten verteilt.

Sinnvoll sind die hier beschriebenen Angaben vor allem für HTML-Tags, die einen größeren Bereich definieren, vor allem für <div>...</div>. So können Sie Innerhalb des Bereichs andere Gestaltungselemente wie Überschriften, Textabsätze, Grafiken usw. notieren, die alle in den mehrspaltigen Textfluß mit eingehen.

 

CSS2.0 Anzahl Spalten (columns)

Beispiel Anzeigebeispiel: So sieht's aus

Um für ein HTML-Element oder einen Bereich einen mehrspaltigen Textfluß zu definieren, müssen Sie die Anzahl der Spalten angeben.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  div.zweipaltig { columns:2; }
</style>

Erläuterung:

Mit columns: können Sie die Anzahl der gewünschten Spalten bestimmen. Der Text wird dann automatisch so umgebrochen, daß alle Spalten optimal gefüllt werden.

 

CSS2.0 Spaltenabstand (column-gap)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können bestimmen, wie groß der Abstand zwischen den einzelnen Spalten sein soll. Bei mehr als zwei Spalten gilt diese Angabe für alle Spaltenabstände.

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<div style="columns:3; column-gap:0.5cm">Inhalt</div>

Erläuterung:

Mit column-gap: können Sie den Spaltenabstand bestimmen. Erlaubt ist eine  numerische Angabe.

 

CSS2.0 Trennstrichdicke (column-rule-width)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können die Dicke eines Trennstrichs zwischen den Spalten eines mehrspaltigen Textflusses bestimmen. Bei mehr als zwei Spalten wird der Trennstrich zwischen allen Spalten wiederholt. Diese Angabe sollten Sie stets mit einer Angabe zum  Trennstrichtyp kombinieren. Nur durch beide Angaben werden Trennstriche definiert.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  div.dreispaltig { columns:3; column-rule-width:1mm; column-rule-style:solid; }
</style>

Erläuterung:

Mit column-rule-width: können Sie die Dicke eines Trennstriches zwischen den Spalten bestimmen. Erlaubt ist eine  numerische Angabe.

 

CSS2.0 Trennstrichtyp (cloumn-rule-style)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können bestimmen, daß die Spalten eines mehrspaltigen Textflusses durch senkrechte Trennstriche getrennt werden. Dazu können Sie angeben, wie die Trennstriche aussehen sollen. Diese Angabe sollten Sie stets mit einer Angabe zur  Trennstrichdicke kombinieren. Nur durch beide Angaben werden Trennstriche definiert.

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<div style="columns:2; column-rule-style:solid; column-rule-width:2mm">Inhalt</div>

Erläuterung:

Mit column-rule-style: können Sie das Aussehen der Trennstriche zwischen den Spalten bestimmen. Erlaubt sind dabei die gleichen Angaben wie beim  Rahmentyp für Rahmen zu einem beliebigen HTML-Element:

none = keine Trennstriche (Normaleinstellung).
dotted = gepunktete Trennstriche.
dashed = gestrichelte Trennstriche.
solid = durchgezogene Trennstriche.
double = doppelt durchgezogene Trennstriche.
groove = 3D-Effekt bei Trennstrichen.
ridge = 3D-Effekt bei Trennstrichen.
inset = 3D-Effekt bei Trennstrichen.
outset = 3D-Effekt bei Trennstrichen.

 

CSS2.0 Trennstrichfarbe (column-rule-color)

Beispiel Anzeigebeispiel: So sieht's aus

Sie können für Trennstriche zwischen den Spalten eines mehrspaltigen Textflusses die Farbe der Trennlinien bestimmen. Voraussetzung sind gleichzeitige Angaben zur  Trennstrichdicke und zum  Trennstrichtyp.

Beispiel (Style-Sheet-Definition im Dateikopf):

<style type="text/css">
  div.Glosse { columns:2; column-rule-style:solid; column-rule-width:2mm; column-rule-color:#FF0000; }
</style>

Erläuterung:

Mit column-rule-color: können Sie die Farbe für die Trennstriche angeben. Erlaubt ist eine  Farbangabe.

 

CSS2.0 Trennstrich (allgemein) - column-rule

Beispiel Anzeigebeispiel: So sieht's aus

Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
 Trennstrichdicke (column-rule-width)
 Trennstrichtyp (column-rule-style)
 Trennstrichfarbe (column-rule-color)

Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

<div style="column-rule:2mm solid green">Inhalt</div>

Erläuterung:

Mit column-rule: können Sie Angaben für Trennstriche zwischen den Spalten eines mehrspaltigen Textflusses zusammenfassen. Notieren Sie Angaben zur Trennstrichdicke, zum Trennstrichtyp sowie zur Trennstrichfarbe mit Leerzeichen dazwischen, so wie im Beispiel oben. Die Reihenfolge der Einzelangaben ist egal. Die Angabe zur Trennstrichfarbe ist optional.

weiter: Style-Sheet-Angaben: Seitenlayout und Seitenumbruch
zurück: Style-Sheet-Angaben: Elemente positionieren
 

SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheet-Angaben

© 1998  Stefan Münz, muenz@csi.com