CSS: Bild mit Text umfließen lassen

  • Hey Leute,

    ich habe ein gekauftes Theme und würde gerne das eingefügte Bild im Artikel mit Text umfließen lassen. Jetzt bin ich mir nicht sicher, wie ich genau vorgehen muss.

    Habe das Bild mit "Element untersuchen" angeschaut, komme aber trotzdem nicht weiter. Muss ich das nun via Theme CSS oder NextGEN Gallery CSS anpassen?

    Das Bild liegt dabei in einem Absatz (p), wie ihr ja unten erkennen könnt.

    • 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

  • Such mal in Deiner styles.css nach .post .post-image und füge das Rote hinzu:

    Code
    .post .post-image {
    margin-bottom: 10px;
    [COLOR=#ff0000]float: right;
    margin-left: 10px;[/COLOR]
    }

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • oder:

    Code
    .ngg-singlepic {
        background-color: #FFFFFF;
        display: block;
        [COLOR="#FF0000"]float: left;
        margin-right: 10px;[/COLOR]
        padding: 4px;
    }
  • Hille
    Über den Befehl war ich mir klar, ich hatte eher Probleme, die richtige Stelle zu finden - ob nun Theme CSS oder NextGEN Gallery.

    SirEctor
    Habe ich eingefügt (auch mit float: left;), allerdings hatte das keinen Effekt.

  • ups ... infected hat recht. Ich hatte bei den normalen Artikelbildern geguckt.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ja, infected hatte die passende Lösung, allerdings habe ich jetzt ein neues Problem - das zieht sich jetzt wohl wie ein Rattenschwanz: Der Read More Button und auch die Anzeige für Datum, Comments und Autor ist jetzt nach oben gerutscht. Hatte ich vorher nicht bedacht. Hat da zufällig jemand eine passende Lösung zu?

  • Schreib mal noch folgendes in Deine styles.css

    Code
    input.submit_button, a.action-link {
    background: url(layout/action-link.jpg) center repeat-x;
    border: 1px solid #7E9BC7;
    [COLOR=#ff0000]display: block;
    [/COLOR][COLOR=#FF0000]clear: both;[/COLOR][COLOR=#ff0000]
    width: 65px;
    height: 10px;[/COLOR]
    }


    width und height kannst Du theoretisch auch weglassen oder ggf. anpassen.

    Durch display:block wird der a-Tag wie ein div behandelt, daher greift dann auch clear:both, welches keine weitere Elemente links oder rechts daneben zulässt.

    Gruß
    SirEctor

    P.s.: ich habe in Deiner CSS auch irgendwo clear:none gesehen, was es so nicht gibt.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Das klappt soweit, allerdings klebt der Button jetzt am Bild. Hatte versucht, das mit einer margin-top Anweisung zu lösen, aber das ging nicht. Die Grafik vom Button wird auch nicht mehr angezeigt, trotzdem der Befehl ja eigentlich gegeben ist.

    Hier mal der Link zur Seite: Klick mich

  • Gib dem Bild noch ein margin-bottom von 10px, dann sollte es doch passen, oder?

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

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