nochmal Frames ersetzen

[Martin]

Hallo,

ich habe bei Selfhtml rumgelesen und im Thread '"CSS-statt-Frames"-Problem': http://forum.de.selfhtml.org/?t=119408&m=765931 und möchte auch Frames durch CSS ersetzen. So wie ich es verstanden habe, ist es nicht möglich, jede Frame-Situation 1:1 zu ersetzen?

Beispiel: im gegebenen Frames-Layout habe ich eine Navigationsleiste oben, mit einer festen Höhe in Pixeln. Der Content-Bereich darunter nimmt den restlichen Platz in der Höhe ein. Wenn der Content-Bereich zu hoch ist, dann ist er scrollbar, wobei natürlich die Navigation nicht berührt wird.

Das gleiche würde ich gern ohne Frames umsetzen. Aber vermutlich gibt es keine Möglichkeit, mit einfachen CSS-Mitteln einen "feste-Pixel"-Bereich oben und einen variablen, scrollbaren "den restlichen Platz ausfüllenden"-Bereich darunter zu machen?
Was macht man? Mir scheint alle Lösungen, die ich gesehen habe, haben einen festen Bereich links und einen scrollbaren Bereich rechts. Das nützt mir aber in meinem Layout nichts.

Dank im vorraus,
Martin

[Christoph Schnauß]

hallo Martin,

vermutlich gibt es keine Möglichkeit, mit einfachen CSS-Mitteln einen "feste-Pixel"-Bereich oben und einen variablen, scrollbaren "den restlichen Platz ausfüllenden"-Bereich darunter zu machen?

Doch, das gibt es. Nachlesbar in http://de.selfhtml.org/css/layouts/fixbereiche.htm

Grüße aus Berlin

Christoph S.

[Martin]

Hallo Christoph,

erstmal danke für die Antwort. :)

Doch, das gibt es. Nachlesbar in http://de.selfhtml.org/css/layouts/fixbereiche.htm

Okay, den Artikel habe ich gelesen. Da bleibt aber für mich immer noch die Frage, wie ich verhindere, daß der Content über den ganzen Bildschirm geht. Der soll ja erst 200 Pixel von oben gemessen anfangen. Das scheint mir in dem Zusammenhang noch ein ungelöstes Problem. Auch inhaltlich gesehen: ich will ja gar kein "Übereinanderliegen" von Navigation und Content. .

Grüße aus Kreuzberg ;)
Martin

[Gunnar Bittersmann]

Da bleibt aber für mich immer noch die Frage, wie ich verhindere, daß der Content über den ganzen Bildschirm geht.

Gar nicht, Martin.

Der soll ja erst 200 Pixel von oben gemessen anfangen. Das scheint mir in dem Zusammenhang noch ein ungelöstes Problem.

Sollte sich doch mit entsprechendem oberen Rand lösen lassen.

Auch inhaltlich gesehen: ich will ja gar kein "Übereinanderliegen" von Navigation und Content. .

Was hat "Übereinanderliegen" mit "Inhalt" zu tun?

Grüße aus Kreuzberg ;)

Grüße von der anderen Seite der Oberbaumbrücke.

Live long and prosper,
Gunnar

[Martin]

Hallo Gunnar,

Sollte sich doch mit entsprechendem oberen Rand lösen lassen.

Ja, das ist natürlich korrekt. :) Danke. So würde sich das laut meiner bisherigen Anforderungsbeschreibung lösen lassen.

Allerdings ist das natürlich nicht so schön, wie die entsprechende Lösung mit Frames, denn der Scrollbalken geht über den gesamten Bildschirm, während aber bei Betätigung nur der Content gescrollt wird. Bei der Frameslösung ging der Scrollbalken nur über die Höhe des Contents, was besser zusammenpasste.

Leider gibt es da noch etwas, was ich noch nicht erwähnte: in der Navigations gibt es noch verschachtelte, aufklappende Menüs. Die habe ich jetzt leider noch nach der alten Lösung mit Javascript und pixelgenauem Positionierung gemacht. Wenn das Content-Fenser drunter wegscrollt, verschiebt das auch die aufklappenden Menüs. Das müsste man dann extra wieder ausgleichen... naja, das ginge. Aber schöner wärs natürlich der Content würde unabhängig von der "Gesamtseite" scrollbar sein.

Auch inhaltlich gesehen: ich will ja gar kein "Übereinanderliegen" von Navigation und Content. .

Was hat "Übereinanderliegen" mit "Inhalt" zu tun?

