Spaltenlayouts aus der HTML Gallerie RUS Layouts

Sie können diese Spaltenlayouts über HTML Einfügen → Zeige Galerie → RUS Layouts (Tabellenersatz) auf Ihre Seiten einfügen.

2 Spaltiges Layout mit Trennlinie

Code:

<div class="col2">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col2end">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>

2 Spaltiges Layout ohne Trennlinie

Code:

<div class="col2o">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col2endo">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>

2 Spalten und Blöcke mit Rahmen

Code:

<div class="col2o">
	<div class="rahmen">
		<h2>Überschrift</h2>
		<ul>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
		</ul>
		<p>Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
		Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
		Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
		Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
		Absatz Absatz Absatz</p>
	</div>
	<div class="rahmen">
		<h2>Überschrift</h2>
		<p>Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
		Absatz Absatz Absatz Absatz </p>
		<ul>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
			<li>Listenpunkt</li>
		</ul>
		</div>
	</div>
<div class="col2endo">
<div class="rahmen">
	<h2>Überschrift</h2>
	<p>Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz </p>
	<ul>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
		<li>Listenpunkt</li>
	</ul>
	<p>Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
	Absatz Absatz Absatz </p>
	</div>
</div>

2 Spalten mit Überschriftenrahmen

 

Code:

<div class="col2line">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col2endline">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>

3-spaltiges Layout (mit Trennlinien)

Code:

<div class="col3">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col3">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col3end">
	<h2>Überschrift 3</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>

3-spaltiges Layout (ohne Trennlinien)

Code:

<div class="col3o">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col3o">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col3endo">
	<h2>Überschrift 3</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>

4-spaltiges Layout (mit Trennlinien)

Code:

<div class="col4">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col4">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col4">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col4end">
	<h2>Überschrift 3</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>

4-spaltiges Layout (ohne Trennlinien)

Code:

<div class="col4o">
	<h2>Überschrift 1</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col4o">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col4o">
	<h2>Überschrift 2</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col4endo">
	<h2>Überschrift 3</h2>
	<p>Das ist ein Platzhalter-Text. Bitte fügen Sie Ihren eigenen Text über den Icon 
	"Text einfügen" ein! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam 
	erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
	rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
	dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
	sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
	sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
	clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div style="clear: left;">&nbsp;</div>