Text um Grafik fließen lassen

  • Habe das bis jetzt nicht hinbekommen und brauche Hilfe:
    Wie muss hier die Schreibweise sein, damit der Text um die Grafik fließt + Abstand.?

    HTML
    <p style="text-align: left"><img class="alignleft size-medium wp-image-3373" style="margin-left: 0px;margin-right: 20px" src="http://www.muster.de/wp-content/uploads/2012/09/a1_room_19.10.12_gl-300x198.jpg" alt="" width="156" height="95" />
    Heute, 19:30 Uhr - Event

    Habe das im Forum nicht finden können.
    Wäre super, wenn mir jemand kurz helfen könnte!!
    lg, believer

    Nutze: wp 3.4.2

    Wenn ich den See seh, brauch ich kein Meer mehr.

    • 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 verwendete theme sollte zB diese styles beinhalten:

    Code
    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    .alignright {float:right; }
    .alignleft {float:left; }
    .aligncenter {display: block; margin-left: auto; margin-right: auto}

    http://codex.wordpress.org/Wrapping_Text_Around_Images

    oder wenn du das nur fuer das eine bild haben willst; im inline-style 'float: left;' (oder 'float: right;') einfuegen:

    Code
    [COLOR=#800080]style=[/COLOR][COLOR=#0000ff]"float: left; margin-left: 0px;margin-right: 20px"[/COLOR]
  • Das mit dem Float Befehl funktioniert nur bedingt bei mir. Es zerreist mir den Text nach einem Formatwechsel von neuem.
    Hier mein Code:

    Wie kann ich diesen Grossen Unterbruch zwischen dem Absatz-Text und dem darauf folgenden Überschrift3-Text verhindern?
    Grüsse

  • Das ist nicht Dein Quelltext. Da wird eventuell ein clear: both; dazwischen funken. Ist das schon bei p-Tags der Fall oder erst nach H-Tags? In der CSS würde ich dann nichts schrauben, falls Du nicht auf allen Seiten eine Veränderung wünscht. Dann lieber statt <h3> eine CSS Klasse und Tags wie <span class="wie_h3">Text</span> verwenden.

    Besser und einfacher ist wohl <h3 style="clear:none"> Text </h3> zu verwenden, nehme ich mal an. Da hilft nur probieren.

    Einmal editiert, zuletzt von Melewo (21. August 2013 um 19:19)

  • [COLOR=#006400]Der erste H-Tag funzt, wie auch sein folgender p-Tag.[/COLOR] [COLOR=#ff0000]Danach ist aus, unter der Grafik beginnt danach der zweite H-Tag.[/COLOR]

    Hier noch der Quelltext aus dem Firefox-Viewer.

    Danke dir und Grüsse

  • Ja, aber da liegt doch style="float: right; innerhalb eines p-Tags und ich bin mir nicht sicher, wo bei Dir die nächste Flussbegradigung ihre Wirkung entfaltet. Ohne clear würde alles so lange fließen, bis das Bild zu Ende wäre. Kann sein, dass dieser Fluss bereits am nächsten Absatz oder aber erst mit dem nächsten Titel wieder aufgehoben wird.

  • Und wenn Du nichts mehr verstehst, dann probiere halt:

    HTML
    <h3 style="clear:none">Unterschiedliche Mattenvarianten</h3>

    Und wenn das nichts bringt, dann probiere halt:

    HTML
    <div style="float: right; margin: 0px;"
    <a href="http://web260.login-32.hoststar.ch/Wordpress/wp-content/uploads/2013/08/Anwendungen-gross.jpg"><img alt="Anwendungen" src="http://web260.login-32.hoststar.ch/Wordpress/wp-content/uploads/2013/08/Anwendungen-gross-150x1024.jpg" width="122" height="889" /></a>
    </div>
    <h3>Kapillarrohr-Heizsysteme sind flexibel einsetzbar</h3>
    <p>Die einzelnen, nur 4,5 Millimeter schlanken PP-Kapillarröhrchen sind parallel in einem Abstand von 10 bis 30 Millimeter in der Matte angeordnet ...

    Und wenn das auch noch nichts bringt, ja dann ...

Jetzt mitmachen!

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