CMSimple Tests & Demos

Contentboxen

Wenn man in der Lage ist, ein wenig im Quelltext zu arbeiten, kann man diese flexiblen Boxen erstellen. Unterhalb 760px horizontaler Bildschirmauflösung floaten sie untereinander, den Umschaltpunkt kann man einfach im CSS-Code ändern.

Die Ausrichtung der Boxen funktioniert auch bei unterschiedlicher Höhe:

contentbox left

Brücke in BerlinDas ist eine linke Contentbox.

contentbox right

Marina di CamerotaDas ist eine rechte Contentbox.

Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.

 

contentbox left

Kirche in der DämmerungDas ist eine linke Contentbox.

Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.

contentbox right

Spatzen auf der RelingDas ist eine rechte Contentbox. Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.

contentbox fullsize

Palme

Das ist eine Contentbox in voller Breite.

Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet. Sie können aber auch aus rein gestalterischen Gründen eingesetzt werden, z. B. um bestimmte Inhalte hervorzuheben.

 
 

Den html-Code kann man einfach in die Quelltextansicht des Editors kopieren.

Hier der html-Code:

<div class="tplge_contentboxleft">
<h2 class="tplge_headlineContentBox">contentbox left</h2>
<p>Das ist die linke Contentbox.</p>
</div>
<div class="tplge_contentboxright">
<h2 class="tplge_headlineContentBox">contentbox right</h2>
<p>Das ist die rechte Contentbox.</p>
</div>
<div class="tplge_contentboxesClear">&nbsp;</div>


Den CSS-Code kann man einfach in die stylesheet.css des Templates kopieren. In den neueren Templates sind die notwendigen CSS-Klassen bereits enthalten und auf das Template abgestimmt.

Hier der dazugehörige CSS-Code:

/* Contentboxen */
div.tplge_contentboxleft {
clear: both;
background: #eee;
width: 49%;
min-height: 200px;
float: left;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 6px 0 16px 0;
}

div.tplge_contentboxright {
background: #eee;
width: 49%;
min-height: 200px;
float: right;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 6px 0 16px 0;
}

.tplge_headlineContentBox {
background: #567;
color: #fff;
padding: 10px 16px;
margin: -10px -16px 16px -16px;
}

div.tplge_contentboxesClear {
clear: both;
height: 1px;
overflow: hidden;
}

@media (max-width: 760px) {
div.tplge_contentboxleft {width: 100%;}
div.tplge_contentboxright {width: 100%;}
}

nach oben