Zum Inhalt springen

Vorlage:Mehrspaltenlayout

Aus Wikibooks

Informationen zu dieser Dokumentation
Vorlage Mehrspaltenlayout [Bearbeiten]

Verwendung

Mit Hilfe dieser Vorlage kann ein Mehrspaltenlayout ohne Einsatz von Tabellen umgesetzt werden. Beachte, dass laut aktuellen HTML-Standards keine Tabellen für ein Design verwendet werden sollen.

Beispiel:

{{Mehrspaltenlayout
 |inhalt={{Blindtext}}

{{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Die Parameter

Der Parameter strategie

Es gibt mehrere Möglichkeiten ein tabellenfreies Spaltenlayout umzusetzen. Die eingesetzte Methode wird über den Paramter strategie gesteuert. Es gibt folgende Möglichkeiten:

Wert für strategie Eingesetzte Methode
CSS-Spaltenlayout“ oder „kein Wert“ Spaltenlayout wird über das neue CSS Multi-column Layout realisiert (also über die CSS-Eigenschaften mit Präfix column)
gefloatete Spalten Spaltenlayout wird über gefloatete <div>-Tags realisiert.
CSS-Tabellenlayout Spaltenlayout wird über display:table und display:table-cell realisiert.

CSS-Spaltenlayout

Dies ist die Standard-Methode, wenn strategie nicht angegeben ist. Der Inhalt wird durch den Parameter inhalt oder 1 angegeben.

Durch Angabe vom Parameter spaltenanzahl kann die Anzahl der Spalten angegeben werden. Es wird dann automatisch die optimale Breite einer Spalte je nach Breite des Bildschirms ermittelt. Das Layout passt sich damit optimal der Bildschirmbreite an (beachte, dass unsere Webseiten sowohl auf ein Handy als auch auf dem Bildschirm schön aussehen müssen). Der Parameter spaltenzahl entspricht damit der CSS-Eigenschaft column-count. Dieser Parameter wird nur dann ausgewertet, wenn spaltenbreite nicht gesetzt ist.

Alternativ lässt sich mit spaltenbreite eine Spaltenbreite angeben. Der Browser ermittelt dann je nach verfügbarer Breite die optimale Spaltenbreite. Damit entspricht dieser Parameter der CSS-Eigenschaft column-width.

Beispiel:

{{Mehrspaltenlayout
 |spaltenbreite=200px
 |position=mittig
 |style=grauer Rahmen
 |inhalt={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Beachte, dass diese Methode nur in neueren Browsern funktioniert. Auf der Seite http://caniuse.com/#feat=multicolumn ist erkenntlich, welche Browser diese Strategie unterstützen. Ältere Browser zeigen den Text gewohnt untereinander, anstatt in Spalten an. Außerdem lässt sich mit dieser Methode nicht kontrollieren, wann der Spaltenumbruch stattfindet.

Wenn der Text aus einem langem Paragraphen besteht, muss inline=ja gesetzt werden, damit ein Mehrspaltenlayout entsteht. In der Regel sollte dann auch html-tag=p gesetzt werden.

Beispiel:

{{Mehrspaltenlayout
 |inline=ja
 |html-tag=p
 |inhalt={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

gefloatete Spalten

Bei dieser Methode werden die einzelnen Spalten gefloatet. Hier müssen die Inhalte der einzelnen Spalten explizit in den Parametern spalte1 bis maximal spalte5 angegeben werden. Beispiel:

Beispiel:

{{Mehrspaltenlayout
 |strategie=gefloatete Spalten
 |spalte1={{Blindtext}}
 |spalte2={{Blindtext}}
 |spalte3={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Der Vorteil an dieser Lösung ist, dass genau kontrolliert werden kann, was in den einzelnen Spalten steht. Außerdem kann mit dem Paramter spaltenmindestbreite bzw. den Parametern spalte1-mindestbreite bis spalte5-mindestbreite die Mindestbreite einer Spalte angegeben werden. Auf kleinen Bildschirmen werden dann die Spalten automatisch umgebrochen.

Beispiel:

{{Mehrspaltenlayout
 |strategie=gefloatete Spalten
 |spalte1={{Blindtext}}
 |spalte2={{Blindtext}}
 |spalte3={{Blindtext}}
 |spalte4={{Blindtext}}
 |spalte5={{Blindtext}}
 |spaltenmindestbreite=49%
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In den Parametern spalte1-css bis spalte5-css kann zusätzliches CSS für die jeweilige Spalte definiert werden.

CSS-Tabellenlayout

Auch hier werden die Spalten mit spalte1 bis spalte5 angegeben. Anders als bei der Methode „gefloatete Spalten“ werden die Spalten nicht automatisch umgebrochen. Am Ende verhalten sie sich wie eine Tabelle. Mit Hilfe der Parameter spalte1-breite bis spalte5-breite können die Breiten der einzelnen Spalten angegeben werden, wenn das gewünscht ist (optionale Parameter).

CSS-Tabellenlayout mit verschiedenen Spaltenbreiten:

{{Mehrspaltenlayout
 |strategie=CSS-Tabellenlayout
 |spalte1={{Blindtext}}
 |spalte1-breite=30ex
 |spalte2={{Blindtext}}
 |spalte2-breite=50ex
 |spalte3={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Problem bei dieser Strategie ist, dass sich die Spalten nicht anpassen, wenn die Bildschirmbreite nicht ausreicht.

Übernommene Parameter von Vorlage:HTMLTag

Von der Vorlage Vorlage:HTMLTag können folgende Parameter übernommen werden:

  • noprint
  • nomobile
  • mf-id
  • inline
  • clear
  • html-tag
  • css
  • id
  • float-objekte-beachten

In den Strategien „gefloatete Spalten“ und „CSS-Tabellenlayout“ können pro Spalte auch folgende Parameter genutzt werden, wobei die Parameter dann die Präfixe spalte1- bis spalte5- haben:

  • noprint
  • nomobile
  • inline
  • html-tag
  • css

Beispielsweise kann man mit spalte1-noprint bis spalte5-noprint steuern, ob die einzelnen Spalten in der Druckversion erscheinen sollen oder nicht.

Übernommene Parameter von Vorlage:Kasten

Diese Vorlage basiert auf Vorlage:Kasten. Folgende Parameter wurden übernommen und können auch für diese Vorlage verwendet werden:

  • style
  • position
  • width
  • max-width
  • min-width
  • außenabstand

Beispiel:

{{Mehrspaltenlayout
 |position=mittig
 |style=blauer Rahmen
 |inhalt={{Blindtext}}
}}

Ergebnis:

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vorlagen-Spezifikation

Vorlagen für ein Layout mit mehreren Spalten.

Vorlagenparameter[Vorlagendaten bearbeiten]

ParameterBeschreibungTypStatus
Inhaltinhalt 1

Der Inhalt des Kastens (bei Strategie CSS-Spaltenlayout).

Wikitextoptional
Anzahl Spaltenspaltenanzahl

Anzahl der Spalten

Einzeiliger Textoptional
Breite Spaltenspaltenbreite

Breite der Spalten

Einzeiliger Textoptional
Spalte 1spalte1

Inhalt der ersten Spalte

Wikitextoptional
Spalte 2spalte2

Inhalt der zweiten Spalte

Wikitextoptional
Spalte 3spalte3

Inhalt der dritten Spalte

Wikitextoptional
Spalte 4spalte4

Inhalt der vierten Spalte

Wikitextoptional
Spalte 5spalte5

Inhalt der fünften Spalte

Wikitextoptional
Mindestbreite Spaltenspaltenmindestbreite

Mindestbreite aller Spalten

Einzeiliger Textoptional
Mindestbreite Spalte 1spalte1-mindestbreite

Mindestbreite der 1. Spalte

Einzeiliger Textoptional
Mindestbreite Spalte 2spalte2-mindestbreite

Mindestbreite der 2. Spalte

Einzeiliger Textoptional
Mindestbreite Spalte 3spalte3-mindestbreite

Mindestbreite der 3. Spalte

Einzeiliger Textoptional
Mindestbreite Spalte 4spalte4-mindestbreite

Mindestbreite der 4. Spalte

Einzeiliger Textoptional
Mindestbreite Spalte 5spalte5-mindestbreite

Mindestbreite der 5. Spalte

Einzeiliger Textoptional
Breite Spalte 1spalte1-breite

Breite der 1. Spalte

Einzeiliger Textoptional
Breite Spalte 2spalte2-breite

Breite der 2. Spalte

Einzeiliger Textoptional
Breite Spalte 3spalte3-breite

Breite der 3. Spalte

Einzeiliger Textoptional
Breite Spalte 4spalte4-breite

Breite der 4. Spalte

Einzeiliger Textoptional
Breite Spalte 5spalte5-breite

Breite der 5. Spalte

Einzeiliger Textoptional
CSS Spalte 1spalte1-css

Zusätzliches CSS der 1. Spalte

Einzeiliger Textoptional
CSS Spalte 2spalte2-css

Zusätzliches CSS der 2. Spalte

Einzeiliger Textoptional
CSS Spalte 3spalte3-css

Zusätzliches CSS der 3. Spalte

Einzeiliger Textoptional
CSS Spalte 4spalte4-css

Zusätzliches CSS der 4. Spalte

Einzeiliger Textoptional
CSS Spalte 5spalte5-css

Zusätzliches CSS der 5. Spalte

Einzeiliger Textoptional
Noprint? (Spalte 1)spalte1-noprint

Setze es auf „nein“, wenn 1. Spalte nicht in der Druckversion erscheinen soll.

Einzeiliger Textoptional
Noprint? (Spalte 2)spalte2-noprint

Setze es auf „nein“, wenn 2. Spalte nicht in der Druckversion erscheinen soll.

Einzeiliger Textoptional
Noprint? (Spalte 3)spalte3-noprint

Setze es auf „nein“, wenn 3. Spalte nicht in der Druckversion erscheinen soll.

Einzeiliger Textoptional
Noprint? (Spalte 4)spalte4-noprint

Setze es auf „nein“, wenn 4. Spalte nicht in der Druckversion erscheinen soll.

Einzeiliger Textoptional
Noprint? (Spalte 5)spalte5-noprint

Setze es auf „nein“, wenn 5. Spalte nicht in der Druckversion erscheinen soll.

Einzeiliger Textoptional
Nomobile? (Spalte 1)spalte1-nomobile

Setze es auf „nein“, wenn 1. Spalte nicht in der mobilen Version erscheinen soll.

Einzeiliger Textoptional
Nomobile? (Spalte 2)spalte2-nomobile

Setze es auf „nein“, wenn 2. Spalte nicht in der mobilen Version erscheinen soll.

Einzeiliger Textoptional
Nomobile? (Spalte 3)spalte3-nomobile

Setze es auf „nein“, wenn 3. Spalte nicht in der mobilen Version erscheinen soll.

Einzeiliger Textoptional
Nomobile? (Spalte 4)spalte4-nomobile

Setze es auf „nein“, wenn 4. Spalte nicht in der mobilen Version erscheinen soll.

Einzeiliger Textoptional
Nomobile? (Spalte 5)spalte5-nomobile

Setze es auf „nein“, wenn 5. Spalte nicht in der mobilen Version erscheinen soll.

Einzeiliger Textoptional
Spalte 1 HTML-Tagspalte1-html-tag

Name des HTML Elements für die 1. Spalte (muss Blockelement sein).

Einzeiliger Textoptional
Spalte 2 HTML-Tagspalte2-html-tag

Name des HTML Elements für die 2. Spalte (muss Blockelement sein).

Einzeiliger Textoptional
Spalte 3 HTML-Tagspalte3-html-tag

Name des HTML Elements für die 3. Spalte (muss Blockelement sein).

Einzeiliger Textoptional
Spalte 4 HTML-Tagspalte4-html-tag

Name des HTML Elements für die 4. Spalte (muss Blockelement sein).

Einzeiliger Textoptional
Spalte 5 HTML-Tagspalte5-html-tag

Name des HTML Elements für die 5. Spalte (muss Blockelement sein).

Einzeiliger Textoptional
Inline? (Spalte 1)spalte1-inline

Setze es auf „ja“, wenn die 1. Spalte nur aus Inline-Text besteht.

Einzeiliger Textoptional
Inline? (Spalte 2)spalte2-inline

Setze es auf „ja“, wenn die 2. Spalte nur aus Inline-Text besteht.

Einzeiliger Textoptional
Inline? (Spalte 3)spalte3-inline

Setze es auf „ja“, wenn die 3. Spalte nur aus Inline-Text besteht.

Einzeiliger Textoptional
Inline? (Spalte 4)spalte4-inline

Setze es auf „ja“, wenn die 4. Spalte nur aus Inline-Text besteht.

Einzeiliger Textoptional
Inline? (Spalte 5)spalte5-inline

Setze es auf „ja“, wenn die 5. Spalte nur aus Inline-Text besteht.

Einzeiliger Textoptional
Stylestyle

Das Design des Kastens.

Einzeiliger Textoptional
Positionposition

Die Positionierung und Ausrichtung des Kastens.

Standard
ganze Breite
Einzeiliger Textoptional
Breitewidth

Die Breite des Kastens.

Einzeiliger Textoptional
Maximale Breitemax-width

Die maximale Breite des Kastens.

Einzeiliger Textoptional
Minimale Breitemin-width

Die minimale Breite des Kastens.

Einzeiliger Textoptional
Außenabstandaußenabstand

Außenabstand bei mittig zentrierten Kästen.

Einzeiliger Textoptional
Clearclear

Wert der CSS-Eigenschaft „clear“.

Einzeiliger Textoptional
Tag-Namehtml-tag

Name des HTML Tag Namens für den Kasten

Standard
div
Einzeiliger Textoptional
Float-Objekte beachten?float-objekte-beachten

Sollen anderene gefloatete Objekte für die Breitenbestimmung berücksichtigt werden?

Standard
ja
Einzeiliger Textoptional
Weiteres CSScss

Weiteres CSS für den Kasten

Einzeiliger Textoptional
Inline?inline

Setze diesen Parameter auf „ja“, wenn der Inhalt nur Inline-Text ist.

Standard
nein
Einzeiliger Textoptional
No-Mobile?nomobile

Setze diesen Parameter auf „ja“, wenn der Inhalt auf mobilen Seiten versteckt werden soll.

Einzeiliger Textoptional
No-Print?noprint

Setze diesen Parameter auf „ja“, wenn der Inhalt in der Druckversion der Seite versteckt werden soll.

Einzeiliger Textoptional
IDid

Setzt das HTML-Attribut id des HTML-Elements.

Einzeiliger Textoptional
Mf-IDmf-id

MF-ID (siehe Vorlagendokumentation)

Einzeiliger Textoptional

Hinweis: Diese Vorlagen-Spezifikation wurde mit Hilfe der Parsererweiterung <templatedata> erstellt. Siehe Vorlage:TemplateData für eine Erklärung, wie du <templatedata> auf Wikibooks verwenden kannst.

<templatedata> wird unter anderem vom VisualEditor verwendet. Eine ausführliche Hilfe zu dieser Parsererweiterung findest auf der Seite Help:TemplateData.