Bilder fließen lassen [Problem gelöst]

Martin Lemke · 03.01.2025

Moin!

Mein Problem:
Programmgesteuert werden bei mir auf einer Seite Bilder ausgegeben. Diese sollen sich dicht an dicht auf der Seite verteilen. Das klappt sehr gut, sofern nur img-Tags verwendet werden.

Einige Bilder sind jedoch beschriftet; das heißt sich sind gekapselt in einem figure-Tag, welcher den img-Tag, wie auch einen mit figcapture enthält. Hinter beschrifteten Bildern wird automatisch ein Zeilenwechsel ausgeführt (anscheinend ei Feature der html-Interpretation).

<figure>
<img ....>
<figcapture>Kommentar zum Bild</figcapture>
</figure>

Frage:
Kann ich diesen Zeilenumbruch mit css verhindern?

Lösungsansätze:
Ich vermute eine Lösung mit figure::after

Aber wie geht es weiter? Vielleicht hat jemand einen Tipp für mich?

Zu meinem Hintergrund: Ich bin neu hier, habe HTML-Erfahrung seit den 1990er-Jahren, bin aber kein Profi. Ich benötige html und css nur für eigene Projekte und habe trotz aller Erfahrung keine umfassenden Kenntnisse, die man von einem Profi erwarten darf.

Vielen Dank
Martin

Sempervivum · 04.01.2025

Guten Morgen Martin und willkommen im Forum!

Hinter beschrifteten Bildern wird automatisch ein Zeilenwechsel ausgeführt (anscheinend ei Feature der html-Interpretation).

Deine Vermutung ist genau richtig: Ein figure-Element ist per Default ein Blockelement und belegt deshalb eine eigene Zeile. Du kannst das sehr leicht ändern durch dieses CSS:

Code:

figure {
    display: inline-block;
}

Dann sollten auch die figure-Elemente nebeneinander angeordnet werden,

Viel Erfolg und beste Grüße
Ulrich

Martin Lemke · 04.01.2025

Moin Ulrich,

danke für die Hintergrundinfo.

Ich habe noch nicht den Eindruck, dass sich etwas an der Darstellung geändert hat; das hat aber möglicherweise andere Gründe.

Wenn ich ein betroffenes Bildobjekt mit dem Browser untersuche, werden mir css-Definitionen angezeigt, die in meiner style.css gar nicht enthalten sind: Siehe Anhang.

Wie kommt das zustande und wie habe ich das zu interpretieren?

Gruß
Martin

tk1234 · 04.01.2025

Martin Lemke schrieb:
Ich habe noch nicht den Eindruck, dass sich etwas an der Darstellung geändert hat; das hat aber möglicherweise andere Gründe.

Dann solltest du einen Link zu einer Seite posten unter der man sich das anschauen kann - sonst lässt sich da nur raten was wenig zielführend ist.

Martin Lemke schrieb:
Wenn ich ein betroffenes Bildobjekt mit dem Browser untersuche, werden mir css-Definitionen angezeigt, die in meiner style.css gar nicht enthalten sind: Siehe Anhang.

Wie kommt das zustande und wie habe ich das zu interpretieren?

Das steht doch in der Ecke oben rechts: die Einstellungen kommen aus den Default-Vorgaben des Browsers.

Martin Lemke · 04.01.2025

tk1234 schrieb:
Dann solltest du einen Link zu einer Seite posten unter der man sich das anschauen kann - sonst lässt sich da nur raten was wenig zielführend ist.

Der Bereich ist passwortgeschützt (aus urheberrechtlichen Gründen); wir müssen somit ohne auskommen.

tk1234 schrieb:
Das steht doch in der Ecke oben rechts: die Einstellungen kommen aus den Default-Vorgaben des Browsers.

Das war mir nicht bekannt. Danke.
Wenn dort etwas durchgestrichen ist, wurde dies durch meine Stylesheets überschrieben?
Viele Grüße
Martin

scatello · 04.01.2025

Martin Lemke schrieb:
Wenn dort etwas durchgestrichen ist, wurde dies durch meine Stylesheets überschrieben?

Vermutlich, könnte aber auch noch woanders herkommen.

Martin Lemke schrieb:
Der Bereich ist passwortgeschützt (aus urheberrechtlichen Gründen); wir müssen somit ohne auskommen.

