Gutenberg und Inline-Bild: Bild immer linksbündig!
-
Hallo,
ich nutze den Gutenberg Editor, und habe die Option „Inline-Bild“ gesehen.
Im Editor ist das (kleine) Bild auch mittig im Text wie gewünscht, aber in der Vorschau und auch auf der Online-Seite immer linksbündig.Mache ich was falsch oder ist das ein Bug?
- Dieses Thema wurde geändert vor 3 Jahren, 5 Monaten von topsurfer.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Hallo @topsurfer
Dein Link zur Seite führt auf eine 404-Fehler-Seite.
und habe die Option „Inline-Bild“ gesehen
Wo hast du das gesehen?
Es gab mal einen Block Inline-Image, mit dem z.B. ein Telefon-Icon in einer Textzeile platziert werden konnte. Soviel ich weiß, ist dieser Block aber wieder verschwunden, weil kaum jemand so recht etwas damit anfangen konnte.
Aber vielleicht verwendest du ein Plugin, das diesen Block oder eine Option hinzufügt?Das Bild wird mit der CSS-Regel
float:left;
linksbündig ausgerichtet. Du kannst das überschreiben, in dem du dem Absatz unter „Erweitert“ eine eigene CSS-Klassemit-inline-bild
zuweist und dann im Customizer.mit-inline-bild img { float: none; margin-left: 0.5em; }
einträgst.
Stimmt.
Dann scheint das Style-Sheet des Themes fehlerhaft zu sein.
Mein Vorschlag für eine eigene CSS-Regel wäre dann weiterhin ein möglicher Workaround.@topsurfer
Das liegtam Theme hueman, worüber jedes Bild links floatend gesetzt wird:img { float: left; margin-right: 0.5em; }
was ich für ziemlich fatal halte. Die erste „Hilfe“ wäre der Workaround, den Bego Mario oben beschrieben hat.
An deiner Stelle würde ich aber auch den Themeentwickler darauf hinweisen, dass diese CSS-Anweisung entfernt wird.Dann sind wir uns ja wieder einig? 😉
Die Beiträge haben sich überschnitten.
So ganz sicher bin ich mir mit dem Theme als Ursache nicht mehr. Das Bild wird linksbündig gesetzt über diesen Code:
<div id="custom_html-3" class="widget_text widget widget_custom_html"> <h3 class="widget-title">Hallo, willkommen auf unserem Blog</h3> <div class="textwidget custom-html-widget"> <html> <head> <style type="text/css"> .emxx { line-height: 1.0em } img { float: left; margin-right: 0.5em; } </style> </head> <body> <p class="emxx"> <img style="width: 96px; height: 76px;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22"> Hier wollen wir Euch mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br> Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen, technische "spielereien" und optimierungen , Tipps, ....<br>Kurzum, alles was auch Camper interessiert </p> </body> </html> </div> </div>
Wie hast du das Text-Widget in der rechten Spalte eingebunden, woher kommmt das?
Da bin ich auch gerade drüber gestolpert.
Scheint im Text-Widget reingerutscht zu sein.Wahrscheinlich ein Copy/Paste-Fehler?
Also doch kein Bug-Ticket fürs Theme … 😀
Nach Korrektur des Widgets braucht’s dann auch keine zusätzlichen CSS-Regeln.
Hi,
das (rechte Leiste) habe ich im Hueman unter Customizer – eigenes HTML eingebunden.
Der obere „Code „ist:<p><small> Strecke <strong><font face="MV Boli">9712</font></strong> km | <strong><font face="MV Boli">153</font></strong> Tage | <strong><font face="MV Boli">32</font></strong> Plätze (▲26)</small></p>
dann kommt dieser Code:
<html> <head> <style type="text/css"> .emxx {line-height: 1.0em} img { float: left; margin-right: 0.5em; } </style> </head> <body> <p class="emxx"><img style="width: 96px; height: 76px;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22">Hier wollen wir Euch mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br> Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen, technische "spielereien" und optimierungen , Tipps, ....<br> Kurzum, alles was auch Camper interessiert</p> </body> </html>
Liegt da die Ursache für das Verhalten im „Haupt-Text“ ?
- Diese Antwort wurde geändert vor 3 Jahren, 5 Monaten von topsurfer.
dann kommt dieser Code
Tausch diesen Code gegen diesen aus:
<div id="custom_html-3" class="widget_text widget widget_custom_html"> <h3 class="widget-title">Hallo, willkommen auf unserem Blog</h3> <div class="textwidget custom-html-widget"> <p style="line-height: 1em" class="emxx"><img style="width: 96px; height: 76px; float: left; margin-right: 0.5em;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22"> Hier wollen wir Euch mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br> Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen, technische "Spielereien" und Optimierungen, Tipps ....<br>Kurzum, alles was auch Camper interessiert</p> </div> </div>
Wahrscheinlich ein Copy/Paste-Fehler?
Also doch kein Bug-Ticket fürs Theme … 😀
Nach Korrektur des Widgets braucht’s dann auch keine zusätzlichen CSS-Regeln.
Genau 👍
Supi, das sieht jetzt besser aus ;.-)
War da ein „left“ bei mir drin, welches sich global ausgewirkt hat?
Danke euch beiden!
- Diese Antwort wurde geändert vor 3 Jahren, 5 Monaten von topsurfer.
Der Code ist noch nicht ganz „perfekt“. Tausch noch mal aus gegen
<h3 class="widget-title">Hallo, willkommen auf unserem Blog</h3> <div class="textwidget custom-html-widget"> <p style="line-height: 1em" class="emxx"><img style="width: 96px; height: 76px; float: left; margin-right: 0.5em;" src="http://www.mmblog.de/wp-content/uploads/2017/09/sys_mm_rye_selfie_01_320px.jpg" alt="Wir" align="left" hspace="22" vspace="22"> Hier wollen wir Euch mit interessanten Beiträgen aus den verschiedensten Bereichen versorgen.<br> Wohnwagen- und Reiseerfahrungen, eigene Erlebnisse und Empfehlungen, technische "Spielereien" und Optimierungen, Tipps ....<br>Kurzum, alles was auch Camper interessiert</p> </div>
Done 😉
- Das Thema „Gutenberg und Inline-Bild: Bild immer linksbündig!“ ist für neue Antworten geschlossen.