Mit Spaltenansichten lassen sich Elemente wie z.B. Text oder Formulare nebeneinander anordnen. Dabei Klammert man die bereiche mit %% und der spezialformatierung scol, mcol oder lcol. Der Prefix S, M, und L steht dabei für die Breite der Spalte (KleidergrößenAnalogie). So können sie 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 sie Daten sogar tabellarisch anordnen können
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#
Vergessen sie niemals den abschließenden Clear!. Der Clear ist als "Zeilenumbruch" zu verstehen. D.h. sie können mehrere Spalten aneinanderreihen, dies ergibt eine "Zeile", mit einem "Clear" fangen sie eine neue Zeile an. Allerdings sollten sie auch wenn sie 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;
}