Vorlage:Mehrspaltenlayout/Doku
Verwendung
[Bearbeiten]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
[Bearbeiten]Der Parameter strategie
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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
[Bearbeiten]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.
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.
| 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
| Einzeiliger Text | optional |
Float-Objekte beachten? | float-objekte-beachten | Sollen anderene gefloatete Objekte für die Breitenbestimmung berücksichtigt werden?
| 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.
| 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.