Leerzeilen in WordPress

Leerzeilen in WordPress

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:

Leerzeilen in WordPress einfügen - vorher
Wordpress-Artikel ohne Leerzeilen

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>&nbsp;</p>

bzw. so:

<blockquote>&nbsp;</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:

Leerzeilen in WordPress einfügen - vorher
Wordpress-Artikel mit Leerzeilen

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.

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

22 thoughts on “Leerzeilen in WordPress”

  1. 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 😉

  2. 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ß.

  3. 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

  4. 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. 😉

  5. 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 🙂

  6. 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

  7. 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?

  8. 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*

  9. 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.

  10. 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 🙂

  11. 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.

  12. 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.

  13. 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!

  14. Sehr großes Dankeschön an Cujo + alle Kommentatoren, Ich habe mich schön öfters mit diesem Problem rumgeschlagen.

    Peter

  15. 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….

  16. 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.