Bild und Text in Spalten anzeigen

  • Moin!

    Ich möchte in Posts gerne links ein Bild und den Text rechts davon platzieren. Dabei soll Text, der länger ist als das Bild hoch ist, nicht unter dem Bild weiter laufen, sondern sozusagen in seiner Spalte bleiben (quasi links Bild-, rechts Textspalte).

    Das CSS dafür ist mir in etwa klar (s.u.), nur stehe ich vor dem Problem, dass mir WP beim Einfügen eines Bildes in einen Beitrag, das Bild immer mit in den ersten p-Tag schreibt (auch wenn der Cursor beim Einfügen vor dem Beitrags-Text in einer leeren Zeile steht).

    Und im Text-Modus sehe ich diese Verschachtelung nicht, kann sie deshalb auch nicht händisch korrigieren. Frage ist also, wie kann ich den kompletten HTML-Code in der Eingabemaske sichtbar machen bzw. wie bekomme ich Bilder so in Beiträge eingebunden, ohne dass WP mir die Bilder ins p-Tag schreibt?

    Hier der CSS-Code, der so eben nicht funktioniert:

    Code
    .entry_teaser img {    max-width: 30%;    float: left;}
    
    
    .entry_teaser p {    max-width: 70%;    float: right;    text-align: left;}

    Thanks in advance
    elgaucho

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das änderst Du in der style.css Deines Themes. Ohne Link keine direkte Hilfe.

    Grundsätzlich solltest Du im CSS die floats entfernen.

    Allgemein gibt es auch Shortcodes für ein Spaltenlayout (Columns) via Plugin.

    Alternativ kannst Du auch eine eigene CSS-Klasse erstellen und diese dann manuell dem Bild jeweils zuordnen (Erweitert).

  • Hi formateins!

    Erstmal danke für Deine schnelle Antwort!

    Das änderst Du in der style.css Deines Themes.


    Ja, is klar.

    [COLOR=#333333]Ohne Link keine direkte Hilfe.[/COLOR]


    O.k. – Leider muss ich zunächst offline arbeiten – werde versuchen, Deinen Hinweis aber für weitere Forumsanfragen zu beherzigen.

    Grundsätzlich solltest Du im CSS die floats entfernen.


    Hm.

    Allgemein gibt es auch Shortcodes für ein Spaltenlayout (Columns) via Plugin.


    Ja, da werde ich mal stöbern!

    Alternativ kannst Du auch eine eigene CSS-Klasse erstellen und diese dann manuell dem Bild jeweils zuordnen (Erweitert).


    Auch klar, aber das löst noch nicht das Problem, dass - egal ob im Visuell- oder Text-Modus – eingefügte Bilder immer(!) innerhalb eines p-Tags stehen.

    Ich hatte gehofft, ich könnte irgendwo z.B. im Textmodus richtigen HTML-Code aktivieren. Um dann das img und die p’s separat ansprechen zu können. Aber soweit ich das mitbekommen habe, ist das aus Sicherungsgründen deaktiviert – und eben auch nicht eben mal so wieder zu aktivieren. Oder doch via Plugin?

  • Auch klar, aber das löst noch nicht das Problem, dass - egal ob im Visuell- oder Text-Modus – eingefügte Bilder immer(!) innerhalb eines p-Tags stehen.

    Die Funktion nennt sich wpautop und kann bspw. über die wp-config.php oder im Rahmen Deines Themes deaktiviert werden. Aber Obacht: ohne macht das nicht wirklich Spaß...

  • Hi formateins,

    Die Funktion nennt sich wpautop und kann bspw. über die wp-config.php oder im Rahmen Deines Themes deaktiviert werden. Aber Obacht: ohne macht das nicht wirklich Spaß...


    Danke für die Info. Ich hatte auf texto schon mal was drüber gelesen. Werde wpautop aber auch nicht deaktivieren, denn für den Kunden ist es sicher übersichtlicher so.

  • Auf den ersten Blick fehlt dem Bild ein Wrapper. Es sollte in einem DIV liegen, der entsprechend ausgerichtet wird (float:left). Dann fließt der Text auch nicht unter das Bild.


    Ähm – warum denn ein Wrapper? Ich bekomme das Bild schon angesprochen über mein oben genanntes CSS. Nur führt das float eben auch nicht dazu, dass auch unten(!) frei bleibt – was ja im Allgemeinen auch der Job von Floats ist, oder? http://de.selfhtml.org/css/eigenschaften/anzeige/float.htm

  • Weil ein float kein Blockelement ist. Beispiel auf der von mir verlinkten Seite beachten!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!