html: Positionierung eines "tooltips" bei mouse hover

Hier läuft gerade ein kleinerer HTML-Nahk(r)ampf.

Seiten dieser Art sollen zukünftig in dieser Art angezeigt werden, also kein grundsätzlich neues Design, aber Änderungen in Details. "Unter der Haube" passiert dafür notwendigerweise einiges, so geht das nicht mehr in HTML 4, womit auch CSS nötig wird. JavaScript bleibt aber draußen! Insbesondere wird von table-Layout auf div-Layout umgestellt.

Was mich am obigen Ergebnis noch stört, ist die Einblendung des "tooltips" bei mouse hover unter den Bildern. Der soll eigentlich mittig in den Bildern eingeblendet werden.

Code wird bei Bedarf nachgereicht.

Das war inna Nacht ein 1. Schuss. Vorhin bei einer kurzen Fahrradrunde "für 'n Kreislauf" fiel die Entscheidung, die doch recht voluminöse Box rauszuschmeißen. Ein sich ändernder Mauszeiger, die sich ändernde Opazität des Bildes und ein dabei erscheinender blauer Rahmen um das Bild – Textlinks wurden und werden oftmals ebenfalls blau dargestellt – reichen hoffentlich, die Leute zum drauf klicken zu animieren. Durch den Rauswurf der Box sind zudem sowohl die html-Datei als auch die css-Datei etwas schlanker geworden.

Mit position: relative; ging das Zentrieren der Box irgendwie nicht, dafür traten unerwünschte Nebenwirkungen auf. Wahrscheinlich geht das nur mit Script, und das sehe ich für so etwas nicht ein, da das "Kanonen auf Spatzen" wäre.

Dass die "Masse da draußen" sich 'ne Fotogalerie auf dem Mäusekino rein zieht, ist schwer vorstellbar. Da drauf erkennt man doch nix. Minimal sollte es schon ein Tablet sein.

zu früh gefreut

Wenn unter einem Bild, das nicht am rechten Rand steht, die Bildunterschrift mehr Zeilen benötigt als bei anderen Bildern in der Zeile, passiert das.
Wieso passiert das und wie lässt sich das verhindern, sodass es keine leeren "Plätze" mehr gibt (außer evtl. ganz unten nach dem letzten Bild) und wieder alle "Plätze" innerhalb einer Zeile mit je einem Bild samt Bildunterschrift gefüllt werden?

Das passierte bereits mit <div class="gallery">, der Wechsel auf <figure class="gallery"> brachte dahingehend leider keine Änderung. Auch sonst änderte sich dadurch nix, nur die html-Datei wurde etwas übersichtlicher, da nun weniger geschachtelte <div> drin sind.

Auf den ersten Blick löst ein grid-Layout das Problem.

Die html-Datei wird dadurch etwas übersichtlicher. In der css-Datei ist es quasi egal.

Mit ganz alten Brausen wird sich das dann aber nicht mehr anzeigen lassen. Wenn ich das richtig verstanden habe, ist die Historie bei den html-Layouts: table → div → grid
Für eine Fotogalerie, die gleich die kompletten Bildsätze in voller Auflösung lädt, ist aber eh etwas mehr Bums in der Kiste und auf der Leitung erforderlich. Dafür ist 'n Athlon XP mit Windows XP und Firefox 48.0.2 wohl doch etwas zu schlapp.

Ach ja, die schwarzen Beerdigungsrahmen um die Bilder kommen natürlich noch weg. Die dienen hier nur dem Debugging.erl.

Und wenn schon grid, dann kommt das auch noch für die beiden anderen "Tabellen" (Text über Bildern und Fußzeile) statt div-Layout.erl.