<<InsertPage page='WidgetTrail'>>

Mit Spaltenansichten lassen sich Elemente wie z.B. Text oder Formulare nebeneinander anordnen. Dabei Klammert man die Bereiche mit {{{%%}}} und der [[Sonderformatierung]] scol, mcol oder lcol. Der Prefix S, M, und L steht dabei für die Breite der Spalte ([[KleidergrößenAnalogie]]). So kannst du eine schmale Spalte (scol) mit einer großen Spalte kombinieren (lcol) oder zwei gleichgroße Spalten nebeneinander schreiben. Ein {{%%clear}} sorgt für einen "Zeilenumbruch", so dass du Daten sogar tabellarisch anordnen kannst.

== Beispiel

{{{
%%mcol
Bereich Links Oben
%%

%%mcol
Bereich Rechts Oben
%%

%%clear
%%

%%mcol
Bereich Links Unten
%%

%%mcol
Bereich Rechts Unten
%%

%%clear
%%
}}}

Und so siehts aus:

%%mcol
Bereich Links Oben
%%

%%mcol
Bereich Rechts Oben
%%

%%clear
%%

%%mcol
Bereich Links Unten
%%

%%mcol
Bereich Rechts Unten
%%

%%clear
%%

== Bitte Beachten

Vergesse niemals den abschließenden Clear!. Der Clear ist als "Zeilenumbruch" zu verstehen. D.h. du kannst mehrere Spalten aneinanderreihen, dies ergibt eine "Zeile", mit einem "Clear" fängst du eine neue Zeile an. Allerdings solltest du, auch wenn du nur eine Zeile verwenden, mit clear abschließen, sonst werden evtl. Elemente des Templates, wie z.B. die Editierleiste verschoben!

{{{
%%mcol
linke Spalte
|=H1|=H2|=H3|
|1|2|3|
|1|2|3|
%%

%%mcol
Rechte Spalte
Diagramm
%%

%%clear
%%
}}}


Im folgenden ist Beispielcode für CSS gezeigt, der ihnen verdeutlicht, wie sie über ein Eigenen Template diese Größen auch an ihre wünsche anpassen können, denken sie aber immer daran letztendlich eine [[DeklarativeFormatierung]] zu verwenden, vermixen sie nicht layout mit content!


{{{

div.col {
    float: left;
    clear: none;
    width: 37%; 
    border-style: solid;
    border-width: 0px;
    border-color: #A8A8A8;
    padding: 4px;
    margin-left: 4px;
    margin-bottom: 4px;
}

div.mcol {
        float: left;
        clear: none;
        width: 37%;
        border-style: solid;
        border-width: 1px;
        border-color: #A8A8A8;
        padding: 4px;
        margin-left: 4px;
        margin-bottom: 4px;
}

div.scol {
        float: left;
        clear: none;
        width: 25%;
        border-style: solid;
        border-width: 1px;
        border-color: #A8A8A8;
        padding: 4px;
        margin-left: 4px;
        margin-bottom: 4px;
}

div.lcol {
        float: left;
        clear: none;
        width: 50%;
        border-style: solid;
        border-width: 1px;
        border-color: #A8A8A8;
        padding: 4px;
        margin-left: 4px;
        margin-bottom: 4px;
}

div.clear {
    clear: left;
}
}}}