Spaltenbreiten in mehrspaltigen Containern über CSS-Only-Varianten definierbar

07.08.2014

Mit der aktuellen BASE lassen sich die Breiten der Spalten noch einfacher definieren, da diese nun über CSS-Only-Varianten auswählbar und installierbar sind.

Das bestehende XSLT-Template wurde um CSS-Only-Varianten erweitert. Während bestehende Inhalte davon nicht betroffen sind, können neue Elemente über CSS-Only definiert werden.

Das Element hat nun neben der eigentlichen Layout-Variante (id="layout"), über die z.B. die Rahmen oder die Höhenanpassung definiert wird eine zweite Layout-Variante (id="layoutColumns") speziell zur Festlegung der Spalten.

Neben der einfachen Möglichkeit, Varianten über CSS schnell anzupassen, lassen sich diese häufig verwendete Varianten auch über den Layout-Wizard als Variante nachinstallieren.

Beispiel einer Spaltenvariante 25 / 50 / 25, einsetzbar in allen Inhaltsbereichen

/*@wCssFragment{class:elementContainerStandardColumns;variant:255025;caption:Dreispaltig 25 / 50 / 25;caption-en:25 / 50 / 25;contentgroups:}*/
.elementContainerStandardColumns_var255025                           {-w-number-columns:3}
.
elementContainerStandardColumns_var255025 .col1                     {float:left;width:25%}
.
elementContainerStandardColumns_var255025 .col2                     {float:left;width:50%}
.
elementContainerStandardColumns_var255025 .col3                     {float:right;width:25%}
.
elementContainerStandardColumns_var255025 .col1_inner               {margin-right:13px}
.
elementContainerStandardColumns_var255025 .col2_inner               {margin-left:6px;margin-right:7px}
.
elementContainerStandardColumns_var255025 .col3_inner               {margin-left:14px}

Beispiel einer Spaltenvariante 20 / 20 / 20 / 20 / 20, nur einsetzbar im oberen Bereich

/*@wCssFragment{class:elementContainerStandardColumns;variant:2020202020;caption:Fünfspaltig 20 / 20 / 20 / 20 / 20;caption-en:20 / 20 / 20 / 20 / 20;contentgroups:content3}*/
.elementContainerStandardColumns_var2020202020                       {-w-number-columns:5}
.
elementContainerStandardColumns_var2020202020 .col1                 {float:left;width:20%}
.
elementContainerStandardColumns_var2020202020 .col2                 {float:left;width:20%}
.
elementContainerStandardColumns_var2020202020 .col3                 {float:left;width:20%}
.
elementContainerStandardColumns_var2020202020 .col4                 {float:left;width:20%}
.
elementContainerStandardColumns_var2020202020 .col5                 {float:right;width:20%}
.
elementContainerStandardColumns_var2020202020 .col1_inner           {margin-right:16px}
.
elementContainerStandardColumns_var2020202020 .col2_inner           {margin-left:4px;margin-right:12px}
.
elementContainerStandardColumns_var2020202020 .col3_inner           {margin-left:8px;margin-right:8px}
.
elementContainerStandardColumns_var2020202020 .col4_inner           {margin-left:12px;margin-right:4px}
.
elementContainerStandardColumns_var2020202020 .col5_inner           {margin-left:16px}