Neue Antwort schreiben 
 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
html: Positionierung eines "tooltips" bei mouse hover
Arnulf zu Linden Offline
Hat und braucht kein Smartphone!

Beiträge: 6.000
Registriert seit: Oct 2012
Beitrag #1
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.

Wenn es mal "etwas" älter sein darf:
https://www.sackpfeyffer-zu-linden.de/Hardware.html
(Dieser Beitrag wurde zuletzt bearbeitet: 10.07.2024 22:41 von winfreak.)
07.07.2024 03:26
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
freaked Offline
× ∫яεαкεδ εησυġн × ζιgнтѕтαя ×

Beiträge: 17.155
Registriert seit: Jul 2008
Beitrag #2
RE: html: Positionierung eines "tooltips" bei mouse hover
mouseover sollte man nicht mehr benutzen. die masse da draußen surft über handy und touch hinein, wo es das nicht gibt

[Bild: 647a2dd0d9f37537c548ddc56f67872a.png]

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

(Dieser Beitrag wurde zuletzt bearbeitet: 07.07.2024 08:52 von freaked.)
07.07.2024 06:41
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Dirk Offline
Software Archäologe

Beiträge: 14.869
Registriert seit: Jul 2008
Beitrag #3
RE: html: Positionierung eines "tooltips" bei mouse hover
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.

07.07.2024 08:33
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Vicky Offline
come sempre

Beiträge: 2.810
Registriert seit: Jul 2008
Beitrag #4
RE: html: Positionierung eines "tooltips" bei mouse hover
<style type="text/css">
.pic_hover_text {
position:relative;
top:-200px;
left:60px;
}
</style>
(Dieser Beitrag wurde zuletzt bearbeitet: 07.07.2024 08:47 von Vicky.)
07.07.2024 08:47
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Arnulf zu Linden Offline
Hat und braucht kein Smartphone!

Beiträge: 6.000
Registriert seit: Oct 2012
Beitrag #5
RE: html: Positionierung eines "tooltips" bei mouse hover
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.

Wenn es mal "etwas" älter sein darf:
https://www.sackpfeyffer-zu-linden.de/Hardware.html
07.07.2024 19:21
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Dirk Offline
Software Archäologe

Beiträge: 14.869
Registriert seit: Jul 2008
Beitrag #6
RE: html: Positionierung eines "tooltips" bei mouse hover
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.

08.07.2024 05:57
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Arnulf zu Linden Offline
Hat und braucht kein Smartphone!

Beiträge: 6.000
Registriert seit: Oct 2012
Beitrag #7
RE: html: Positionierung eines "tooltips" bei mouse hover
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.

Wenn es mal "etwas" älter sein darf:
https://www.sackpfeyffer-zu-linden.de/Hardware.html
(Dieser Beitrag wurde zuletzt bearbeitet: 10.07.2024 22:12 von Arnulf zu Linden.)
09.07.2024 23:29
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Arnulf zu Linden Offline
Hat und braucht kein Smartphone!

Beiträge: 6.000
Registriert seit: Oct 2012
Beitrag #8
RE: html: Positionierung eines "tooltips" bei mouse hover
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.

Wenn es mal "etwas" älter sein darf:
https://www.sackpfeyffer-zu-linden.de/Hardware.html
(Dieser Beitrag wurde zuletzt bearbeitet: 10.07.2024 23:50 von Arnulf zu Linden.)
10.07.2024 22:26
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Neue Antwort schreiben 


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste