html: Positionierung eines "tooltips" bei mouse hover

[Arnulf zu Linden]

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.

[freaked]

mouseover sollte man nicht mehr benutzen. die masse da draußen surft über handy und touch hinein, wo es das nicht gibt



quick and dirty führt dich das zu einem netten zentrierten hover effekt. wenn du die margin-left/right noch adaptierst.

[Dirk]

Ist nen Argument. Wobei die auf dem Handy das eh nicht sehen. Ich glaube inzwischen ist es gelernt, dass ne Bildergallerie möglicherweise öffenbar ist.

margin: auto macht normalerweise das Ding zentriert. Ich vermute mal, dass die Box einfach nicht wirklich weiß wie groß sie ist, weil die Bilder darüber die größe des divs dynamisch beeinflussen. Also ist der Kasten so groß wie der Text halt braucht. glaube ohne script wird das schwer auflösbar. ich wirds auch einfach rauswerfen.

[Vicky]

<style type="text/css">
.pic_hover_text {
position:relative;
top:-200px;
left:60px;
}
</style>

[Arnulf zu Linden]

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.

[Dirk]

Man sagt das immer so. Ich wünschte die Homepage Statistik würde dazu was aussagen. Aber auch bei meinem neuen Hoster wird nen Steinaltes nicht mehr gepflegtes Open Source Tool eingesetzt, dass überhaupt nur zwischen Netscape und IE unterscheiden kann.

Glaube auch das meine Seite deutlich mehr am PC geschaut wird, als auf dem Handy. Einfach wegen Nische und Irrelevanz in der breiten Bevölkerung des Planeten.

[Arnulf zu Linden]

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.

[Arnulf zu Linden]

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.