Wir nicht, sondern du. Wie erwähnt wurde, mit raten kommen wir hier nicht weiter.

tk1234 · 04.01.2025

Martin Lemke schrieb:
Der Bereich ist passwortgeschützt (aus urheberrechtlichen Gründen); wir müssen somit ohne auskommen.

Dann wirst du ohne Hilfe auskommen müssen - oder du stellst das Problem auf einer separaten Testseite nach (kann auch bei jsfiddle o.ä. liegen), als Bilder kannst du auch welche z.B. von der Wikipedia einbinden oder du nimmst irgendwelche Dummybilder.

Martin Lemke schrieb:
Wenn dort etwas durchgestrichen ist, wurde dies durch meine Stylesheets überschrieben?

Werte welche durch Werte mit höherer Spezifität überschrieben wurden, werden durchgestrichen dargestellt. Meist wird das durch das von dir eingebundene Stylesheet kommen, kann aber auch durch Benutzer-Stylesheets kommen auf die du allerdings keinerlei Einfluss hast, siehe auch Selfhtml.

Martin Lemke · 04.01.2025

scatello schrieb:
Vermutlich, könnte aber auch noch woanders herkommen.

Es ist nur meine style.css eingebunden. Keine Styles von Drittanbietern, Bibliotheken oder gar fremden Servern.
Woher, wenn nicht von meinen Style-Definitionen könnten noch Einflüsse her kommen? Browser-Defaults wurden ja schon genannt.

@tk1234: Die Idee mit der Testseite können wir ggf. noch aufgreifen.

Hintergrund:
Meine style.css hatte ich aus einem Vorgänger-Projekt übernommen, wo ich mit hauptsächliche hard coded html gearbeitet hatte (auch passwortgeschützt), meine neue Version ist jetzt voll php mit Datenbank, um Darstellungsmöglichkeiten zu erweitern.
Ich werde mal meine style.css entschlacken (überarbeiten) und alles raus schmeißen, das nicht wirklich notwendig ist. Möglicherweise liegt dort die Ursache.
Vielen lieben Dank
Martin

Martin Lemke · 04.01.2025

Ich danke allen, die mir trotzdem ich keinen Link auf meine Seiten liefern kann, geholfen haben.
Der zunächst wenig konkret klingende Tipp: „... könnte aber auch noch woanders herkommen.“ hat schlussendlich zur Lösung geführt. Nach Entschlackung meiner style.css funktioniert es nun, wie erwartet.
Die nachhaltigsten Tipps sind sind doch die, welche einem helfen, selber auf die Lösung zu kommen.
Gruß
Martin

Martin Lemke · 05.01.2025

Ich muss leider noch ein Problemchen nachschieben, das sich jetzt ergeben hat.

Die Bilder liegen in <div>-Containern der Klassen .male und .female, die bislang keine css-Eigenschaften haben, sondern nur dazu dienen, per Radiobuttons mittels JavaScript aus- und eingeblendet werden zu können .

Die Bilder fließen jetzt ja auch mit Textunterschrift. Es tritt aber der Effekt auf, dass Bilder mit Bildunterschrift versetzt dargestellt werden (siehe Screenshot – w.g Copyright habe ich die Bilder verpixelt). Die Bilder sollen an ihrer Oberkante bündig abschließen, damit kein unruhiges Bild entsteht, das den Betrachter ablenkt. Die Bildunterschrift darf ruhig unten unterhalb des Fotos stehen.

Ich habe folgendes versucht:

.female, .male {
align-items: top;
}

Aber das hat keinen Effekt. Wie mache ich es richtig?

Viele Grüße
Martin

scatello · 05.01.2025

das Raten anhand von Beschreibungen und Bildchen ist wenig zielführend.

Dann solltest du einen Link zu einer Seite posten unter der man sich das anschauen kann - sonst lässt sich da nur raten was wenig zielführend ist.

Wie erwähnt wurde, mit raten kommen wir hier nicht weiter.

Dann wirst du ohne Hilfe auskommen müssen - oder du stellst das Problem auf einer separaten Testseite nach

tk1234 · 05.01.2025

Martin Lemke schrieb:
Die zugehörige css-Definition habe ich mitgeteilt. Mir reicht ein Tipp, woran es liegen könnte, bzw, wie man so etwas grundsätzlich oder üblicherweise einstellt. Ich erwarte keine fertige Lösung.

