Bild(chen) vor Text

[scherenschlag]

Moin.
Ich möchte gerne vor dem Text "Speisen" in dem Block eine Sonne einfügen. (Der erste Block mit dem Salat)
Dafür habe ich folgendes eingegeben:

Code: Alles auswählen

<h1 class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-2" data-app-selector=".mbr-section-title , .mbr-section-btn" mbr-if="showTitle">
<img src="https://www.xyz.de/assets/images/sonneklein.png" alt="Sonne klein"><b>Speisen</b></h1>

Da es nicht zu sehen ist, denke ich mal dass ich wieder etwas falsch mache. Wie meistens..

https://www.tsad17.de

[Tommy Herrmann]

hmm...

... diese URL gibt es ja (natürlich) überhaupt nicht:

Code: Alles auswählen

https://www.xyz.de/assets/images/sonneklein.png

... dann wohl schon eher hier:

https://www.tsad17.de/assets/images/sonneklein.png

... aber im Quelltext der Seite ist auch nirgends überhaupt das Bild "sonneklein.png" zu finden.

Daher hast Du die Änderung wohl noch nicht publiziert

[scherenschlag]

Ich hatte meine URL versteckt...
Jetzt isse richtig.

Code: Alles auswählen

<h1 class="mbr-section-title mbr-fonts-style" mbr-theme-style="display-2" data-app-selector=".mbr-section-title , .mbr-section-btn" mbr-if="showTitle">img src="https://www.tsad17.de/assets/images/sonneklein.png" alt="Schwarze Katze auf Dach"><b>Speisen</b></h1><p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text"><b>

Ich habe die Seite mehrmals publiziert. File Zilla.

[Tommy Herrmann]

Mache doch mal bitte einen Screenshot von der Stelle des "Code Editor" wo das eingefügt wurde.

... der in Deinem letzten Beitrag gezeigte Code ist auch falsch...
... da fehlt doch vor dem img die einleitende spitze Klammer <

... es ist nicht vorhanden - gucke doch mal selbst in den Quelltext mit der rechten Maustaste.

[scherenschlag]

[scherenschlag]

[Tommy Herrmann]

Du solltest eigentlich mal im Quelltext vom Browser Deiner publizierten Seite gucken.

> rechte Maustaste > Seitenquelltext anzeigen im Kontext-Menü wählen

Dann suche nach dem Bild "sonneklein.png" - das ist nicht vorhanden, also kann es dann auch nicht dargestellt werden.


Hast Du das in der Arbeitsseite versucht einzufügen, anstelle vom "Code Editor"


Füge den Bild-Code ausschließlich im "Code Editor" wie unten ein, ansonsten löscht Mobirise spitze Klammern:

Code: Alles auswählen

<img src="https://www.tsad17.de/assets/images/sonneklein.png" alt="Sonne">

Das HTML-Ersatzzeichen:

&gt;

schreibt eine schließende spitze Klammer > und hat da im Code nichts zu suchen:

Das macht Mobirise, wenn man eine spitze Klammer auf die Arbeitsseite, anstatt in den "Code Editor", schreibt.

[scherenschlag]

Irgendwie mache ich was falsch....

[Tommy Herrmann]

Du - ich gehe jetzt gleich noch mit Freunden essen und kann dann erst morgen weiter helfen.

So sieht es doch aber richtig aus - hast Du nochmals publiziert? Publiziere doch bitte mit Mobirise, dann werden Dir eventuelle Fehler auch gleich angezeigt.

... eigentlich müsste das auch sogleich auf der Arbeitsseite von Mobirise angezeigt werden und nicht erst nach dem Publizieren.

[scherenschlag]

Danke und guten Appetit.....

[Tommy Herrmann]

... warte - ich mache das noch schnell mal selbst.

Da muss dann bestimmt auch noch eine Größe für das Logo angegeben werden, sonst werden Bilder auf die Container-Größe vergrößert.

[Tommy Herrmann]

Hier habe ich diesem Logo noch eine eigene ID gegeben, auf die ich mich dann in der CSS besser beziehen kann.

Die CSS gehört dann in den Bereich "CSS Editor" (rechte Bereich vom "Code Editor"). Da das <img> Tag einen Umbruch erzeugt habe ich da ein:

"float: left"

... hinzugefügt, sodass das Bild in der gleichen Zeile angezeigt wird. Weiterhin habe ich eine maximale Breite von 50px bestimmt. Hier meine id="mylogo" im Bereich "CSS Editor" vom verwendeten Block:

Code: Alles auswählen

#mylogo {
  float: left;
  max-width: 50px;
}

So sieht das dann, mit der id="mylogo" für die CSS, im Bereich "HTML Code" aus:

Code: Alles auswählen

<h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">

            <img id="mylogo" src="https://www.tsad17.de/assets/images/sonneklein.png" alt="Sonne">&nbsp;Sonne

</h4>

Das <h4> Tag außen herum ist von Mobirise und hat mit Deinem Sonnen-Logo nichts zu tun, es geht also nur um das händisch eingebaute <img> Tag der mittleren Zeile im Code oben.

Der HTML-Code &nbsp; (no-break space) den ich noch vor dem Wort "Sonne" eingefügt habe, erzeugt ein geschütztes Leerzeichen, damit ein Leerzeichen zwischen Bild und Text steht und das nicht direkt da dran klebt.

... und so sieht das dann aus (Sonnen-Logo vor dem Text):

[scherenschlag]

Moin...
Ha. Da isse die Sonne.....

Was mich immer nur wundert: Bei meiner Frau am Handy ist das Sonnenlogo astrein.
Samsung S23.
Bei mir ist es zu groß.
Samsung Flip3.
Aber spätestens wenn ich die Seite morgen aufrufe, passt das Bildchen auch bei mir.
Hat nichts mit MBR zu tun. Ist wohl so ein Handyding.

Danke Tommy....

[scherenschlag]

Alles ok.
Nochmal alles vom Handy gelöscht. Neu gestartet. F5 und was weiß ich noch alles gemacht.
Jetzt ist die Sonne auch auf dem Flip3 klein...

[Tommy Herrmann]

Moin,

da dieses Problem mit dem Browser-Cache gerade am Smartphone (Handy) immer wieder auftritt, habe ich gerade mal ein kleines Video an meinem "Samsung Galaxy S22" erstellt, das das Löschen vom Cache beschreibt.

Bitte gucke Dir das an und stelle es mal nach. Nur so können Änderungen am Handy auch gleich wirken. Sonst wird die Webseite, so wie Du diese zuvor betrachtet hattest, aus dem Browser-Cache geladen.

viewtopic.php?p=11273#p11273

[scherenschlag]