Gestern habe ich eine statische Seite in WordPress erstellt und wollte auf dieser Seite 3 Bilder einbinden. Der Text sollte neben den Bildern entlang fließen. Also eigentlich nichts besonderes. Das Problem war nur, dass es ziemlich wenig Text war und die Grafiken wesentlich höher als der Text waren. Dadurch wurde alles bunt miteinander vermischt:
Ich habe dann natürlich die naheliegendste Möglichkeit ausprobiert und einige Zeilenumbrüche eingefügt. In der visuellen Ansicht des WordPress-Editors sah das auch so aus, wie ich es haben wollte. Aber sobald ich auf Vorschau geklickt habe, waren die Zeilenumbrüche wieder weg.
Naja, dachte ich mir, wenn es in der visuellen Ansicht nicht funktioniert, versuche ich mal mein Glück in der HTML-Ansicht und habe dort einige „<br />“ eingefügt. Nach einem Klick auf den Vorschau-Button bot sich mir allerdings das bekannte Bild. Die Zeilenumbrüche waren wieder verschwunden 🙁
Dann habe ich die Hilfe von Tante Google in Anspruch genommen und schnell festgestellt, dass ich nicht der einzige war, der Probleme damit hatte, Leerzeilen in WordPress einzufügen. Die ersten Einträge, die ich fand, haben mir leider nicht viel weitergeholfen. Da wurde zum Beispiel vorgeschlagen, folgenden Eintrag in die style.css aufzunehmen:
.entry p { margin-bottom: 1em; }
Das brachte aber leider auch keinen Erfolg 🙁
Leerzeilen in WordPress einfügen
Langer Rede, kurzer Sinn: Ich habe nach einigem Suchen dann sogar 2 Möglichkeiten gefunden, wie man Leerzeilen in WordPress einfügen kann.
Zum einen gibt es die etwas unsaubere Lösung ein geschütztes Leerzeichen in ein p oder in ein blockquote einzubauen, also so:
<p> </p>
bzw. so:
<blockquote> </blockquote>.
Die zweite Lösung, die ich bei Rainer Meyer gefunden habe ist dann etwas sauberer, da sie CSS einsetzt um den benötigten Leerraum zu schaffen:
<p style="margin-top: 20px">20 Pixel Leerraum</p>
Damit erzeugt man vor dem Absatz einen 20 Pixel großen Leerraum. Man kann natürlich auch margin-bottom verwenden, um den Leerraum hinter dem Absatz zu erzeugen. Das Ganze sah danach dann so aus:
Das bleibt natürlich nicht so. Der Leerraum wird noch mit Text aufgefüllt werden. Es ging mir nur darum, mal eine Zwischenlösung zu haben, bis der restliche Text geschrieben war.
Wobei ich mich frage, was macht da ein Blogger, dem es nur ums reine Schreiben geht und der von HTML und CSS keine Ahnung hat? Da hätte ich doch gedacht, dass WordPress eine einfachere Lösung bietet, um Leerzeilen einzufügen.
Oder gibt es eine und ich habe sie nur nicht gefunden? Wenn ihr eine wisst, dann postet sie doch bitte als Kommentar.
Eine eingebaute Lösung gibt es nicht, soweit ich weiß. Eine andere HTML-CSS-Lösung, die ich verwende, ist
Damit werden alle float-Anweisungen aufgehoben, die in Deinem Fall dafür sorgen, dass das Bild links- oder rechtsbündig steht.
Der Code wird netterweise auch nicht wieder rausgelöscht, wenn Du zwischen HTML- und Visuellem Editor wechselst 😉
Ah, fürchtete schon, dass das hier nicht angezeigt wird… Ich probier’s mal so:
[p style=“clear:both“]
Das Leerzeilen Problem kenne ich zu gut. Da muss es nicht mal um einen größeren Abstand gehen, sondern schon 2 Zeilen Abstand reichen. Eine Lösung von WordPress selbst gibt es leider nicht, soweit ich weiß.
Hi,
ich habe eine noch etwas andere Lösung.
Mit dem Plugin Post Editor Buttons kann man zusätzliche Buttons zum HTMl-Editor hinzufügen.
Dort habe ich das das Tag angelegt. Ich hoffe das funktioniert so mit der Anzeige im Kommentar. 😉
Die Klasse clear sollte natürlich in der CSS-Datei mit z.B. clear:both; deklariert sein.
Alternativ könnte man auch in dem Plugin das Tag anlegen aber ich bin kein Freund von Inlineformatierungen.
Somit wird der Textfluss unterbrochen und der Weitere Text würde unter dem Bild stehen.
Soweit zu meiner Umsetzung.
Gruß Marcel
Ok, das hat also nicht geklappt dann mit „[“ statt „< ". 😉
Es handelte sich um [br class="clear /] bzw. [br style="clear:both;" /] 😉
Die Klammern natürlich dementsprechend anpassen. 😉
Ich habe mal die drei Vorschläge aus den Kommentaren von Jan und Marcel ausprobiert und sie funktionieren alle drei einwandfrei. Nur bei Marcels 1. Vorschlag fehlte ein Anführungszeichen. Der muss also wie folgt eingegeben werden:
[br class=“clear“ /]
Ich habe auch mal die eckigen Klammern zur Anzeige verwendet. Scheint bei den Kommentaren nicht anders zu gehen 😕
Vielen Dank euch beiden für die Tipps 🙂
So, ihr Lieben,
dank Eurer tollen Teamarbeit habt ihr mich jetzt dazu gebracht, meinen Blog von Grund auf noch mal nachträglich zu bearbeiten. Danke, dass ihr mir Arbeit verschafft habt 😉 Aber das hat mich schon lange gestört, dass der Text immer „verschoben“ wirkte.
LG Sylvi
Sylvi, ich weiß jetzt gar nicht recht, ob ich mich mit dir freuen soll oder mit dir leiden muss 😉
Welche der vorgeschlagenen Varianten hast du denn verwendet, um deinen Blog auf Vordermann zu bringen?
Ich habe die Variante [br style=“clear:both;“ /] gewählt und sie – da ich es nicht besser wusste 😉 – einfach vor die html-codes der Graifken eingefügt. Hat auch super geklappt. Meine Beiträge sehen jetzt wirklich besser aus *freu*
Eine schöne Übersicht über Themen wie Aurichtung und Positionierung per CSS findet man auch bei Michael Jendryschik. Das clear-Attribut im speziellen findet man weiter unten unter http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss
P.S.: Grade per t3n aufmerksam auf dein Blog geworden. Ich hab dich mal meinem Feedreader hinzugefügt
Das Problem hatte ich ich vor kurzem auch, wollte den Text unbedingt unter dem Bild haben aber WP schob den Text immer rechts neben das Bild.
Des Weiteren mache ich auch gern mal 2 Leerzeichen für eine besser Übersicht.
Habe lange gesucht und nicht wirklich etwas gefunden aber werde deinen Vorschlag mal versuchen, mal schauen ob es klappt, vielen Dank schon einmal.
Ja, ich kenne das Problem auch. Aber man kann es mit einer Tabelle lösen. Man macht einfach eine Tabelle mit 2 Spalten. Rechst kommt das Bild rein und Links der Text oder umgekehrt. So kann dann das nächste Bild nicht nach oben rutschen 🙂
Gut, ist natürlich auch noch eine Möglichkeit. Wenn auch aus semantischer Sicht nicht unbedingt sinnvoll, da man eine Tabelle nur für Tabellendaten verwenden sollte und nicht dazu, Bilder bzw. Texte anzuordnen.
Hallo,
ich habe beide Tipps probiert aber es hat bei mir (WP3) nicht funktioniert. Habe dass jetzt damit gelöst:
[p style=“margin-top: 38px“] [/p]
gelöst. Den Tipp habe ich bei Rainer Mayer gefunden. Train und Coach heißt die Seite.
@Micha Meine zweite Lösung stammte ja von Rainer Meyer. Bis auf den Zahlenwert ist der Code der gleiche wie bei dir 🙂
Hallo,
ganz herzlichen Dank. Das hat mir super geholfen mit dem Code von Rainer Meyer.
Beste Grüße
Anne-Kerstin
Ok, die Kommentare hier sind alle aus 2010, bin aber gerade darauf gestoßen. Habe eine der Lösungen ([p style=“margin-top: 38px“] [/p] ausprobiert, hat auch funktioniert, allerdings ist der html-Befehl mit im Artikel abgedruckt worden. Habe halt keine Ahnung von html.
Meine Lösung: Habe meinen vorher im Blog geschriebenen Text kopiert, den Artikel dort gelöscht, dann in eine OpenOffice-Writer-Seite eingegeben, dort nach meine Vorstellungen gestaltet, wiederum dieses kopiert und in eine neue Blog-Seite bzw. ein neues Artikelfeld, aber unter dem Html-Reiter, eingegeben. Und siehe da, alles wurde übernommen.
WordPress kann mich mal, dass es für so ein täglich millionenfach auftretendes Problem, keine einfache Lösung anbietet. Unglaublich!
Sehr großes Dankeschön an Cujo + alle Kommentatoren, Ich habe mich schön öfters mit diesem Problem rumgeschlagen.
Peter
Komisch, bei mir funktioniert keine der Lösungen. Ich bin bald am verzweifeln! Mir gehts da wie Paul: die HTML Befehle werden im Artikel angezeigt, das ist doof. Ich bin ehrlich gesagt zu faul um alle Artikel in Word oä zu überarbeiten….
Obwohl der Artikel schon etwas älter ist, funktionieren die Befehle nach wie vor.
Hast du die Befehle auch im Text-Editor eingegeben? Im visuellen Editor funktionieren sie natürlich nicht.
danke! unglaublich, wie schwer es sein kann.. aber das hier hat mir weitergeholfen :)!
VIELEN dank für den Tipp!!! Hat mir sehr weitergeholfen 🙂