Anpassen einer Variante des mehrspaltigen Inhaltscontainers über CSS-Only
20. Juli 2017
css css-only weblics container mehrspaltig bild kachel optik
CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen
Mit den Weblics® stehen Ihnen zahlreiche fertige Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können.
Beispiel 1: Mehrspaltiger Inhaltscontainer für Kacheloptik bei Bildern
Am Beispiel des "mehrspaltigen Inhaltscontainers" mit Spaltenvarianten 70/30 und 33/33/33 demonstrieren wir Ihnen, wie Sie diese Containervariante anpassen können (Stand: Juli 2017). Der Container soll dafür verwendet werden, um innerhalb der Spalten Bilder mit Kacheloptik zu platzieren.
Ansicht in der Seitenbearbeitung
Webseitenansicht
Beispiel: Auszug aus der design.css zum mehrspaltigen Inhaltscontainer 66 / 33 und 33 / 33 / 33 mit geringem Abstand (für Kacheloptik)
/* ... */ /*@wCssFragment{class:elementContainerStandardColumns;variant:6633less;caption-en:66 / 33;caption:Zweispaltig 66 / 33, wenig Abstand;contentgroups:;}*/ .elementContainerStandardColumns_var6633less {-w-number-columns:2;margin-bottom:1px;} .elementContainerStandardColumns_var6633less > .col1 {float:left;width:66.66%;} .elementContainerStandardColumns_var6633less > .col2 {float:left;width:33.33%;} .elementContainerStandardColumns_var6633less > .col1 > div {margin-right:1px;} .elementContainerStandardColumns_var6633less > .col2 > div {margin-left:1px;} .elementContainerStandardColumns_var6633less .elementPicture {margin-bottom:1px} /*@wCssFragment{class:elementContainerStandardColumns;variant:333333less;caption:Dreispaltig 33 / 33 / 33, wenig Abstand;caption-en:33 / 33 / 33;contentgroups:;}*/ .elementContainerStandardColumns_var333333less {-w-number-columns:3;margin-bottom:1px;} .elementContainerStandardColumns_var333333less > .col1 {float:left;width:33.33%;} .elementContainerStandardColumns_var333333less > .col2 {float:left;width:33.33%;} .elementContainerStandardColumns_var333333less > .col3 {float:left;width:33.33%;} .elementContainerStandardColumns_var333333less > .col1 > div {margin-right:1px;} .elementContainerStandardColumns_var333333less > .col2 > div {margin-left:1px;margin-right:1px;} .elementContainerStandardColumns_var333333less > .col3 > div {margin-left:1px;} .elementContainerStandardColumns_var333333less .elementPicture {margin-bottom:1px} @media only screen and (max-width: 540px){ .elementContainerStandardColumns_var6633less {margin-bottom:20px;} .elementContainerStandardColumns_var6633less > .col1, .elementContainerStandardColumns_var6633less > .col2, .elementContainerStandardColumns_var6633less > .col3 {width:100%;margin-bottom:20px;} .elementContainerStandardColumns_var6633less .elementPicture {margin-bottom:20px} .elementContainerStandardColumns_var333333less {margin-bottom:20px;} .elementContainerStandardColumns_var333333less > .col1, .elementContainerStandardColumns_var333333less > .col2, .elementContainerStandardColumns_var333333less > .col3 {width:100%;margin-bottom:20px;} .elementContainerStandardColumns_var333333less .elementPicture {margin-bottom:20px} } /* ... */
In den CSS-Only-Varianten für die Spalten wurde das margin jeweils auf 1px gesetzt, auch für den Abstand unterhalb des Containers. So können Sie zwei mehrspaltige Inhaltscontainer (66 / 33 und 33 / 33 / 33) untereinander mit wenig Abstand platzieren.
Fertig ist die individuelle Container-Variante über reine CSS-Anpassung!