Wie Textabstände zu Bildern umsetzen?

  • Ich habe das Basis-Problem, dass ich es mit normalen Tags nicht schaffe, Text und Bild/Foto zueinander auszurichten, damit sich der Text in einem vernünftigen Abstand zum Bild befindet. Hat jemand eine Tag-Lösung für mich oder einen anderen Code? Ich kann selber leider nicht programmieren.

    Danke Euch.

    • 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 hat nix mit Programmieren zu tun, sondern mit Definitionen im CSS. Ein Link zum Geschehen mit sinnvoller Beschreibung, welche Veränderung zum Ist-Zustand du erreichen willst, wäre hilfreich.

    Gruß
    helix

  • Naja, Du siehst, wie wenig ich davon verstehe. Eine Beispiel-Seite ist z.B. diese hier. Der Text hängt immer extrem eng am Bild, und das sieht nicht gut aus. Wenn der Text über dem Bild steht, sieht es genauso aus. Das Template ist Esteem.

  • Versuch es mal mit

    Code
    img.alignleft, img.alignright {margin-bottom: 1em;}

    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]

  • Klappt leider nicht.

    ich zeig dir mal wie ich das sehe und dann sagst was nicht geklappt hat :-)


  • Kann es sein, dass du meine Anweisung nicht ins CSS geschrieben hast, sondern direkt in den Artikel? Er gehört in ein Custom-CSS Plugin oder in die style.css eines Child-Themes.

    Und dann bitte auch die spitzen Klammern weg lassen. Also nicht so in den Editor:

    Code
    <img .alignleft, img.alignright {margin-bottom: 1em;}>

    sondern so ins CSS

    Code
    img .alignleft, img.alignright {margin-bottom: 1em;}

    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]

    Einmal editiert, zuletzt von SirEctor (19. Mai 2016 um 19:31)

  • Oder kann es sein, dass du einfach nicht genügend genau beschrieben hast, wo-wie-was-warum dich jetzt eigentlich die zu geringen Abstände gestört haben?

    Erklärung: Geh mal selber auf die von dir verlinkte Beispiel-Seite. Schieb mal das Browserfenster größer oder kleiner und schau, was sich verändert, wenn der Text in längeren oder kürzeren Zeilen läuft und dadurch eben mal nur so lang ist, wie das Bild hoch, oder eben auch mal unten unter dem Bild sich fortsetzt.

    Der CSS-Schnipsel von SirEctor macht den Rand unten am Bild größer. Hilft dir gar nix, wenn der Text überm Bild (von dir ja auch beschrieben), zu dicht am Bild plackt.

    Du hast in deinen Beiträgen eine Kombi von html-Absatz-Tags (p in spitzen Klammern), die oben und unten Abstände definiert haben, Bildern in diesen Absätzen und Überschriften (die, wenn ich mich recht erinnere, nochmal andere Abstände definiert haben).

    Wenn du eine „perfekt“-Vorstellung im Kopf hast, die du perfekt umsetzen möchtest, kommst du nicht drumrum, alle Eventualitäten, die sich daraus ergeben, zu berücksichtigen. Und das heißt wohl, dass du dich ein klein wenig gründlicher in CSS einarbeiten musst, als nur-schnell-kurz im Forum nach einem CSS-Schnipsel zu ersuchen …

    Das ist nicht böse gemeint, weder in Bezug auf deine Frage, noch in Bezug auf die schnelle Lösung, die für dich offensichtlich nicht ausreichend war.

    Gruß
    helix

  • Du hast Recht. Ich hatte den Code tatsächlich in die einzelne Seite geschrieben (hüstel). Wo genau in den CSS-Salat muss ich den Code denn einfügen?

  • hol dir ein custom css Plugin und mache es damit

    außer dein Theme bietet die Möglichkeit custom css irgendwo bei den Options einzutragen.

Jetzt mitmachen!

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