bild verschieben + unerwünschte Anzeige eines Lückenfüllers

Question

Hallo Zusammen,
Ich habe ein Bild auf die Startseite meines Bogens eingefügt und jetzt wird leider ein Bild Platzhalter an einer anderen Stelle angezeigt. Hat jemand eine Idee, wie ich diesen Platzhalter los werden kann?
Außerdem hätte ich das Bild gerne bündig mit der Überschrift. Meine Kenntnisse in HTML und CSS sind bisher sehr beschränkt vieleicht kann mir jemand mit der Positionierung helfen.
Bis jetzt habe ich das Bild via HTML Code über dem Text eingefügt. Ich habe also im Zusammenstellungsmodus auf der betreffenden Seite ein Feld für den HTML-Code und darunter dann den Einleitungstext positioniert. Geht das generell überhaupt das so? Oder müssen HTML-Code und Text immer in einem Textfeld stehen?
Bisheriger Code:

<div style="text-align: right; margin: 40px 0">
<img src="100100.png" style="float: right; margin-left: 10px">
</div>
<img src="100100" style="max-width: 100%">

Da ich nicht sicher bin ob ich die Rechte habe das Bild hier zu posten, habe ich drüber gemalt. Ich glaube man kann aber mein Problem trotzdem sehen.

Vielen Dank für die Antworten im Voraus.

Answer 1

und jetzt wird leider ein Bild Platzhalter an einer anderen Stelle angezeigt.

Sie haben in Ihrem HTML-Code zwei <img>-Tags. Ich vermute (sehr stark), dass es keine Datei mit dem Namen 100100 (ohne Dateinamenerweiterung .png) in Ihrem Projekt gibt. Deshalb sollte es reichen, die letzte Zeile (also das zweite <img>) in Ihrem Code zu entfernen.

Korrekt wäre demnach:

<div style="text-align: right; margin: 40px 0">
<img src="100100.png" style="float: right; margin-left: 10px">
</div>

Comments

vielen Dank! Jetzt sieht so aus wie gewollt!
Brauche ich den zusatz style="max-width: 100%" für eine funktionierende Smartphone-Version?
Wir hatten nämlich vor diese Funktion zu nutzen und die Bearbeitung mit dem smartphone zu ermöglichen.

---

> Brauche ich den zusatz style="max-width: 100%" für eine funktionierende Smartphone-Version?

Das "max-width" sorgt dafür, dass das Bild nicht breiter wird als der Bildschirm Platz hat.

Sie können die Darstellung auf dem Smartphone einfach testen, wenn Sie Firefox oder Chrome verwenden. Dort kann man in den Entwickler-Tools den Smartphone-Emulator einschalten.

Answer 2

Das "max-width" sorgt dafür, dass das Bild nicht breiter wird als der Bildschirm Platz hat.

Den max-width Zusatz habe ich demnach sicherheitshalber noch drin gelassen und in der normalen Version sieht jetzt alles super aus. Danke dafür nochmal :)

Allerdings sieht die Smartphone-Version jetzt so aus: https://imgur.com/a/lfxQZUB

Das Bild schiebt sich aufgrund der schmaleren Breite zwischen den Text der Überschrift.
Haben Sie da vielleicht noch eine Idee?
Ich weiß nich ob das relevant es ist, aber ich das Problem zeigt sich im smarphone-Layout genauso.
Viele Grüße

Comments

Das Problem ist weniger das Bild als vielmehr, dass das "Willkommen" und das Bild zusammen breiter sind als es der Bildschirm zulässt. Und "float" sorgt nunmal dafür, dass das Bild vom Text umflossen wird.

Man könnte es auch mit ein paar <DIV>-Elementen via Flexbox realisieren und/oder mittels CSS einstellen, dass das Bild auf kleinen Bildschirmen über oder die Überschrift wandert. Aber für solche Optimierungen muss man ein wenig in HTML/CSS einsteigen...

Schauen Sie vorher mal, ob das Problem eigentlich ein Problem ist. Womöglich tritt es gar nicht auf, wenn Sie in der normalen (nicht-Debug) Vorschau testen, weil dann kein Fähnchen mit der ID die Bildschirmbreite weiter reduziert.

---

PS: Antworten auf Antworten sehe ich nur manchmal zufällig. Besser eine "related question" (Knopf oben) stellen oder einen Kommentar unter die Antwort schreiben.