[{ALLOW view All}]
[{ALLOW edit Admin}]
!!!Hilfe für Spalten
[{TableOfContents }]

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:''__
%%columns

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.
----
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.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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.
%%


%%(display:none)
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' height='157'}]
%%}}}

%%columns-400;400;

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.
----
[{Image src='RedakII_790313a_1.jpg' caption='Bildunterschrift' alt='Bildbeschreibung' width='250' height='157'}]
%%
%%
!!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' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
%%
}}}
%%columns-fill
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
%%

!!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' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
%% 
%%}}}

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

__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;' width='158'}]
----
Lorem ... 
%% 
%%}}}
%%(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;' width='158'}]
----
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:''__
%%coolborder-658
%%columns-fill
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
----
[{Image src='RedakII_790313a_1.jpg' alt='Bildbeschreibung' height='100' width='158'}]
%%
%%


[{Metadata Suchbegriff=' Hilfe Spalte'}]