html Editor Kein Abstand bei Bildern

[Wolfgang]

Hallo,
wenn ich im Content Manager mit dem html Editor ein Bild einfüge und horizontalen und vertikalen Abstand eingebe, wird zwar in der Vorschau alles richtig dargestellt, aber im Shop ist kein Abstand zu sehen. Der Text klebt am Bild.

Wäre super wenn es dafür eine Lösung gäbe.
Danke
Wolfgang



Linkback: https://www.modified-shop.org/forum/index.php?topic=67.0

[Wolfgang]

Ich muss mich berichtigen...
Das ist nur im Firefox Browser so, im IE sieht alles normal aus.

[Anonym]

Hi....

Sind die Abstände <p> oder <br />
  ??

[Wolfgang]

Hallo,
so sieht das aus

Um allen Erwachsenen und Kindern die..........

[Wolfgang]

Das war wohl nix, der Code ist nicht zu sehen.
Die Abstände sind br.

[Wolfgang]

Hallo Christian,
falls wir uns missverstehen, ich meinte den hspace=10 height=109 width=250 vspace=10.
Ich hab mal die Sonderzeichen weggelassen.
Danke für die Mühe
Wolfgang

[Anonym]

Hi Wolfgang

Ich kann Dir leider nicht folgen.. Hast Du mal in der CSS Datei geschaut ob da was unterbunden wird?

[Mamoco]

Hallo Zusammen,
der Eintag ist hier schon älter aber das Problem, zumindest für mich ganz aktuell.
Ich möchte ganz einfach nur im Text Editor ein Bild einfügen und mit etwas Abstand den Text erstellen, "vspace" funktioniert, "hspace" wird sowohl im Firefox als auch im IE9 ignoriert.

Woran liegt das ?

[Matt]

[...]
Woran liegt das ?

Sowohl "vspace" als auch "hspace" sind deprecated. CSS nehmen.

[mampfred]

Sowohl "vspace" als auch "hspace" sind deprecated. CSS nehmen.

okay, und was heißt das für den Laien?
Ist die stylesheet.css im template gemeint? An welcher Stelle muß man dort was genau ändern, damit die im Quelltext der Artikelbeschreibung bei den eingebundenen Bildern vorhandenen Anweisungen hspace und vspace in der Shopansicht vom Browser auch interpretiert werden?

[Folienschrift-Shop]

Das Thema ist auch bei mir aktuell.

Da die Bildabstände (hspace und vspace) auf verschiedenen Content-Seiten nicht immer gleich sind, wird es schwierig, dies über eine CSS-Angabe zu steuern. Kann man die hspcae und vspace Parameter (im Quellcode stehen sie ja drin) als 'Variable' in die CSS übernehmen? 
(Sorry für die etwas ungeschickte Beschreibung)

[Folienschrift-Shop]

Habe das Problem nun dadurch gelöst, daß ich bei den Bildeigenschaften unter 'Erweitert' im Feld 'Style' die Margin-Angaben für das Bild vorgebe. Die Angaben gelten nacheinander für oben, rechts, unten, links. Die Angaben für hspace und vspace fallen weg.

Möglicherweise ist dies nicht die eleganteste Lösung - aber sie funktioniert 

[mampfred]

Interessante Lösung für die manuelle Formatierung einzelner Bilder im Editor, mir hilft sie aber bei meinem Shopumfang von mehreren tausend Artikeln mit 15000 in die Beschreibungen eingebundenen Bildern nicht weiter.

Meine Artikelbeschreibungen liegen nun mal unweigerlich in einfachem html vor. Die "hspace" und "vspace" Werte in den img-tags sind auch fehlerfrei im Quelltext vorhanden.

Meine Frage daher: In welcher (CSS-?) Datei und an welcher Stelle werden bei modified eCommerce Shopsoftware die "hspace" und "vspace" Attribute in der Artikelbeschreibung für den Browser blockiert - und wie genau hebt man diese Blockade auf?

[DirkK]

 Du musst die styleshhet.css im Templateordner nehmen. Benutzt Du das original Template

such nach:

Code: CSS  [Auswählen]

.productPreviewImage img {
border:solid 0 #999;
}

und ersetzt mal mit folgendem:

Code: CSS  [Auswählen]

.productPreviewImage img {
border:solid 0 #999;
style:margin-right:20px; margin-bottom:10px;
}

Jetzt sollte zwischen Grafik und Text ein Abstand von 20 Pixeln gehalten werden und nach unten hin, also zum Text unterhalb ein Abstand von 10 Pixeln.

Von dieser Änderung sind die Bilder/Text in der Produktübersicht betroffen (also wenn Du auf eine Kategorie klickst und die Übersicht erscheint). Meinst Du andere Bilder und/oder benutzt ein anderes Template, muss evt. ein anderer Eintrag verändert werden.

Gruß
 Dirk

[mampfred]

Der letzte Beitrag von DirkK bezog sich zwar nicht auf die Ausgangsfragestellung, hat mich dann aber auf die richtige Spur zur Lösung gebracht. Es geht um die Bilder im Text der Artikeldetailbeschreibung (Langbeschreibung).

Hier ist meine Lösung, die ich nach langem Tüfteln gefunden habe:

1.Schritt

In der im Shop bzw. für den Artikel verwendeten Produktvorlage für product_info
z. B. /templates/xtc5/module/product_info/product_info_v1.html

die Zeile, wo der Text für die Detailbeschreibung eingesetzt wird

Code: XML  [Auswählen]

        {if $PRODUCTS_DESCRIPTION !=''}<div>{$PRODUCTS_DESCRIPTION}</div>{/if}

ändern in

Code: XML  [Auswählen]

        {if $PRODUCTS_DESCRIPTION !=''}<div class="bilderabstand">{$PRODUCTS_DESCRIPTION}</div>{/if}

Die Bezeichnung für class kann frei gewählt werden, muß nur eindeutig sein.

2. Schritt

In die stylesheet.css
z. B. /templates/xtc5/stylesheet.css

die Definition für die neue class am Ende einfügen

Code: CSS  [Auswählen]

.bilderabstand img {
border:#999 1px solid;
margin-right:10px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
}

Das bewirkt, daß der Abstand zwischen Bild und Text an allen Seiten des Bildes 10px beträgt. Die Werte für margin können je nach Bedarf angegeben werden. border - bewirkt einen feinen Rahmen um das Bild, kann man auch weglassen, hat mit dem Abstand nichts zu tun.
Die Lösung ergibt einen globalen Abstand für alle Bilder. Das sieht schon mal vernünftiger aus als der angeklebte Look.