Gute Frage - ich glaube ich meinte damit, daß die Beziehung der div-Elemente zueinander (nämlich "verdeckend übereinander") bei der Lösung nicht ganz zu dem passt, wie man sie sich intuitiv aufgrund der Anforderungsdefinition vorstellt (nämlich "flächig nebeneinander").

Vielen Dank für Deine Mühe und grüße an die WAF,
Martin

[Cybaer]

Hi,

Allerdings ist das natürlich nicht so schön, wie die entsprechende Lösung mit Frames, denn der Scrollbalken geht über den gesamten Bildschirm,

Immerhin kannst Du den Scrollbalken noch sehen. Das ist bei dieser "Lösung" nämlich nicht immer der Fall. Ggf. (bei kleinem Fenster) legt sich das Menü auch *über* den Scrollbalken und verdeckt ihn/macht ihn schwer oder unbenutzbar.

Gruß, Cybaer

[Martin]

Hallo Cybaer,

Ggf. (bei kleinem Fenster) legt sich das Menü auch *über* den Scrollbalken und verdeckt ihn/macht ihn schwer oder unbenutzbar.

Da bin ich inzwischen angekommen. Beim IE ist das so. Argl! Langsam denke ich auch, daß das alles schwachsinnig ist, was ich hier mache.
Es müsste doch nur eine Höheneigenschaft "100% minus x Pixel" geben, und alles wär so schön einfach. Könnte man ja mit Javascript reinbauen - aber spätestens hier wirds endgültig schwachsinnig.

Andere Ideen?

Danke soweit,
Martin

[Cybaer]

Hi,

Es müsste doch nur eine Höheneigenschaft "100% minus x Pixel" geben, und alles wär so schön einfach. Könnte man ja mit Javascript reinbauen - aber spätestens hier wirds endgültig schwachsinnig.

Zumal gerade der IE *der* Browser ist, bei dem man das Scripting deaktivieren sollte. :->

Andere Ideen?

Ja. Ändere das Layout grundlegend und mach es so, wie (fast) alle "CSS-Sites" es machen - Du weißt nun, *warum* sie es so machen, wie sie es machen. Oder sag Dir: Scheiß auf den IE. Die "guten" User bekommen es so, wie ich es mir vorstellen und die IE-User sollen *irgendwas* (trotzdem *brauchbares*) bekommen und damit ist es getan.

Meinem Credo entspricht das nicht, aber ist ja auch nicht meine Site. :)

Gruß, Cybaer

[Martin]

Hallo,

Ja. Ändere das Layout grundlegend und mach es so, wie (fast) alle "CSS-Sites" es machen - Du weißt nun, *warum* sie es so machen, wie sie es machen.

Also ich werde das jetzt noch so durchziehen, aber das nächste Mal anders rangehen und nochmal kräftig Layout-Demonstrationsseiten studieren. Letztendlich wird es bei dem jetzigen Projekt auf den meisten Seiten im Normalfall eh nichts zum Scrollen geben, so daß das nicht so ins Gewicht fällt.

(Allerdings habe ich den vagen Verdacht, daß ich irgendwie immer was anderes möchte als die anderen Leute und mir daher an jedem Beispielszenario was zu meckern bleibt.;) )

Damit betrachte ich den Thread von meiner Seite als "Zweck erfüllt" und bedanke mich bei allen Antwortenden,
Martin

[Danny]

Hi,

halt, ich hab da noch was! Quasi das allerletzte. ;)

Schau Dir mal http://www.lohrconsult.de an. Bei diesem Projekt wollte der Kunde etwas ähnliches, eigentlich Frames. Aber das konnte ich dann doch irgendwie durch CSS und Javascript ersetzen... Viel Spaß beim Studieren des Quellcodes.

Gruß

• Danny

[Cybaer]

Hi,

Aber das konnte ich dann doch irgendwie durch CSS und Javascript ersetzen...

Hmm, Menü unten, ich scrolle, Menü scrollt nach oben (ist dabei mitten im Content), ich gehe mit der Maus aufs Menü und schwups, ist das Menü wieder nach unten gerutscht, weg von der Maus, weg vom Klick. Na ja ...

Gruß, Cybaer

[wahsaga]

hi,

Schau Dir mal http://www.lohrconsult.de an. Bei diesem Projekt wollte der Kunde etwas ähnliches, eigentlich Frames. Aber das konnte ich dann doch irgendwie durch CSS und Javascript ersetzen...

