Vorlage:Mehrspaltenlayout/Doku

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]

Parameter		Beschreibung	Typ	Status
Inhalt	inhalt 1	Der Inhalt des Kastens (bei Strategie CSS-Spaltenlayout).	Wikitext	optional
Anzahl Spalten	spaltenanzahl	Anzahl der Spalten	Einzeiliger Text	optional
Breite Spalten	spaltenbreite	Breite der Spalten	Einzeiliger Text	optional
Spalte 1	spalte1	Inhalt der ersten Spalte	Wikitext	optional
Spalte 2	spalte2	Inhalt der zweiten Spalte	Wikitext	optional
Spalte 3	spalte3	Inhalt der dritten Spalte	Wikitext	optional
Spalte 4	spalte4	Inhalt der vierten Spalte	Wikitext	optional
Spalte 5	spalte5	Inhalt der fünften Spalte	Wikitext	optional
Mindestbreite Spalten	spaltenmindestbreite	Mindestbreite aller Spalten	Einzeiliger Text	optional
Mindestbreite Spalte 1	spalte1-mindestbreite	Mindestbreite der 1. Spalte	Einzeiliger Text	optional
Mindestbreite Spalte 2	spalte2-mindestbreite	Mindestbreite der 2. Spalte	Einzeiliger Text	optional
Mindestbreite Spalte 3	spalte3-mindestbreite	Mindestbreite der 3. Spalte	Einzeiliger Text	optional
Mindestbreite Spalte 4	spalte4-mindestbreite	Mindestbreite der 4. Spalte	Einzeiliger Text	optional
Mindestbreite Spalte 5	spalte5-mindestbreite	Mindestbreite der 5. Spalte	Einzeiliger Text	optional
Breite Spalte 1	spalte1-breite	Breite der 1. Spalte	Einzeiliger Text	optional
Breite Spalte 2	spalte2-breite	Breite der 2. Spalte	Einzeiliger Text	optional
Breite Spalte 3	spalte3-breite	Breite der 3. Spalte	Einzeiliger Text	optional
Breite Spalte 4	spalte4-breite	Breite der 4. Spalte	Einzeiliger Text	optional
Breite Spalte 5	spalte5-breite	Breite der 5. Spalte	Einzeiliger Text	optional
CSS Spalte 1	spalte1-css	Zusätzliches CSS der 1. Spalte	Einzeiliger Text	optional
CSS Spalte 2	spalte2-css	Zusätzliches CSS der 2. Spalte	Einzeiliger Text	optional
CSS Spalte 3	spalte3-css	Zusätzliches CSS der 3. Spalte	Einzeiliger Text	optional
CSS Spalte 4	spalte4-css	Zusätzliches CSS der 4. Spalte	Einzeiliger Text	optional
CSS Spalte 5	spalte5-css	Zusätzliches CSS der 5. Spalte	Einzeiliger Text	optional
Noprint? (Spalte 1)	spalte1-noprint	Setze es auf „nein“, wenn 1. Spalte nicht in der Druckversion erscheinen soll.	Einzeiliger Text	optional
Noprint? (Spalte 2)	spalte2-noprint	Setze es auf „nein“, wenn 2. Spalte nicht in der Druckversion erscheinen soll.	Einzeiliger Text	optional
Noprint? (Spalte 3)	spalte3-noprint	Setze es auf „nein“, wenn 3. Spalte nicht in der Druckversion erscheinen soll.	Einzeiliger Text	optional
Noprint? (Spalte 4)	spalte4-noprint	Setze es auf „nein“, wenn 4. Spalte nicht in der Druckversion erscheinen soll.	Einzeiliger Text	optional
Noprint? (Spalte 5)	spalte5-noprint	Setze es auf „nein“, wenn 5. Spalte nicht in der Druckversion erscheinen soll.	Einzeiliger Text	optional
Nomobile? (Spalte 1)	spalte1-nomobile	Setze es auf „nein“, wenn 1. Spalte nicht in der mobilen Version erscheinen soll.	Einzeiliger Text	optional
Nomobile? (Spalte 2)	spalte2-nomobile	Setze es auf „nein“, wenn 2. Spalte nicht in der mobilen Version erscheinen soll.	Einzeiliger Text	optional
Nomobile? (Spalte 3)	spalte3-nomobile	Setze es auf „nein“, wenn 3. Spalte nicht in der mobilen Version erscheinen soll.	Einzeiliger Text	optional
Nomobile? (Spalte 4)	spalte4-nomobile	Setze es auf „nein“, wenn 4. Spalte nicht in der mobilen Version erscheinen soll.	Einzeiliger Text	optional
Nomobile? (Spalte 5)	spalte5-nomobile	Setze es auf „nein“, wenn 5. Spalte nicht in der mobilen Version erscheinen soll.	Einzeiliger Text	optional
Spalte 1 HTML-Tag	spalte1-html-tag	Name des HTML Elements für die 1. Spalte (muss Blockelement sein).	Einzeiliger Text	optional
Spalte 2 HTML-Tag	spalte2-html-tag	Name des HTML Elements für die 2. Spalte (muss Blockelement sein).	Einzeiliger Text	optional
Spalte 3 HTML-Tag	spalte3-html-tag	Name des HTML Elements für die 3. Spalte (muss Blockelement sein).	Einzeiliger Text	optional
Spalte 4 HTML-Tag	spalte4-html-tag	Name des HTML Elements für die 4. Spalte (muss Blockelement sein).	Einzeiliger Text	optional
Spalte 5 HTML-Tag	spalte5-html-tag	Name des HTML Elements für die 5. Spalte (muss Blockelement sein).	Einzeiliger Text	optional
Inline? (Spalte 1)	spalte1-inline	Setze es auf „ja“, wenn die 1. Spalte nur aus Inline-Text besteht.	Einzeiliger Text	optional
Inline? (Spalte 2)	spalte2-inline	Setze es auf „ja“, wenn die 2. Spalte nur aus Inline-Text besteht.	Einzeiliger Text	optional
Inline? (Spalte 3)	spalte3-inline	Setze es auf „ja“, wenn die 3. Spalte nur aus Inline-Text besteht.	Einzeiliger Text	optional
Inline? (Spalte 4)	spalte4-inline	Setze es auf „ja“, wenn die 4. Spalte nur aus Inline-Text besteht.	Einzeiliger Text	optional
Inline? (Spalte 5)	spalte5-inline	Setze es auf „ja“, wenn die 5. Spalte nur aus Inline-Text besteht.	Einzeiliger Text	optional
Style	style	Das Design des Kastens.	Einzeiliger Text	optional
Position	position	Die Positionierung und Ausrichtung des Kastens. Standard ganze Breite	Einzeiliger Text	optional
Breite	width	Die Breite des Kastens.	Einzeiliger Text	optional
Maximale Breite	max-width	Die maximale Breite des Kastens.	Einzeiliger Text	optional
Minimale Breite	min-width	Die minimale Breite des Kastens.	Einzeiliger Text	optional
Außenabstand	außenabstand	Außenabstand bei mittig zentrierten Kästen.	Einzeiliger Text	optional
Clear	clear	Wert der CSS-Eigenschaft „clear“.	Einzeiliger Text	optional
Tag-Name	html-tag	Name des HTML Tag Namens für den Kasten Standard div	Einzeiliger Text	optional
Float-Objekte beachten?	float-objekte-beachten	Sollen anderene gefloatete Objekte für die Breitenbestimmung berücksichtigt werden? Standard ja	Einzeiliger Text	optional
Weiteres CSS	css	Weiteres CSS für den Kasten	Einzeiliger Text	optional
Inline?	inline	Setze diesen Parameter auf „ja“, wenn der Inhalt nur Inline-Text ist. Standard nein	Einzeiliger Text	optional
No-Mobile?	nomobile	Setze diesen Parameter auf „ja“, wenn der Inhalt auf mobilen Seiten versteckt werden soll.	Einzeiliger Text	optional
No-Print?	noprint	Setze diesen Parameter auf „ja“, wenn der Inhalt in der Druckversion der Seite versteckt werden soll.	Einzeiliger Text	optional
ID	id	Setzt das HTML-Attribut id des HTML-Elements.	Einzeiliger Text	optional
Mf-ID	mf-id	MF-ID (siehe Vorlagendokumentation)	Einzeiliger Text	optional

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.