WebSite X5Help Center

 
Dietmar G.
Dietmar G.
User

Bildabstände im umlaufenden Text  de

Autor: Dietmar G.
Visitado 110, Seguidores 1, Compartilhado 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

Publicado em
6 RESPOSTAS
Andreas S.
Andreas S.
Moderator
Usuário do mês DE

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.

Ler mais
Publicado em de Andreas S.
Dietmar G.
Dietmar G.
User
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

Ler mais
Publicado em de Dietmar G.
Dietmar G.
Dietmar G.
User
Autor

PS: Anbei ein Screenshot von Bilder in Fließtext bei responsive Design.

Dietmar

Hier sieht man, wie schön ein "vspace" wäre.

Ler mais
Publicado em de Dietmar G.
Daniel W.
Daniel W.
User
Usuário do mês EN

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 -----

-----

Ler mais
Publicado em de Daniel W.
Dietmar G.
Dietmar G.
User
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

Ler mais
Publicado em de Dietmar G.
Daniel W.
Daniel W.
User
Usuário do mês EN

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>

-----

Ler mais
Publicado em de Daniel W.