Hilfe:Spalten: Unterschied zwischen den Versionen

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


== 3 Spalten ==
 
 
== 3 Spalten - Beispiel ==
{{3Spalten
{{3Spalten
|
|
Hier steht folgender Text: .....
Spalte 1
 




Zeile 30: Zeile 78:
{{3Spalten
{{3Spalten
|
|
Hier steht folgender Text: .....
Spalte 1
|
|
[[File:Salisbury_High_School,_LehighCo_PA.JPG|300px|center]]
Spalte 2
|
|
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
{{LearningApp|app=pqbhije8201|width=100%|height=400px}}
Zeile 38: Zeile 86:
</pre>  
</pre>  
|
|
[[File:Salisbury_High_School,_LehighCo_PA.JPG|300px|center]]
Spalte 2




Zeile 46: Zeile 94:
}}
}}


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