Vorlage:Mehrspaltenlayout

Aus Wikibooks
Zur Navigation springen Zur Suche springen

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

ParameterBeschreibungTypStatus
Inhaltinhalt 1

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

Inhaltoptional
Anzahl Spaltenspaltenanzahl

Anzahl der Spalten

Zeileoptional
Breite Spaltenspaltenbreite

Breite der Spalten

Zeileoptional
Spalte 1spalte1

Inhalt der ersten Spalte

Inhaltoptional
Spalte 2spalte2

Inhalt der zweiten Spalte

Inhaltoptional
Spalte 3spalte3

Inhalt der dritten Spalte

Inhaltoptional
Spalte 4spalte4

Inhalt der vierten Spalte

Inhaltoptional
Spalte 5spalte5

Inhalt der fünften Spalte

Inhaltoptional
Mindestbreite Spaltenspaltenmindestbreite

Mindestbreite aller Spalten

Zeileoptional
Mindestbreite Spalte 1spalte1-mindestbreite

Mindestbreite der 1. Spalte

Zeileoptional
Mindestbreite Spalte 2spalte2-mindestbreite

Mindestbreite der 2. Spalte

Zeileoptional
Mindestbreite Spalte 3spalte3-mindestbreite

Mindestbreite der 3. Spalte

Zeileoptional
Mindestbreite Spalte 4spalte4-mindestbreite

Mindestbreite der 4. Spalte

Zeileoptional
Mindestbreite Spalte 5spalte5-mindestbreite

Mindestbreite der 5. Spalte

Zeileoptional
Breite Spalte 1spalte1-breite

Breite der 1. Spalte

Zeileoptional
Breite Spalte 2spalte2-breite

Breite der 2. Spalte

Zeileoptional
Breite Spalte 3spalte3-breite

Breite der 3. Spalte

Zeileoptional
Breite Spalte 4spalte4-breite

Breite der 4. Spalte

Zeileoptional
Breite Spalte 5spalte5-breite

Breite der 5. Spalte

Zeileoptional
CSS Spalte 1spalte1-css

Zusätzliches CSS der 1. Spalte

Zeileoptional
CSS Spalte 2spalte2-css

Zusätzliches CSS der 2. Spalte

Zeileoptional
CSS Spalte 3spalte3-css

Zusätzliches CSS der 3. Spalte

Zeileoptional
CSS Spalte 4spalte4-css

Zusätzliches CSS der 4. Spalte

Zeileoptional
CSS Spalte 5spalte5-css

Zusätzliches CSS der 5. Spalte

Zeileoptional
Noprint? (Spalte 1)spalte1-noprint

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

Zeileoptional
Noprint? (Spalte 2)spalte2-noprint

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

Zeileoptional
Noprint? (Spalte 3)spalte3-noprint

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

Zeileoptional
Noprint? (Spalte 4)spalte4-noprint

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

Zeileoptional
Noprint? (Spalte 5)spalte5-noprint

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

Zeileoptional
Nomobile? (Spalte 1)spalte1-nomobile

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

Zeileoptional
Nomobile? (Spalte 2)spalte2-nomobile

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

Zeileoptional
Nomobile? (Spalte 3)spalte3-nomobile

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

Zeileoptional
Nomobile? (Spalte 4)spalte4-nomobile

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

Zeileoptional
Nomobile? (Spalte 5)spalte5-nomobile

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

Zeileoptional
Spalte 1 HTML-Tagspalte1-html-tag

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

Zeileoptional
Spalte 2 HTML-Tagspalte2-html-tag

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

Zeileoptional
Spalte 3 HTML-Tagspalte3-html-tag

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

Zeileoptional
Spalte 4 HTML-Tagspalte4-html-tag

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

Zeileoptional
Spalte 5 HTML-Tagspalte5-html-tag

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

Zeileoptional
Inline? (Spalte 1)spalte1-inline

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

Zeileoptional
Inline? (Spalte 2)spalte2-inline

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

Zeileoptional
Inline? (Spalte 3)spalte3-inline

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

Zeileoptional
Inline? (Spalte 4)spalte4-inline

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

Zeileoptional
Inline? (Spalte 5)spalte5-inline

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

Zeileoptional
Stylestyle

Das Design des Kastens.

Zeileoptional
Positionposition

Die Positionierung und Ausrichtung des Kastens.

Standard
ganze Breite
Zeileoptional
Breitewidth

Die Breite des Kastens.

Zeileoptional
Maximale Breitemax-width

Die maximale Breite des Kastens.

Zeileoptional
Minimale Breitemin-width

Die minimale Breite des Kastens.

Zeileoptional
Außenabstandaußenabstand

Außenabstand bei mittig zentrierten Kästen.

Zeileoptional
Clearclear

Wert der CSS-Eigenschaft „clear“.

Zeileoptional
Tag-Namehtml-tag

Name des HTML Tag Namens für den Kasten

Standard
div
Zeileoptional
Float-Objekte beachten?float-objekte-beachten

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

Standard
ja
Zeileoptional
Weiteres CSScss

Weiteres CSS für den Kasten

Zeileoptional
Inline?inline

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

Standard
nein
Zeileoptional
No-Mobile?nomobile

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

Zeileoptional
No-Print?noprint

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

Zeileoptional
IDid

Setzt das HTML-Attribut id des HTML-Elements.

Zeileoptional
Mf-IDmf-id

MF-ID (siehe Vorlagendokumentation)

Zeileoptional

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.