Wie schon mehrfach geschrieben: zu erraten wie der HTML- und CSS-Code aussieht ist nicht zielführend und eine pauschale Lösung gibt es nicht.

Martin Lemke schrieb:
Da ich keinen Zugriff auf meine passwortgeschützten Seiten liefern kann, habe ich die mit php erzeugte Seite nun als html gespeichert. Im Original wird die style.css als Datei geladen, das funktionierte hier im Test jedoch nicht, also habe ich die in den Header in einen <style>-Abschnitt kopiert und es funktioniert nun. Als Bilder habe ich ein öffentlich zugängliches Foto aus wikimedia.org eingefügt, um Copyrightkonflikte zu vermeiden.

Besser noch wäre gewesen ein JSfiddle o.ä. zu erstellen und zu verlinken.

Als erstes solltest du dein HTML aufräumen:

du kannst nicht einfach neue Elemente erfinden bzw. musst dich dabei an gewisse Regeln halten (u.a. müssen die Elemente einen Bindestrich enthalten). Das von dir verwendete gattung, art und ix ist nicht zulässig
Tabellen sind nur für tabellarische Daten gedacht, deine Tabelle unterhalb von h2 möchte gerne eine Beschreibungsliste sein
du leidest unter akuter Divitis: viele Divs sind falsch oder überflüssig. div#menu wäre gerne ein <nav> (oder <menu>), den Inhalt würde ich nicht in ein fieldset stecken sondern in ein ul bzw. li-Elemente; div#content ist ganz falsch: div hat kein name-Attribut und das div wäre ohnehin gerne ein <main>; die div.text sind überflüssig, das .text kann auch dem jeweiligen Kindelementen verpasst werden; für die div.(fe)male würde ich auch eher ein <section> nehmen
Die Seite ist unbedienbar: die Radiobuttons im Menü haben keine Beschriftung - da fehlen zwingend erforderliche label-Elemente (die dann auch gleich den Vorteil haben dass man auch die Beschriftung anklicken kann, nicht zwingend die radio-Buttons treffen muss); zudem sind nicht interaktive Elemente (also alle außer input, button und a) per Tastaturbedienung nicht erreichbar und dürfen auch nicht per Javascript auf Klicks reagieren - dein ix ist per Tastaturbedienung nicht erreichbar (ja, das a blubbert vermutlich durch, trotzdem); die a-Elemente die auf das Menü verweisen haben keine Beschriftung, ich glaube nicht dass Screenreader hier etwas sinnvolles vorlesen (außerdem enthalten die Elemente ein ' zu viel)
style-Attribut haben nur in den seltensten Fällen etwas im Quelltext zu suchen, wirf alle raus und formatiere die Elemente über die CSS-Datei (nutze dabei Nachfolgeselektoren, nicht jedes Element braucht eine Klasse
die Bilder würde ich alle in ein figure-Element stecken, ist aber nicht unbedingt notwendig - beachte aber dass figure-Elemente standardmäßig margin haben und zwar mehr als du in deinem CSS zurücksetzt
column-count im CSS ist immer noch falsch und auch Breitenangaben usw. sind noch reichlich in Pixelangaben zu finden

Mit dem sauberen Code lässt sich dann viel besser arbeiten.

Mit dem align-items warst du schon nicht ganz falsch unterwegs - die Eigenschaft ist allerdings für flex- und grid-Layouts gedacht. Ich würde dir auch dazu raten und z.B. ein Grid-Layout für die Bilder verwenden. Ansonsten würde schon ein vertical-align:top; für die Bilder reichen - wobei ich jetzt nicht ausprobiert haben was dann in der zweiten Zeile passiert.

Noch ein paar Hinweise zum Code:

setze per JS nie CSS-Eigenschaften, setze oder entferne immer nur Klassen. Deine Funktion female_ausblenden würde sich auf eine Zeile verkürzen lassen wenn du für div#content (bzw. <main>, s.o.) einfach nur eine Klasse setzt (classList hilft dabei) und .female dann über ».femaleweg .female {display:none;}« ausblendest. Zum Einblenden dann einfach die Klasse wieder entfernen und fertig - die sehr umständlichen Schleifen (querySelectorAll und forEach existieren) können dann vollständig entfernen
Variablen solltest du nicht mit var definieren sondern mit let bzw. ggf. const. Auch dein i in den Funktionen muss mit let definiert werden, so ist dein i global und es besteht theoretisch die Gefahr von unerwünschten Nebenwirkungen (hier nicht da i bei jedem for gesetzt wird, kann aber zukünftig doch noch mal passieren)
Dass der Button zum Ausblenden des Menüs ein title-Attribut hat mit einem Hinweis wie man das wieder eingeblendet bekommt, habe ich erst im Quelltext gesehen. title-Attribute sind für solche Informationen der falsche Ort, die wird kein Benutzer sehen - von Bedienung per Touchscreen mal ganz zu schweigen …
die Links auf #menu stehen außerhalb von div.male bzw. div.female und werden damit beim Filtern nicht mit ausgeblendet

Ich weiß, das ist jetzt viel Input, aber auf Dauer kannst du dir die Arbeit deutlich erleichtern wenn du mit sauberem Code arbeitest.

Martin Lemke · 05.01.2025

Vielen lieben Dank für den so umfangreichen Report. Das kann ich nur nach und nach abarbeiten.

Beschreibungsliste anstatt Tabelle
Zunächst bin ich für den Hinweis auf die Möglichkeit einer Beschreibungsliste sehr dankbar. Dass es sowas gibt, wusste ich gar nicht. Die Lösung als Tabelle hatte ich schweren Herzens eingefügt, wohl wissend, dass Tabellen zum Formatieren von Text nicht gedacht sind. Aber ich hatte keine bessere Idee. Ich bin froh, nun eine bessere Möglichkeit zu kennen.

Ich habe jetzt doch eine erreichbare HTML-Version angelegt; Drittbilder habe ich der Einfachheit halber jetzt nicht mehr eingelinkt. Man kann den versatz-Effekt auch anhand der alt-Textes erkennen.

URL: https://test.nord-spinnen.de/arten.html

Ich habe jetzt erstmal nur die Tabellen durch Beschreibungslisten ersetzt. Das ist auf den ersten Blick nicht ganz so hübsch wie mit Tabellen, aber vielleicht ist es auch Gewöhnungssache. Ich kann mich durchaus mit dieser Darstellung anfreunden.

Zu den frei erfundenen Elementen
Auch hier bin ich Opfer meiner Unwissenheit. Nach der Umbenennung der von mir etwas ideenlos „erfundenen“ Tags in aussagefähigere bin ich ein Stückchen zufriedener.

Aus <n> wurde <nicht-nord> und aus <ix> wurde <art-ausblenden> – zum Einblenden muss man das Dokument neu laden. <gattung> wurde durch <i> ersetzt – der Tag hatte nichts anderes gemacht, als kursiv zu setzen.

Die anderen Aspekte folgen später.

Gruß
Martin

tk1234 · 05.01.2025

Martin Lemke schrieb:
Ich habe jetzt doch eine erreichbare HTML-Version angelegt; Drittbilder habe ich der Einfachheit halber jetzt nicht mehr eingelinkt. Man kann den versatz-Effekt auch anhand der alt-Textes erkennen.

Das ist noch etwas was ich oben vergessen habe: dein alt-Text taugt nichts: der Text wird in Screenreadern vorgelesen und soll den Inhalt des Bildes beschreiben - der Hinweis dass das Bild xy nicht angezeigt werden kann ist da exakt 0 hilfreich.

Martin Lemke schrieb:
Ich habe jetzt erstmal nur die Tabellen durch Beschreibungslisten ersetzt. Das ist auf den ersten Blick nicht ganz so hübsch wie mit Tabellen, aber vielleicht ist es auch Gewöhnungssache. Ich kann mich durchaus mit dieser Darstellung anfreunden.

Die Darstellung kannst du natürlich noch nach belieben anpassen, lies mal die Seite bei Selfhtml zu dem Thema Beschreibungslisten bis zum Ende, dort steht auch noch wie man das ganze per grid-Layout formatieren kann.

Martin Lemke schrieb:
Aus <n> wurde <nicht-nord> und aus <ix> wurde <art-ausblenden> – zum Einblenden muss man das Dokument neu laden. <gattung> wurde durch <i> ersetzt – der Tag hatte nichts anderes gemacht, als kursiv zu setzen.

Hier mag das i noch halbwegs passend sein - trotzdem solltest du dir abgewöhnen Elemente nach ihrer Darstellung auszuwählen. Elemente sollten grundsätzlich nach ihrer semantischen Bedeutung ausgewählt werden, die Darstellung wird dann anschließend per CSS angepasst.

scatello · 05.01.2025

Hier mal nachsehen: https://validator.w3.org/nu/?doc=https://test.nord-spinnen.de/arten.html

Martin Lemke · 05.01.2025

Nächster Schritt: <nav>-Menü

das Menü wurde ent-divt und heißt jetzt <nav>

Den Rahmen des Fieldset habe ich durch etwas mehr Padding und eine css-Border von 0.5px Breite (ich denke, px ist hier, zumal in so geringer Breite, tolerabel) ersetzt. Menü ausblenden funktionierte, aber irgendwie nicht mehr das Einblenden. Da ich dieses Feature in der ersten Version, die ich immerhin dreieinhalb Jahre benutzte, nie verwendet hatte, habe ich die Möglichkeit, das Menü auszublenden, kurzerhand ganz rausgeschmissen.

Sobald ein Update der Testseite online ist, gebe ich Bescheid.

Als nächstes folgt <section>.

Viele Grüße
Martin

Martin Lemke · 05.01.2025

scatello schrieb:
Hier mal nachsehen: https://validator.w3.org/nu/?doc=https://test.nord-spinnen.de/arten.html

Meine früheren Webseiten hatte ich immer mit solchen Tools getestet. Letztendlich fallen Profi-Seiten da zu 99% durch und man muss sich fragen, ob diese Art Reinheit wirklich notwendig ist.

Man bedenke: https://validator.w3.org/nu/?doc=https://www.html-forum.de/

VG
Martin

tk1234 · 05.01.2025

Martin Lemke schrieb:
Meine früheren Webseiten hatte ich immer mit solchen Tools getestet. Letztendlich fallen Profi-Seiten da zu 99% durch und man muss sich fragen, ob diese Art Reinheit wirklich notwendig ist.

Jeder Fehler den der Browser korrigieren muss erhöht das Risiko dafür dass der Browser irgendetwas falsch interpretiert - du solltest die Fehler beheben, zumal sich viele ja schon mit dem Entfernen der falschen ' im HTML entfernen lassen.

Martin Lemke · 05.01.2025

Aktueller Stand: https://test.nord-spinnen.de/arten.html – die Ausrichtung ist jetzt, wie gewünscht! Herzlichen Dank!

@tk1234: Ich habe mir deinen Report ausgedruckt und versuche ihn nach und nach abzuarbeiten und erledigtes abzuhaken.

Eine Alternative zu <div class='text'> fällt mir nicht ein. Da sehe ich kein Potential, irgend etwas zu verschlanken. Die Klasse kommt mehrmals vor, auch innerhalb einer Section. Bis auf die Artnamen soll damit jeglicher Text ausgeblendet werden können.

Die Links, die auf das Menü verweisen sollen keine Beschriftung haben; das Symbol dafür, soll zu zurückhaltend wie möglich gehalten sein, um vom Inhalt nicht abzulenken. Die Seiten sind manchmal recht lang und da ist es eine Wohltat, nicht ins Menü scrollen zu müssen und statt dessen mit dem Link direkt zurück zu kommen.

Insbesondere die Tipps zum JavaScript möchte ich noch durcharbeiten. Das schaffe ich heute aber definitiv nicht mehr. Die Konstruktion mit dem durchlaufenden Counter gefällt mir auch nicht. Wenn es etwas schlankeres gibt, ist das sicher eine gute Option.

Zu den Hinweisen zum Code bin ich noch nicht gekommen. Der Tag geht dem Ende zu und morgen muss ich früh raus. Dank Eurer Hilfe bin ich weiter gekommen, als ich es mir habe vorstellen können.

Was die Fehlermeldungen zu fehlenden Bildern betrifft: Die helfen mir sehr bei der Fehlersuche.

Viele Grüße
Martin

scatello · 06.01.2025

Martin Lemke schrieb:
weil ich nicht jedes Mal testweise über 60 Datensätze in der Datenbank ändern will.

Warum jedes mal? Einmal erledigen und gut ist.