Schade nur, dass das im IE 5.01 (JS aktiviert) nicht zu funktionieren scheint: Da scrollt der Footer mit hoch, und darunter geht der Inhalt weiter - sieht ziemlich bescheiden aus.

Viel Spaß beim Studieren des Quellcodes.

Wenn das lediglich einen feststehenden Footer darstellen soll, unter dem dann der Inhalt hervorgescrollt kommen soll - dann verstehe ich nicht, warum hier jemand mit Javasccipt herumbastelt, anstatt einfach position:fixed plus Workaround für den IE zu nutzen. Letzteres klappt nämich auch mit 5er-IEs.

gruß,
wahsaga

[Martin]

Hallo,

offenbar kann man auch nicht top:200px; und bottom:0px; kombinieren, denn das wäre natürlich eine Lösung. Gibt es sonst keine Möglichkeit, ein div-Element ab einer bestimmten Position bis zum unteren Rand reichen zu lassen?

Martin

[wahsaga]

hi,

offenbar kann man auch nicht top:200px; und bottom:0px; kombinieren,

Nur im dummen IE nicht.

Gibt es sonst keine Möglichkeit, ein div-Element ab einer bestimmten Position bis zum unteren Rand reichen zu lassen?

Im IE, nur per CSS - m.W. nein.

gruß,
wahsaga

[Danny]

Hi,

per CSS in Verbindung mit etwas Javascript geht nahezu alles was Du willst. Aber wozu der ganze Aufwand? Mal im Ernst. Deine Ansätze sind ziemlich schwachsinnig... Warum überhaupt feststehende Bereiche und Aufklapp-Menüs? Das verkompliziert unnötig und ist außerdem ziemlich out. Sorge lieber für "Usability" und "Barriere-Armut" Deiner Seite und vor allem für gute Inhalte! Schaue z.B. mal die Gallerie unter http://www.cssvault.com durch. Da wirst Du sowas wie Du vorhast selten finden...

Gruß

• Danny

[Danny]

Ach ja, sollten die Voraben von einem Auftraggeber kommen, versuche ihn von einer anderen, "Standard"-Lösung zu überzeugen, d.h. keine fixen Bereiche, keine Scrollbalken um den Content, keine Aufklappmenüs, usw.

[Martin]

Hallo Danny,

Das verkompliziert unnötig und ist außerdem ziemlich out.

guter Hinweis. Aber die Aufgabe ist hier, eine bestehende Seite, die bislang mit Frames arbeitete, umzuarbeiten (die nun aufklappbaren Menüs waren vorher noch kruder eingearbeitet). Natürlich könnte man die neu layouten, aber ich bin leider eigentlich Informatiker und kein Designer. Da liegt wahrscheinlich auch das Problem. :)

Vielleicht hätte ich das grundsätzlich anders lösen müssen. Aber abgesehen von der Frage, ob das Layout "out" ist, finde ich es auch etwas merkwürdig, warum etwas, was mit Frames früher ganz einfach war ( 200px, *), nun mit CSS auf einmal ein "pain in the ass" ist.

Danke für die Mühe,
Martin

[Danny]

Hi Martin,

Mhmmm... erstmal sorry wegen meinem letzen Posting... War etwas krass. Kenne Dich und Deine Beweggründe ja nicht, scheinst ganz in Ordnung zu sein. :)

Naja, Frames und CSS sind zwei paar Schuhe und es ist heute leider noch nicht in allen Fällen möglich, einfach auf Frames zu verzichten. Jedenfalls scheint eine CSS-Version Deines Layouts nur mit Tricks möglich, wenn es in allen verbreiteten Browsern funktionieren soll.

Gruss

• Danny

[Cybaer]

Hi,

Mhmmm... erstmal sorry wegen meinem letzen Posting... War etwas krass.

Schön, daß Du selbst noch zu dieser Erkenntnis gekommen und es gepostet hast! :-)

Gruß, Cybaer

[Struppi]

Vielleicht hätte ich das grundsätzlich anders lösen müssen. Aber abgesehen von der Frage, ob das Layout "out" ist, finde ich es auch etwas merkwürdig, warum etwas, was mit Frames früher ganz einfach war ( 200px, *), nun mit CSS auf einmal ein "pain in the ass" ist.

Naja, umgekehrt wird ein Schuh draus, vieles was du mit CSS erreichen kannst ist mit herkömmlichen Mitteln unmöglich. Aber natürlich kann und soll CSS nicht die Eigenschaften von Frames oder Tabellen nachahmen.

