nicht angemeldet
Pseudo-dynamische Seite mit CSS ohne JavaScript
0 0 
Der Martin
0
Pseudo-dynamische Seite mit CSS ohne JavaScript
Hallo Leute,
ich bastle gerne extreme CSS-Lösungen und versuche dabei ständig aufs Neue, interessante Ergebnisse herauszukitzeln ohne JavaScript und dgl. zu verwenden.
Das neueste Resultat ist eine pseudo-dynamische CSS-Seite, bei der aus Kombination von overflow:hidden und dateiinternen Ankern die Inhalte so verschoben werden, dass es für den Benutzer aussieht, als würde eine neue Seite geladen.
Hier die HTML-Seite:
http://www.stadtkreation.de/css-dynamic
und das zugehörige Stylesheet
http://www.stadtkreation.de/css-dynamic/styles.css
Problem: Das Ganze funktioniert nicht mit Opera und Netscape - diese können als einzige Browser in div-Bereichen nicht zu einem Anker springen, wenn der Inhalt nicht auf overflow:hidden gesetzt wurde (Konqueror und Safari Mac habe ich nicht getestet).
Mit einem Workaround habe ich jetzt für diese beiden das Fenster auf overflow:auto gesetzt (sie kennen overflow-x und overflow-y nicht, so konnte ich sie selektieren). Außerdem habe ich die Scrollbalken sehr unelegant mit einer farbigen div-Box abgedeckt, denn sobald man scrollt erkennt man ja den Trick.
Damit ist das Problem aber nicht gelöst, denn zumindest im Opera kann man jetzt noch immer scrollen - mit dem Mausrädchen.
Wenn jemand unter euch Lust hat, sich damit mal auseinanderzusetzen, würde mich das sehr freuen. Ich habe schon viel probiert, bin bisher aber noch auf keine geeignete Lösung gestoßen.
Übrigens: Ich mache das Ganze eigentlich nicht für Textinhalte sondern für ein JS-freies Fotoalbum.
Schöne Grüße
Johannes
-
Ich hab mal alle Browser durchprobiert die ich hab und das Ergebnis ist wie folgt:
Firfox 2: Alles korrekt
IE 6: Alles korrekt
IE 7: Alles korrekt
Opera 9.2: Alles korrekt
Safari 3.1: Alles korrekt
IE 5.5: Lediglich die 3. Seite macht einen Darstellungsfehler bei der Überschrift 2. Ordnung
IE 8 Beta: Bleibt immer auf der "Startseite"-
Hallo,
Ich hab mal alle Browser durchprobiert die ich hab und das Ergebnis ist wie folgt:
IE 5.5: Lediglich die 3. Seite macht einen Darstellungsfehler bei der Überschrift 2. Ordnung
Einspruch: Den angesprochenen Darstellungsfehler kann ich nicht entdecken. Aber IE5.5 reserviert da, wo ein seiteninterner Scrollbalken sein möchte, einen weißen Streifen und blendet zusätzlich ein paar px eines horizontalen Scrollbalkens ein (Screenshot).
Opera 8.5: Wenn das Browserfenster so klein wird, dass Scrolling notwendig ist, macht Opera *zwei* vertikale Scrollbalken, von denen der zweite innerhalb des anfängich sichtbaren Bildausschnitts wie ausgestanzt wirkt (Screenshot).
Beides sind nur kosmetische Fehler, die die Nutzbarkeit der Seite nicht einschränken; es sieht halt nur seltsam aus.
So long,
Martin-
Hallo Ingrid,
Opera 8.5: Wenn das Browserfenster so klein wird, dass Scrolling notwendig ist, ...
Beides sind nur kosmetische Fehler, die die Nutzbarkeit der Seite nicht einschränken; es sieht halt nur seltsam aus.ich sehe gerade, dass Opera hier auch funktionell Mist macht: Mit dem Mausrad kann ich nämlich den gesamten Inhalt (Seite 1 bis Seite 3) im Content-Bereich durchscrollen!
Ciao,
Martin--
Es gibt Dinge, die sind sooo falsch, dass nicht einmal das Gegenteil stimmt.-
Hallo Martin,
ich sehe gerade, dass Opera hier auch funktionell Mist macht: Mit dem Mausrad kann ich nämlich den gesamten Inhalt (Seite 1 bis Seite 3) im Content-Bereich durchscrollen!
Ciao,
Martinja, das hatte ich ja auch schon festgestellt. Mal sehen, ob es da irgendeine Lösung gibt.
Schönen Sonntag! Ich bin heute Abend wieder an der Sache.
Viele Grüße
Johannes
-
-
-
-
Hi,
Problem: Das Ganze funktioniert nicht mit Opera und Netscape - diese können als einzige Browser in div-Bereichen nicht zu einem Anker springen, wenn der Inhalt nicht auf overflow:hidden gesetzt wurde
können sie schon - allerdings erinnere ich mich bei Opera daran, dass er ans Ende des DIVs sprang. Aber warum nutzt Du nicht einfach die Zwischenüberschriften als Sprungziel?
Damit ist das Problem aber nicht gelöst, denn zumindest im Opera kann man jetzt noch immer scrollen - mit dem Mausrädchen.
Im Firefox auch - wenn man Text markiert und dann runter geht. ;-)
Übrigens: Ich mache das Ganze eigentlich nicht für Textinhalte sondern für ein JS-freies Fotoalbum.
Das eignet sich wegen der Ladezeit dann aber nur für wenige Bilder.
freundliche Grüße
Ingo-
Übrigens: Ich mache das Ganze eigentlich nicht für Textinhalte sondern für ein JS-freies Fotoalbum.
Das eignet sich wegen der Ladezeit dann aber nur für wenige Bilder.Können wir das mal ein bisschen beziffern?
Wenn wir von Ladezeit sprechen, meinen wir in der Regel primär nicht die Anzahl Ressourcen, sondern die Gesamtgrösse. Gut man kann eventuell jeden Request noch als eine minimale Last hinzuzählen.Meine Meinung ist, dass 10 Bilder zu 40kB durchaus gut vertretbar sind.
Wo setzt du die Grenze an?mfg Beat
-
Hi,
Meine Meinung ist, dass 10 Bilder zu 40kB durchaus gut vertretbar sind.
Wo setzt du die Grenze an?niedriger - so etwa bei der Hälfte.
freundliche Grüße
Ingo
-
-
Hi,
Problem: Das Ganze funktioniert nicht mit Opera und Netscape - diese können als einzige Browser in div-Bereichen nicht zu einem Anker springen, wenn der Inhalt nicht auf overflow:hidden gesetzt wurde
können sie schon - allerdings erinnere ich mich bei Opera daran, dass er ans Ende des DIVs sprang. Aber warum nutzt Du nicht einfach die Zwischenüberschriften als Sprungziel?Ach, du meinst, dass manche Browser es nicht mögen, wenn das Sprungziel ein normales div ist? Ich probiere es nachher mal mit den Zwischenüberschriften.
Viele Grüße
Johannes
-
