Hilfe für Spalten#

Mit columns kann eine Seite ganz einfach mehrspaltig gestaltet werden. Mit den vier Bindestrichen (linksbündig) wird dem System mitgeteilt, dass eine weitere Spalte hinzukommt. Vor und nach dem Trennstrich wird der Text oder das Bild eingefügt.

Achtung: Kommt nach dem Befehl columns Text, dann muss eine Leerzeile eingefügt werden.

%%columns

Inhalt der ersten Spalte
----
Inhalt der zweiten Spalte
%%

Die Breite der Spalte wird hier von der Anzahl der Spalten und von der Fensterbreite berechnet.

Beispiel:

wird atm nicht unterstützt

Spaltenbreite#

%%columns-Integer; Integer;
Inhalt der ersten Spalte
----
Inhalt der zweiten Spalte
%%

Mit dem Integerwerten können die Breiten der einzelnen Spalten definiert werden. Wenn in einer Spalte ein Bild ist, bitte immer darauf achten, daß die Bildbreite kleiner ist als die Spaltenbreite.

Beispiel:

%%columns-400;400;

Lorem ...
----
[{Image src='RedakII_790313a_1.jpg' caption='Bildunterschrift' alt='Bildbeschreibung' width='250'}]
%%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

---

Bildunterschrift

Spalten auffüllen#

Sollen mehrere Bilder nebeneinander liegen, so wird dies mit diesem Befehl gemacht. Dabei werden von links beginnend die Bilder aneinander gelegt, ohne dass man für jedes Bild die genaue Breite angeben muss.

Achtung: Dieser Befehl funktioniert nur mit Bildern!

Und nach dem Befehl columns keine Leerzeile einfügen!

%%columns-fill
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
%%

Beispiel:

%%columns-fill
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
%%

---

---

---

Spalten ausrichten#

horizontal zentrieren#

Mit diesem Befehlsblock können mehrere Bilder horizontal in der Mitte der Seite positioniert werden. Zu beachten hierbei ist, dass die Gesamtbreite aller Spalten größer sein muss, als die Summe der Breiten der einzelnen Spalten, damit Zwischenräume bleiben.

%%(margin:0 auto; width: Integer px;)
%%columns-fill
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
%%
%%

Beispiel:

%%(margin:0 auto; width: 660px;)
%%columns-fill
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100'}]
%% 
%%

---

---

---

Zur Erläuterung: Jedes der vier Bilder ist 160 Pixel breit. 160 x 4 = 640. Die Gesamtbreite wurde daher mit 660 px angegeben. Sind die Bilder verschieden breit, geht das genau so, wenn man korrekt rechnet.

vertikal zentrieren#

%%(margin:0 auto; width: Integer px; height: Integer px;)
%%columns-Integer;Integer;
[{Image src='Bildname' alt='Bildbeschreibung' style='position:relative; top:Integer px;'}]
----
Text
%%
%%

Beispiel:

%%(margin:0 auto; width: 680px; height: 300 px;)
%%columns-165;500;
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' style='position:relative;top:75px;'}]
----
Lorem ... 
%% 
%%

---

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Spalten mit Rahmen#

%%coolborder-Integer
%%columns-fill
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
----
[{Image src='Bild' alt='Bildbeschreibung'}]
%%
%%

Der Wert der Coolborder-Spalte muss immer größer sein als die Summe der Breiten der einzelnen Bilder.

Beispiel:

---

---

---