Bild Untertitel

[Reisebär]

Habe mal wieder ein Problem, bei dem Google bei der Lösung nicht hilft.
Ich habe ein Bild auf der Seite eingebunden, das mit ein Pixel Abstand vom Text umflossen wird.
So wie man gut auf der Startseite ganz oben sehen kann.
https://spanien-blog.info/

Hier mal der Code aus einem anderen Artikel:


<p align="justify">
<img src="https://www3.gobiernodecanarias.org/noticias/wp-content/uploads/2021/11/Momento-de-la-visita-300x200.jpeg" width="210" height="148" align=left style="float:right; margin-left: 15px;" />Bei der Besichtigung der neuen Einrichtung hob die Stadträtin für soziale Rechte, Noemí Santana, die vom Generaldirektor für soziale Rechte und Einwanderung, Javier Bermúdez, begleitet wurde, die Bedeutung dieser neuen Einrichtung für die Betreuung von Obdachlosen im Südosten und Süden der Insel hervor. Es wird den Begünstigten ein Zentrum bieten, in dem sie neben der Deckung ihres Grundbedarfs an Lebensmitteln und Hygieneartikeln auch persönliche Angebote erhalten, die ihnen helfen sollen, ihre Autonomie wiederzuerlangen, sich sozial und beruflich zu integrieren oder die durch die chronische Obdachlosigkeit verursachten Schäden zu verringern.</p>


Jetzt möchte ich aber hin und wieder unter genau dieses Bild noch einen Untertext, auf das Bild bezogen, hinzufügen.
Aber das klappt zum verrecken nicht.
Ich habe es mit <figure> und <figcaption> versucht, aber ich bekomme die Bildunterschrift nicht dahin, wohin sie soll.
Wir und wo sollte ich es in den Code einfügen, dass es klappt?
Danke

[felin]

( <figure>
<img src="xyz.jpg" width="800" height="600" alt="...." />
<figcaption>Bildunterschrift</figcaption>
</figure> )

Zusätzliche Befehle wären:
figure {

padding: 5px;

float: left;
border: 1px solid #cccccc;
border-radius: 5px;
}

figure img {
border-radius: 3px 3px 0 0;
}

figure figcaption {
padding: 2px 4px 2px 4px;
background-color: #636363;
color: #cccccc;
font-style: italic;
border-radius: 0 0 3px 3px;
}
(geschwungene Klammern weglassen)
Eine andere Möglichkeit habe ich Dir per WhatsApp geschickt

[Reisebär]

@ felin,
Danke, werde mal damit experimentieren.

Nachtrag:
Wenn ich nur den ersten Codeteil teste, also

( <figure>
<img src="xyz.jpg" width="800" height="600" alt="...." />
<figcaption>Bildunterschrift</figcaption>
</figure> )

müsste es doch theoretisch schon ohne CSS Eintrag klappen, oder?
Allerdings setzt er mir dabei die "Bildunterschrift neben das Bild.

Bei diesem Codeschnipsel (ohne runde Klammern)
( <figure>
<img src="img/maspalomas-strand.jpg" width="197" height="148" alt="strand_maspalomas" />
<figcaption>Bildunterschrift</figcaption>
</figure> )

[felin]

Setze mal die Bildunterschrift ohne den Befehl <figcaption></figcaption> ein, bei mir ist der Text dann genau darunter.

Frage: Hat Dein Programm Dreamweaver die Funktion WYSIWYG, also die Ansichtfunktion?
Bei Rechtsklick könnte es evtl. im Bearbeitenmodus die Option "Bildunterschrift" anbieten.

[Reisebär]

Setze mal die Bildunterschrift ohne den Befehl <figcaption></figcaption> ein, bei mir ist der Text dann genau darunter.

Frage: Hat Dein Programm Dreamweaver die Funktion WYSIWYG, also die Ansichtfunktion?
Bei Rechtsklick könnte es evtl. im Bearbeitenmodus die Option "Bildunterschrift" anbieten.

Ja, Dreamweaver hat WYSIWYG.
Ich habe sogar ein geteiltes Bild, wenn ich will, also entweder Code, oder Entwurd, oder geteilt. Ist eigentlich sehr komfortabel.
Mit welchem Editor arbeitest du denn?
Denn ich habe mit Dreamweaver gerade ein Problem

[felin]

Der Editor ist bei Wordpress im Paket enthalten.
Wenn ich etwas spezielles brauchen sollte, ist das meine Anlaufstelle: https://selfhtml.org/