HpBk-TemplateWorld

Content Boxen

Content-Boxen mit CSS 3

Mit diesen schönen Content-Boxen kannst du deinen Content aufteilen und Inhalte anders präsentieren. Eine Website sollte immer auch einige Teaser beinhalten. Ein Teaser ist ein kleines Text oder Bildelement, das den Besucher zum Weiterlesen und Weiterklicken ermutigen soll. Also ein Schnelleinstieg in verschiedene Themen auf deiner Seite. Solche Schnelleinstiege hast du bestimmt auch auf TemplateWorld schon öfter gesehen, zum Beispiel auf der Startseite.

Der Code, der in der DIV-Box steht, muss in deinem Seiteneditor eingefügt werden. Erst dann erscheint deine Textbox auch in deinem Aussehen. Den Style deiner Box kannst du natürlich beliebig im CSS-Code anpassen. Also auch die Höhe, die Farben etc. lassen sich beliebig anpassen.

Der HTML-Code | Box Nr.1

Der folgende Code muss in den Quelltext deiner angelegten Seite eingefügt werden. Dazu klickst du auf "Seiten", wählst deine Seite aus und klickst im Editor oben links auf "Quellcode".

<div class="box1">
Dieses Beispiel zeigt die Box Nr.1. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an. 
</div>

Der CSS-Code | Box Nr. 1

Der folgende Code muss in unter "Designeinstellungen" - "Erweiterte Designeinstellungen" im Feld "Text über dem Design" eingefügt werden. Die einzelnen Werte können natürlich angepasst werden.

<style type="text/css">
<!--
.box1 {
	background-color: #F5F5F5;
	border: 2px solid #ebc42b;
	padding: 20px;
	width: 300px;
	border-radius: 5px;
}
-->
</style> <br />
<br />
<h2>Und so sieht Box Nr. 1 aus</h2>
<div class="box1">Dieses Beispiel zeigt die Box Nr. 1. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.</div>
<br />
<hr />
<br />
<h2>Der HTML-Code | Box Nr. 2</h2>
<textarea style="height:83px;" readonly="readonly"><div class="box2"> Dieses Beispiel zeigt die Box Nr. 2. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.  </div>

Der CSS-Code | Box Nr. 2

<style type="text/css"> <!--
.box2 {
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
	padding: 20px;
	padding-left: 20px;
	width: 300px;
}
--> </style>

Und so sieht Box Nr. 2 aus

Dieses Beispiel zeigt die Box Nr. 2. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.

Der HTML-Code | Box Nr. 3

<div class="box3"> Dieses Beispiel zeigt die Box Nr. 3. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.  </div>

Der CSS-Code | Box Nr. 3

<style type="text/css"> <!--
.box3 {
	background-color: #F5F5F5;
	border: 4px solid #FFFFFF;
	padding: 20px;
	width: 300px;
	box-shadow: 0 0 1px rgba(0,0,0, .4);
}
--> </style>

Und so sieht Box Nr. 3 aus

Dieses Beispiel zeigt die Box Nr. 3. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.

Der HTML-Code | Box Nr. 4

<div class="box4"> Dieses Beispiel zeigt die Box Nr. 4. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.  </div>

Der CSS-Code | Box Nr. 4

<style type="text/css"> <!--
.box4 {
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
	background: -moz-linear-gradient(top, #F5F5F5, #FFF);    
	background: -webkit-linear-gradient(top, #F5F5F5, #fff);
	background: -ms-linear-gradient(top, #F5F5F5, #fff);
	background: -o-linear-gradient(top, #F5F5F5, #fff);
	box-shadow: 1px 1px 2px rgba(0,0,0, .2);
	padding: 20px;
	width: 300px;
}
--> </style>

Und so sieht Box Nr. 4 aus

Dieses Beispiel zeigt die Box Nr. 4. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.

Der HTML-Code | Box Nr. 5

<div class="box5"> Dieses Beispiel zeigt die Box Nr. 5. Diese Box hat eine Breite von 300 Pixeln. Die Höhe dieser Box passt sich natürlich der Länge eures Inhalts an.  </div>

Der CSS-Code | Box Nr. 5

<style type="text/css"> <!--
.box5 {
	background-color: #F5F5F5;
	border: 1px solid #DDDDDD;
	box-shadow: 3px 3px 0px rgba(0,0,0, .2);
	padding: 20px;
	width: 300px;
}
--> </style>