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

| ## Style-Sheet-Angaben: Mehrspaltiger Textfluß
| 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.

## Anzahl Spalten (columns)

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.

## Spaltenabstand (column-gap)

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.

## Trennstrichdicke (column-rule-width)

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.

## Trennstrichtyp (cloumn-rule-style)

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.

## Trennstrichfarbe (column-rule-color)

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.

## Trennstrich (allgemein) - column-rule

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