Spaltenbreiten in mehrspaltigen Containern über CSS-Only-Varianten definierbar
07. Aug 2014
Mit der aktuellen BASE lassen sich die Breiten der Spalten über CSS-Only-Varianten noch einfacher definieren.
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}