Hallo,

ich bin neu hier im Forum (danke für die freundliche Begrüßungsmail) und denke schon seit längerem über ein Schönheitsproblem bei meiner Webseite nach. Die Seite ist handgeschrieben, PHP und CSS. Aufbau: linker Container "absolute" und scrollbar für die Navigation, rechter Container auch "absolute" und scrollbar für die Daten.

Den Navi-Einträgen sind mit "data-title" Attribut Tooltip-Texte zugeordnet, die mit "::after" und ":hover::after" als eigener Tooltip angezeigt werden. Nicht fest positioniert, nur mit "margin" ewas abgerückt. Ich finde das eleganter als den Standard-Tooltip mit dem "title" Attribut. Das funktioniert soweit, aber:

1. Wenn der Tooltip-Container "absolute" ist (wie allgemein beschrieben), dann geht dieser nicht über die Grenzen des linken Navi-Containers hinaus, da ist aber nur sehr wenig Platz. Der Tooltip ist dann also nur wenige Buchstaben breit aber sehr hoch! Die Positionierung ist aber OK, auch beim scollen.

2. Wenn der Tooltip-Container "fixed" ist (so ist es jetzt), dann geht er problemlos über die Containergrenze hinaus (toll, da ist Platz genug). Wenn dann aber heruntergescrollt werden muß, stimmt die Positionierung nicht mehr. "fixed" mißt einfach die Position vom Seitenanfang an (auch vom nicht mehr sichtbaren Bereich), bestimmt aber die Tooltip-Position vom sichtbaren Anfang der Seite, zeigt ihn also zu tief an (evt auch nicht mehr sichtbar).

Getestet mit: Firefox, Vivaldi, QupZilla und Konqueror.

Ich suche also eine Möglichkeit die Darstellung von "fixed" mit der Positionierung von "absolute" zu kombinieren.

Für den einfachen Vergleich habe ich 2 kleine Testseiten auf meine Domain geladen, zu erreichen sind sie auf www.thestorff.de und dann /test-tooltip-absolute.php bzw /test-tooltip-fixed.php als Dateiname anhängen (so werden sie von den Suchmaschinen ignoriert).

Hat jemand irgendwelche Tips für mich? Evt. wie man die gescrollten Pixel wegrechnen kann? Rechnen kann man ja inzwischen mit calc, aber wie kommt man an die Anzahl der Scrollpixel?

Gruß Harry

Puh wo fängt man da an. Und auch wenn du das gar nicht hören willst: Schön, dass du deine Seite selber schreibst, aber du solltest dir einen komplett neuen Aufbau für deine Seite überlegen. Ja ich weiß, du hast bereits viel Arbeit hineingesteckt, aber so, wie du es jetzt machst, wirst du wohl zu keinem zufriedenen Ergebnis kommen.

Erstens: Position absolute ist bei deiner Seite nicht notwendig. Löse dich davon, Elemente absolut zu positionieren und stelle dich darauf ein, dass eine Website eben nun mal je nach Ausgabegerät "etwas anders" aussieht. Am Besten lässt sich das bei deinem Beispiel nachvollziehen: Auf meinem Monitor (der groß genug ist), tritt dein beschriebenes Problem gar nicht auf.

Auch schön, wenn du die die title-Funktion ersetzen willst, aber bedenkst du dabei auch assistive Hilfsmittel? Screenreader etc. erkennen title-Attribute und der Benutzer kann diese entsprechend ausgeben lassen (oder auch nicht), das fällt bei deiner Lösung weg. Auch stellt sich die Frage, warum überhaupt Inhalt vor Leuten verstecken? Falls du unbedingt eigene Lösung verwenden willst dann mache sie so, dass sie auch zugänglich ist und zB mit Javascript vorhandene title-Attribute ersetzt. Dafür gibt es aber schon fertige Plugins, das musst du nicht selber schreiben.

"Scrollbare" Container sind auch nicht zeitgemäß, die Leute wissen,d ass eine Seite nicht am Ende des Bildschirms aufhört.

