Text neben Bild einfügen

Neben einer Grafik kurze Texte oder weitere Grafiken platzieren.
Das große Bild bekommt die CSS-Eigenschaft float: left;
dadurch platzieren sich alle weiteren Inhalte rechts neben der Grafik.

Textzeile 1 neben dem Bild

Textzeile 2 neben dem Bild

Textzeile 3 neben dem Bild

Schritt 1: Der HTML-Code für den Seiteninhalt:

• auf "Eigene Seiten editieren"
• Seite auswählen, wo gewünschter Inhalt hinein soll
• die Seite ist nun zum Bearbeiten offen
• im Editor oben links auf "Quellcode" klicken
• und nun folgenden HTML-Code einfügen

<img class="bild_links" src="Grafikadresse 1" alt="bild" />
<p class="zeile"> Dein Text Zeile 1 </p>
<p class="zeile"> Dein Text Zeile 2 </p>
<p class="zeile"> Dein Text Zeile 3 </p>
<p class="zeile"> Dein Text Zeile 4 </p>
<p class="zeile"> <img class="kleinbild" src="Grafikadresse 2" alt="bild" /> </p>
<p class="zeile"> <img class="kleinbild" src="Grafikadresse 3" alt="bild" /> </p>

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

Die letzte Codezeile ermöglicht, das sich weiterer Inhalt wieder darunter platzieren kann. Erweiterungen im Code (z.B. mehr Textzeilen) müsst Ihr immer über der letzten Codezeile platzieren.

Werden weniger Textzeilen benötigt, einfach entsprechende Codezeile entfernen.
Benötigt Ihr mehr Textzeilen, einfach den Code erweitern.
Achtet nur darauf, das <br style="clear:left;" /> die letzte Codezeile bleibt.

Schritt 2: Der CSS Code

• auf "Design einstellen"
• zum Feld "Text ÜBER Design"
• folgenden CSS Code dort mit einfügen
• vor deinem --></style>

.bild_links {
   width: 250px; /* hier Breite der Grafik */
   height: 300px; /* hier Höhe der Grafik */
   float: left;
   margin: 0px 10px 20px 20px; /* Außenabstand */
}

.zeile { 
   font-size: 13px; /* Schriftgröße für Text neben Bild */
   color: #000000; /* Textfarbe für Text neben Bild */
   margin: 10px; /* Außenabstand */
}

.kleinbild {
   width: 100px; /* hier Breite der kleinen Grafik */
   height: 70px; /* hier Höhe der kleinen Grafik */
}

---