Hilfe:Spalten: Unterschied zwischen den Versionen

Aus ZUM Projektwiki
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
K (Maria Eirich verschob die Seite Hilfe:Spalten nach Hilfe:Spalten)
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 5: Zeile 5:
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.   
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 '''
<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
<div class="grid">
<div class="grid">
  <div class="width-1-3">...</div>
  <div class="width-1-2">...</div>
  <div class="width-1-3">...</div>
  <div class="width-1-2">...</div>
<div class="width-1-3">...</div>
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


<div class="grid">
<div class="grid">
  <div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>.width-1-3</code></div></div>
  <div class="width-1-2"><div style="background: #eee; padding: 1rem"><code>width-1-2</code></div></div>
  <div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>.width-1-3</code></div></div>
  <div class="width-1-2"><div style="background: #eee; padding: 1rem"><code>width-1-2</code></div></div>
<div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>.width-1-3</code></div></div>
</div>
</div>


 
'''Beispiel 2 '''
<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
<div class="grid">
<div class="grid">
  <div class="width-1-2">...</div>
  <div class="width-1-3">...</div>
  <div class="width-1-2">...</div>
  <div class="width-1-3">...</div>
<div class="width-1-3">...</div>
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


<div class="grid">
<div class="grid">
  <div class="width-1-2"><div style="background: #eee; padding: 1rem"><code>.width-1-2</code></div></div>
  <div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>width-1-3</code></div></div>
  <div class="width-1-2"><div style="background: #eee; padding: 1rem"><code>.width-1-2</code></div></div>
  <div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>width-1-3</code></div></div>
<div class="width-1-3"><div style="background: #eee; padding: 1rem"><code>width-1-3</code></div></div>
</div>
</div>


 
'''Beispiel 3 '''
<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
<div class="grid">
<div class="grid">
Zeile 41: Zeile 42:


<div class="grid">
<div class="grid">
  <div class="width-1-6"><div style="background: #eee; padding: 1rem"><code>.width-1-6</code></div></div>
  <div class="width-1-6"><div style="background: #eee; padding: 1rem"><code>width-1-6</code></div></div>
  <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 24. März 2019, 22:41 Uhr

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

2 Spalten

{{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}}
}}
Video laden
YouTube
Abgerufen von „https://projekte.zum.de/index.php?title=Hilfe:Spalten&oldid=6989“