Hilfe:Spalten: Unterschied zwischen den Versionen

Aus RMG-Wiki
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 17: Zeile 17:
Spalte 2
Spalte 2
}}
}}
== 2 Spalten - Beispiel: Text / Video==
== 3 Spalten  ==
{{3Spalten
|
Spalte 1
 
 
 
;Syntax:
<pre>
{{3Spalten
|
Spalte 1
|
Spalte 2
|
Spalte 3
}}
</pre>
|
Spalte 2
|
Spalte 3
}}
== 2 Spalten - Beispiel==
{{2Spalten
{{2Spalten
|
|
Zeile 40: Zeile 63:
}}
}}


== 3 Spalten ==
 
 
== 3 Spalten - Beispiel ==
{{3Spalten
{{3Spalten
|
|

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