Hilfe:Spalten: Unterschied zwischen den Versionen

Aus RMG-Wiki
K (1 Version importiert)
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(18 dazwischenliegende Versionen desselben Benutzers 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>
== 2 Spalten ==
{{2Spalten
|
<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}}
}}

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