Hilfe:Spalten: Unterschied zwischen den Versionen
Aus RMG-Wiki
K (Maria Eirich verschob die Seite Hilfe:Tabellen nach Hilfe:Spalten) |
Keine Bearbeitungszusammenfassung Markierung: 2017-Quelltext-Bearbeitung |
||
(19 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
== 2 Spalten == | |||
{{2Spalten | |||
| | |||
Spalte 1 | |||
;Syntax: | |||
<pre> | |||
{{2Spalten | |||
| | |||
Spalte 1 | |||
| | |||
Spalte 2 | |||
}} | |||
</pre> | |||
| | |||
Spalte 2 | |||
}} | |||
== 3 Spalten == | |||
{{3Spalten | |||
| | |||
Spalte 1 | |||
;Syntax: | |||
<pre> | |||
{{3Spalten | |||
| | |||
Spalte 1 | |||
| | |||
Spalte 2 | |||
| | |||
Spalte 3 | |||
}} | |||
</pre> | |||
| | |||
Spalte 2 | |||
| | |||
Spalte 3 | |||
}} | |||
== 2 Spalten - Beispiel== | |||
{{2Spalten | |||
| | |||
Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird. | |||
;Syntax: | |||
<pre> | |||
{{2Spalten | |||
| | |||
Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird. | |||
| | |||
{{#ev:youtube|lJnQChnv1T4|460|center}} | |||
}} | |||
</pre> | |||
| | |||
{{#ev:youtube|lJnQChnv1T4|460|center}} | |||
}} | |||
== 3 Spalten - Beispiel == | |||
{{3Spalten | |||
| | |||
Spalte 1 | |||
;Syntax: | |||
<pre> | |||
{{3Spalten | |||
| | |||
Spalte 1 | |||
| | |||
Spalte 2 | |||
| | |||
{{LearningApp|app=pqbhije8201|width=100%|height=400px}} | |||
}} | |||
</pre> | |||
| | |||
Spalte 2 | |||
| | |||
{{LearningApp|app=pqbhije8201|width=100%|height=400px}} | |||
}} | |||
== Flexible Spalten == | == Flexible Spalten == | ||
Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an. | Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an. | ||
Zeile 45: | Zeile 141: | ||
<div class="width-5-6"><div style="background: #eee; padding: 1rem"><code>width-5-6</code></div></div> | <div class="width-5-6"><div style="background: #eee; padding: 1rem"><code>width-5-6</code></div></div> | ||
</div> | </div> | ||
Aktuelle Version vom 3. März 2024, 21:24 Uhr
2 Spalten
Spalte 1
- Syntax
{{2Spalten | Spalte 1 | Spalte 2 }}
Spalte 2
3 Spalten
Spalte 1
- Syntax
{{3Spalten | Spalte 1 | Spalte 2 | Spalte 3 }}
Spalte 2
Spalte 3
2 Spalten - Beispiel
Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird.
- Syntax
{{2Spalten | Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird. | {{#ev:youtube|lJnQChnv1T4|460|center}} }}
3 Spalten - Beispiel
Spalte 1
- Syntax
{{3Spalten | Spalte 1 | Spalte 2 | {{LearningApp|app=pqbhije8201|width=100%|height=400px}} }}
Spalte 2
Flexible Spalten
Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an. Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.
Um die Inhalte in einer Spalte anzuordnen, schreibt man sie an die Stelle der drei Punkte (…) in den folgenden Beispielen. Dabei kann man auch Absätze, Listen, Tabellen etc. verwenden.
Beispiel 1
<div class="grid">
<div class="width-1-2">...</div>
<div class="width-1-2">...</div>
</div>
width-1-2
width-1-2
Beispiel 2
<div class="grid">
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
</div>
width-1-3
width-1-3
width-1-3
Beispiel 3
<div class="grid">
<div class="width-1-6">...</div>
<div class="width-5-6">...</div>
</div>
width-1-6
width-5-6