Wobei mir aber nicht klar ist, wo das Problem genau ist. Ist es das '*'?
Das kann natürlich nicht klappen, da für CSS/HTML der Anzeigebereich quasi fliessend ist, also nicht die Größe des Browserfensters, sondern die Größe des Inhalts ist bestimmend. Im Prinzip kannst du ja ohne Problem den oberen Bereich 200px hoch machen und fertig. Wenn du ihn fixieren willst ist es in modernen Browsern auch kein Problem. Wenn du aber nur im unteren die Scrollbalken haben willst, solltest du dies mit JS umsetzen, was im gegensatz zu einem JS Menü, wovon eigentlich immer abzuraten ist, kein grosser Nachteil wäre, da die Seite ohne JS immer noch benutzbar bleibt und du mit JS einen "Mehrwert" erzielst (Mehrwert im Sinne das du deine Layoutvorstellung umsetzen kannst)

Struppi.

[Martin]

Hallo Struppi,

Deine Nachricht hatte ich übersehen.

Das kann natürlich nicht klappen, da für CSS/HTML der Anzeigebereich quasi fliessend ist, also nicht die Größe des Browserfensters, sondern die Größe des Inhalts ist bestimmend.

Das ist gewissermaßen einleuchtend. Andererseits gibts ja width und height 100%, also spielt der Anzeigenbereich ja durchaus eine Rolle.

Wenn du aber nur im unteren die Scrollbalken haben willst, solltest du dies mit JS umsetzen,

Was meinst Du damit? Die Scrollbalken durch resizen des div-Bereiches erscheinen lassen?

Grüße
Martin

[Struppi]

Das kann natürlich nicht klappen, da für CSS/HTML der Anzeigebereich quasi fliessend ist, also nicht die Größe des Browserfensters, sondern die Größe des Inhalts ist bestimmend.

Das ist gewissermaßen einleuchtend. Andererseits gibts ja width und height 100%, also spielt der Anzeigenbereich ja durchaus eine Rolle.

Nicht auf den Anzeigebereich, sondern auf die Größe des Bereiches in dem das Element ist.

Wenn du aber nur im unteren die Scrollbalken haben willst, solltest du dies mit JS umsetzen,

Was meinst Du damit? Die Scrollbalken durch resizen des div-Bereiches erscheinen lassen?

Jein, den Bereich auf die Browserfenstergröße einschränken und dann den Bereich mit JS und overflow auto scrollbar machen.

Struppi.

[Cybaer]

Hi,

Deine Ansätze sind ziemlich schwachsinnig...

Da spricht der Fachmann! >:->

Warum überhaupt feststehende Bereiche und Aufklapp-Menüs?

Z.B. weil man es im IT-Bereich so gewohnt ist? Scrollt bei deiner Textverarbeitung z.B. das Menü auch aus dem Bild? Werden "Klappmenüs" benutzt? Ja? Sowas auch. (einen erweiterten Diskurs zu diesem Thema erspare ich mir hier an dieser Stelle)

ist außerdem ziemlich out.

Den Verdacht habe ich bei allen Dingen, die sich nur unzureichend mit den aktuellen CSS-Implementationen nur unzureichend umsetzen lassen. Aber das kann Zufall sein. >:->

Sorge lieber für "Usability" und "Barriere-Armut" Deiner Seite und vor allem für gute Inhalte!

Totschlag-Argument ohne Sinn und Verstand, weil so oder so sinnvoll.

Schaue z.B. mal die Gallerie unter http://www.cssvault.com durch. Da wirst Du sowas wie Du vorhast selten finden...

Klar. Zwar gehen fixe Klappmenüs auch mit CSS (oder lese ich die Standards falsch?), nur macht die aktuelle Implementation in den versch. Browsern halt ziemliche Probleme. Wenn alle eingesetzten Browser CSS 2.0 korrekt implementiert hätten, wäre das doch gar kein Thema. Tun sie aber nicht, also bemäntelt "man" diese Unfähigkeit mit Hacks und "ist doch eh schlecht". Ein Schelm, wer schlechtes dabei denkt ...

Gruß, Cybaer

[Martin]

Hallo,

Auch inhaltlich gesehen: ich will ja gar kein "Übereinanderliegen" von Navigation und Content. .

Was hat "Übereinanderliegen" mit "Inhalt" zu tun?

Aufgrund der gewonnenen Erfahrung neue Definition: "es paßt inhaltlich gesehen nicht" heißt: es wird jede Menge Probleme geben, wenn man diesen Workaround wählt. :-)

Martin