Tut mir leid für diese "harte" Antwort. Schau dir vielleicht auch an, wie andere Seiten solche Menüs umsetzen und hole dir dort Inspiration. (nicht 1:1 nachbauen. )

Hallo cloned, danke für die Antwot.

Du hast vermutlich auch bemerkt, daß diese Webseite kein Geld verdienen will. Sie ist nur entstanden weil ich auch im Ruhestand meine Gehirnzellen etwas beschäftigen möchte. Nur Krteuzworträtsel und Sudoku reicht nicht... Deshalb probiere ich halt vieles aus. Und dann tauchen eben manchmal Probleme auf die man mit fertigen Baukästen nicht hätte...

Ich sehe den Fehler normalerweise auch nicht, nur wenn ich zum testen das Browserfenster extra kleiner mache. Die Seite ist nicht für bestimmte Browsergrößen geschrieben, das ist alles sehr flexibel, darauf achte ich schon. Bei kleineren Bildschirmen sieht es auch anders aus obwohl ich das mangels Smartphone nicht selbst kontrollieren kann.

Bei großen Bildschirmen möchte ich jedoch die vollkommen getrennt scrollbare Navigation unbedingt behalten. Ich finde es persönlich nicht gut wenn die Navigation verschwindet, nur weil ich am Ende der Seite bin. Und ohne alsolute oder fixed formatierte Grundcontainer bekomme ich die getrennt scrollbare Navigation nicht hin.

Javascript mochte ich für diese Schönheitsgeschichte nicht verwenden, klar, damit wäre es sicher möglich.

Aber zum eigentlichen Problem der Anzahl gescrollter Pixel wird es vermutlich keine CSS-Lösung geben?

Gruß Harry

Nein, leider nicht. Sonst hätte ich nicht so viel geschrieben (wie: Überdenke mal den Aufbau deiner Seite ^^ )

Ja mir ist klar, dass die Seite keinen Gewinn erwirtschaftet und dass du sie in deiner Freizeit machst. Ist ja auch gut so, schön wenn man sich damit beschäftigt (und das meine ich ernst, ist in keinster Weise sarkastisch gemeint)

position:absolut (und fixed) werden leider oft von Anfängern verwendet und verursachen eigentlich immer nur Probleme (wie deines), welches ohne gar nicht erst auftritt.

Auch Sachen wie "Ich will, dass die Navigation immer sichtbar bleibt" ist ja auch prinzipiell nicht verkehrt, aber dafür gibt es bessere Möglichkeiten als deine. Ist die Navigaion "eher kurz", dann fixed positionieren. Ansonsten ein aufklapp-Menü oder ähnliches mit Javascript. Javascript aus sicherheitsgründen nicht auf der Seite einzusetzen ist heutzutage nicht mehr wirklich zutreffend, es sollte aber, wenn es eingesetzt wird immer darauf geachtet werden, dass die Seite auch ohne JS benutzbar bleibt. Und ja, auch ich verwende noscript und blockiere standardmäßig JS, verwende es trotzdem auf Seiten. Ohne JS ist es halt nicht ganz so angenehm und schön zu verwenden aber es funktioniert

Um nochmal auf das Problem der Container einzugehen: Es geht nicht viel anders wie du es umgesetzt hast, du musst dir nur eine bessere Logik überlegen: Mindestbreite, was ist, wenn es zu viele Elemente werden -> Untergruppen bilden etc?)
Auch ist dein overflow:hidden nicht wirklich zielführend, das verhindert auch, dass Inhalt einfach abgeschnitten wird.

Danke erst mal für die Mühe. Überdenken der Struktur ist was für lange Winterabende, die kommen ja bald... Und das Menü ändern ist auch kein großes Problem. Ich habe die Seiten ja ziemlich modular aufgebaut, das Menü ist eine eigene PHP-Datei, die Texte und Dateunamen etc eine weitere und die Formatierung in der CSS-Datei. Aber ich möchte das Aussehen so ähnlich belassen. Notfalls muß doch ein kleines JS dafür herhalten, es funktioniert ja ohne auch. Ja, ich denke da noch zu konserativ...

Gruß Harry