WordPress-Buch

Praxisbuch und Einsteigerseminar

Bild im Beitrag positionieren

Neulich habe ich eine Frage bekommen, wie man innerhalb eines Beitrages, das Bild bzw. eine Grafik positioniert, so dass es von dem nachfolgenden Text umflossen wird. So wie in diesem Beitrag hier.

Da gibt es zwei Vorgehensweisen, die einfachste ist wenn man nicht im visuellen sondern im Code-Editor arbeitet. Da kann man solchen Bildern einen extra Klassen-Attribut zuweisen, hier ein Beispiel:

<img src="bild.png" alt="Positionierung" class="bild-links" />

Das Klassen-Attribut (inkl. dem Wert) ist hervorgehoben. Nun muss man diesen Attribut Eigenschaften in der CSS-Datei zuweisen:

.bild-links { float: left; margin: .2em 1em .5em 0; }

Hierbei muss man nur achten, dass nach dem Bild auch genug Inhalt bzw. Text nachkommt, damit das Bild auch wirklich umflossen wird, denn durch die Eigenschaft float, wird ein Element aus dem normalen Fluss herausgenommen und es kann dann zur Darstellungsfehlern kommen.

Um diese Möglichkeit der Bilderpositionierung zu nutzen, muss man nicht permanent in der Code-Ansicht arbeite, Es reicht wenn man bei der Eingabe der Klasse in den Code-Editor wechselt. Falls man das Plugin AddQuicktag einsetzt, dann kann man die Eingabe des Klassen-Attributs auf ein Quicktag legen und in der Zukunft muss man nur einmal Klicken um das Attribut hinzuzufügen.

Die andere Möglichkeit ist die Nutzung des visuellen Editors. Wenn man ein Bild bereits eingefügt hat, kann man das Bild anklicken und anschließend das Bild-Symbol (das kleine Baum-Icon) in der Leiste anklicken und es öffnet sich ein weiteres Fenster (siehe die Abbildung). Dort hat man dann die Möglichkeit, das Bild zu positionieren in dem man eine Auswahl bei dem Punkt Alignment trifft. Die Werte left (links) und right (rechts) sind hierbei die wichtigsten. Damit richtet man das Bild auf der linken bzw. rechten Seite aus.

Mit der Angabe von ganzen Zahlen in den Feldern Horizontal und Vertical Space bestimmt man den den vertikalen und Horizontalen Abstand des Bildes.

Verwandte Artikel

• CSS für Bilder in WordPress (3)
• Aktive Menüpunkte hervorheben (0)
• Zweite Auflage von "WordPress – Das Praxisbuch" (12)
• Workshop: WordPress für Redakteure (0)
• WordPress: Das Einsteigerseminar gewinnen (26)

«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»

---

Nur eine Reaktion »»

Kommentare

1. 

   Matthias sagte am
   Dienstag, 22. April 2008 um 09:19 folgendes:

   Dies läuft aber sauberem XHTML zuwieder. Besser wäre es, eine eigene Klasse anzulegen, sagen wir: .Bild_links und die gewünschten Bilder mit dieser Klasse zu versehen..
   Das nötige CSS (z.B.: .Bild_link {float: left; padding: 5px;}
   wird dann in der externen CSS Datei geschrieben

   Antworten