Spaltenansicht

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

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;
}