Hilfe:Mehrspaltenlayout

Aus ZUM Grundschullernportal




Tabellen

Der Einsatz von Tabellen im Grundschullernportal ist möglich und wird im ZUM-Wiki auf Hilfe:Tabellen ausführlich erklärt.


Achtung
Allerdings sollten Tabellen nur für tabellarische Daten und nicht zur Gestaltung von Webseiten dienen.


Mehrspaltenlayout

Es gibt Vorlagen für ein Mehrspalten-Layout auf großen Bildschirmen. Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.

2 Spalten

Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: Vorlage:2Spalten

Das sieht man:

Die Hintergrundfarben dienen nur der Veranschaulichung.

Spalte 1
Spalte 2

Das schreibt man:

{{2Spalten|
 Spalte 1
 |
 Spalte 2
 }}  
 

3 Spalten

Nähere Informationen und weitere Features findet man auf der Vorlagenseite unter: Vorlage:3Spalten

Das sieht man:

Die Hintergrundfarben dienen nur der Veranschaulichung.

Spalte 1
Spalte 2
Spalte 3



Das schreibt man:

{{3Spalten|
   Spalte 1
   |
   Spalte 2
   |
   Spalte 3
   }}  
 

HTML-Markup

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.

<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


<div class="grid">
 <div class="width-1-2">...</div>
 <div class="width-1-2">...</div>
</div>


.width-1-2
.width-1-2


<div class="grid">
 <div class="width-1-4">...</div>
 <div class="width-3-4">...</div>
</div>


.width-1-6
.width-5-6