Bildabstände im umlaufenden Text 
Autor: Dietmar G.
Besucht 114,
Followers 1,
Geteilt 0
Ich verwende für einige Seiten den Text-Block und füge dort Bilder hinzu, die der Text umfließen soll. Das geht nur hier so richtig gut - aber der Text ist zu nah am Bild und daher sollten über vspace und hspace diese Abstände konkreter definiert werden. Auch wenn zwei Bilder üb ereinander oder nebeneinader sind, fehlt dieser Abstand und beide verschmelzen zu einem Bild. wie kann ich diese Abstandsdregeln innerhalb eines Textes ausführen, da bei den Eigenschaften entsprechende Eingabefelder fehlen. Welche Wirkung hat der HTML-Button in der Menüleite?? Ich habe keinen Efekt bemerkt?
Vielen Dank für Eure Anregungen.
Dietmar
Gepostet am
Vorab mal, es sollte normalerweise Bilder nur in Bild.Objekten und Text in Text-Objekten verwendet werden. Die veralterte Methode in einem Text.Objekt Bilder einzufügen funktioniert zwar, aber ist eben im responsiven Design nicht optimal. Einen Innenrand kann man aber einstellen im Objekt, aber den Abstand zwischen Bild und Text wenn er diesen umfließt ist schwierig zu machen. Mit individuellen Code vielleicht.
<style>img.fleft {margin-right: 25px!important;}</style>
Der Button "HTML" ist dazu da um HTML Befehle umzusetzen ohne diese als Klartext anzuzeigen.
Autor
Hallo Andreas,
vielen Dank für Rückantwort. Hatte ich mit dem Code so probiert, der aber im Text angezeigt wurde. Muss ich den HTML-Button vor der Code-Eingabe drücken oder richt es, wenn dieser bei markierten Text gedrückt wird. Und wo muss der Code hin? Vor das Bild im Text oder in den Eigenscaften der Seite?
Übrigens. Habe die Bilder so plaziert, dass sie auch im Responsive gut eingefügt sind.
Dietmar
Autor
PS: Anbei ein Screenshot von Bilder in Fließtext bei responsive Design.
Dietmar
Hier sieht man, wie schön ein "vspace" wäre.
Verwendeter CSS-Code in Text-Objekt:
<style>img.fleft {margin: 10px 10px 10px 0px!important;}</style>
Bei Margin und 4 Angaben gelten diese in der Reihenfolge oben, rechts, unten und links.
Ich habe für links 0px angebenen, damit das Bild mit dem Text links eine senkrechte Linie bildet.
Unten sind noch 2 Screenshots von der Vorschau und dem Text-Objekt mit CSS-Code.
----- Vorschau -----
-----
Autor
Danke nochmals für den Hinweis. Rechts und links funzt es, oben und unten nur beschränkt und jedes Bild anders. Habe dann !important gelöscht und passt besser - nur oben wird es nicht weiter weg.
Dietmar
Das "!important" heißt "wichtig" und bedeutet, dass diese CSS-Angaben nicht von CSS-Angaben weiter unten geändert werden dürfen.
Der Abstand unterm Bild kann größer sein als der angegebene Wert, denn wenn der Text auch nur teilsweise am unteren Abstand anstößt, dann wird er eine Textzeile darunter platziert.
Meine Testseite:
Ich habe mal die Werte von 10px auf 15px erhöht, damit es gleichmässiger aussieht.
Aber das hängt davon ab wie Bild- und Texthöhe zusammenpassen, also entweder die Abstände etwas ändern oder das Bild einige Pixel größer oder kleiner machen.
<style>img.fleft {margin: 15px 15px 15px 0px!important;}</style>
-----