Hilfe:Spalten: Unterschied zwischen den Versionen

Aus RMG-Wiki
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 2: Zeile 2:
{{2Spalten
{{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>
<pre>
{{2Spalten
{{2Spalten
Zeile 15: Zeile 63:
}}
}}


== 3 Spalten ==
 
{{2Spalten
 
== 3 Spalten - Beispiel ==
{{3Spalten
|
|
Spalte 1
;Syntax:
<pre>
<pre>
{{2Spalten
{{3Spalten
|
Spalte 1
|
|
Hier steht ein Text oder Bild...
Spalte 2
|
|
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
}}
}}
</pre>  
</pre>  
|
Spalte 2
|
|
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
}}
}}


Die Vorlage erlaubt es 3 Spalten zu erzeugen.
'''So sieht's aus:''' Die Hintergrundfarben dienen nur der Veranschaulichung.
{{Vorlage:3Spalten
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
|{{Box-spezial | Titel = Spalte 3 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-rechts | 1}}}}
}}


;Syntax:
  <nowiki>{{3Spalten|
  Spalte 1
  |
  Spalte 2
  |
  Spalte 3
  }} 
</nowiki>
== 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.

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