find-templates - Seiteninhalt

Seiteninhalt

Seiteninhalt teilen

Mit Hilfer zweier DIV können wir den Inhalt teilen (Grafiken anklicken zum vergrößern):

mit Titel und Rahmen

ohne Titel, ohne Rahmen

Schritt 1: Die zwei DIV im Seiteninhalt einfügen

- das DIV das links sitzen soll, kann z.B. die Klasse "left" bekommen
- das DIV das rechts sitzen soll, kann z.B. die Klasse "right" bekommen
- auf "Eigene Seiten editieren", Seite wählen wo Inhalt geteilt werden soll
- im Editor oben links auf "Quellcode" klicken, nun folgenden HTML-Code einfügen :

<div class="left">
<h3>Hier Titel links</h3>
Hier fügst du den Inhalt ein
</div>

<div class="right">
<h3>Hier Titel rechts</h3>
Hier fügst du den Inhalt ein
</div>

<br style="clear:both;" />

Ohne Überschriften ? Entferne die Zeilen <h3>Hier Titel</h3>
<br style="clear:both;" /> ist notwendig, damit sich weiterer Inhalt wieder darunter platzieren kann.

Schritt 2: Der CSS-Code

Mit dem CSS-Code bekommen die beiden Felder gewünschtes Aussehen.

/* Linkes DIV */
.left {
width: 45%;
min-height: 100px;
float: left;
padding: 10px;
overflow: hidden;
border: 1px dashed #777777; }

/* Rechtes DIV */
.right {
width: 45%;
min-height: 100px;
float: right;
padding: 10px;
overflow: hidden;
border: 1px dashed #777777; }

/* für die Titel - kann entfernt werden, wenn keine Titel verwendet werden */
.left h3, .right h3 {
padding: 5px 0px 5px 10px;
margin: -10px -10px 15px -10px;
background-color: #343434;
color: #FFFFFF;
font-size: 15px; }

Wenn sich die beiden DIV nun untereinander platzieren, musst die Breite verkleinert werden.

Du hast das Design "CSS" ? Den Code einfügen im Feld "css ohne style tags".

Alle anderen Designs: Einfügen im Feld "Text über Design", vor dem --></style>.
Wenn im Feld "Text über Design" noch keine CSS-Codes eingefügt wurden,
müssen die style-tags mit verwendet werden. Damit der Browser es als CSS-Code erkennt.
Schreibe vor dem Code <style type="text/css"></style>