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.

Der CSS-Code für die Contentboxen ist in den neueren Templates von ge-webdesign.de bereits enthalten. Für ältere Templates finden Sie weiter unten auf dieser Seite Codebeispiele.

contentbox fullsize

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 eine linke Contentbox. Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.</p>
</div>
<div class="tplge_contentboxright">
<h2 class="tplge_headlineContentBox">contentbox right</h2>
<p>Das ist eine rechte Contentbox. Contentboxen werden in der Regel als Aufmacher (Teaser) verwendet.</p>
</div>
<div class="tplge_contentboxesClear">&nbsp;</div>
<div class="tplge_contentboxfullsize">
<h2 class="tplge_headlineContentBox">contentbox fullsize</h2>
<p>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.</p>
</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: 47%;
min-height: 80px;
float: left;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 16px 3% 16px 0;
}

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

div.tplge_contentboxfullsize {
background: #eee;
width: 100%;
min-height: 80px;
box-sizing: border-box;
border: 3px solid #567;
border-radius: 5px;
padding: 10px 16px;
margin: 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%;}
}