Humboldt-Universität zu Berlin - Web-Support der HU

Bild und Text auf einer Höhe

html allgemein

Um ein Bild neben einem Text einzubinden, müssen Sie den html-Code einer Seite bearbeiten. Bereiten Sie aber erst Folgendes vor:

  1. Laden Sie das gewünschte Bild wie gewohnt hoch. Notieren Sie sich zusätzlich die Höhe und Breite des Bildes.
  2. Öffnen Sie das Bearbeitungsfenster der betreffenden Seite.
  3. Fügen Sie das Bild wie gewohnt ein.
  4. Legen Sie darunter den Text als Absatz bzw. Paragraphen an.
  5. Speichern - und öffnen Sie gleich wieder das Bearbeitungsfenster.
Jetzt besitzt Ihr Artikel bereits die zwei nötigen Blöcke. Sie müssen nur noch etwas zusätzlichen Code einfügen. Um den html-Code zu bearbeiten, setzen Sie bitte bei Epoz das Häkchen unter dem Bearbeitungsbildschirm, unter Kupu klicken Sie bitte auf html in der oberen Bearbeitungsleiste.

  1. Suchen Sie den Text <img src="[url Ihres Bildes]"> (zB. mit Strg + F) und fügen Sie danach ein </div> und davor
    • ... wenn Sie das Bild links haben möchten <div style="float:left; width:[Breite des Bildes]px; height:[Höhe des Bildes]px;"> ein.
    • ... wenn Sie das Bild rechts haben möchten <div style="float:right; width:[Breite des Bildes]px; height:[Höhe des Bildes]px;"> ein.
  2. Suchen Sie den Text "<p" der direkt dem <img [...] /> folgt und fügen Sie zwischen p und > (wichtig! das Leerzeichen nach dem p nicht vergessen!)
    • ... wenn Sie das Bild links haben möchten style="margin-left:[Breite des Bildes + 5]px; height:[Höhe des Bildes +5]px;" ein.
    • ... wenn Sie das Bild rechts haben möchten style="margin-right:[Breite des Bildes + 5]px; height:[Höhe des Bildes + 5]px;" ein.

Die zusätzlichen 5 Pixel am Text sollen verhindern, dass Ihr Text am Bild klebt. Sie können natürlich den Abstand weiter vergrößern.
Sollte der Text länger sein, löschen Sie die height -Angabe in <p>. Sie ist dafür da, damit bei einem kurzen Text der darauf folgende Text nicht unter dem Bild verschwindet.

Beispiel:

Zierbild als Beispiel

Hier der Beispieltext. Um den Quellcode zu sehen, markieren Sie diesen Bereich und klicken mit der rechten Maustaste auf ihn. Durch den Punkt "Auswahlquelltext anzeigen" können Sie unter Firefox den Quellcode sehen.