[CSS] in der Höhe variabler DIV

[bulgrin]

Dringend Hilfe gesucht!!!! Ich möchte einen DIV erstellen mit automatischem Scroll und festgelegtem Abstand zu allen Seiten, der sich mit Veränderung des Browser-Fensters in der Höhe vergrößert bzw. verkleinert - und das in allen Browsern. Vielen Dank im voraus.

[mrhappiness]

Dann verwende als Breiten- und Höhenangabe Prozentwerte und benutzte CSS. Ich habe gehört, die CSS-Eigenschaft overflow soll toll sein.

[bulgrin]

Original geschrieben von mrhappiness
Dann verwende als Breiten- und Höhenangabe Prozentwerte und benutzte CSS. Ich habe gehört, die CSS-Eigenschaft overflow soll toll sein.

Das habe ich schon versucht. Funktioniert nur bedingt, wenn nämlich der DIV auf y=0 positioniert ist. Da sich die Prozentangabe auf die Gesamthöhe des Content bezieht, ist bei einer anderen Positionierung (z.B. y= 40px) der Scrollbar (in diesem Fall 40 px) unterhalb des sichtbaren Bereichs und damit nicht mehr vollständig erreichbar.

Eine Möglichkeit die ich probiert hatte war: top-margin und bottom-margin des DIVs auf feste Werte zu setzen, was aber von IE leider nicht interpretiert wird.

[mrhappiness]

Zeig mal

[wahsaga]

Also mit festem Abstand zu allen Seiten wird das schwierig bis unmöglich im IE - die Maße eines Elementes aus den gegenüberliegenden "Koordination" absoluter Positionierung zu ermitteln, beherrscht er nämlich nicht.

Mit prozentualen Angaben für Breite/Höhe und top/left ist es natürlich machbar - aber dann sind die Abstände oben/unten und links/rechts natürlich nicht gleich groß, weil sich die Prozente natürlich auf die Höhe und Breite des Viewports beziehen.

[mrhappiness]

Du könntest auch versuchen im umgebenden body-Element ein padding zu definieren und das div 155% breit und hoch sein zu lassen?

[bulgrin]

Original geschrieben von wahsaga
Also mit festem Abstand zu allen Seiten wird das schwierig bis unmöglich im IE - die Maße eines Elementes aus den gegenüberliegenden "Koordination" absoluter Positionierung zu ermitteln, beherrscht er nämlich nicht.

Mit prozentualen Angaben für Breite/Höhe und top/left ist es natürlich machbar - aber dann sind die Abstände oben/unten und links/rechts natürlich nicht gleich groß, weil sich die Prozente natürlich auf die Höhe und Breite des Viewports beziehen.

Das ist genau mein bisheriger Wissensstand und das Problem ist auch das bei sehr kleiner Fenstergröße es passieren kann, das der Scrollbereich wiederum außerhalb des sichtbaren Bereichs liegt. Hatte gehofft es gäbe vielleicht einen Trick, den Explorer trotzdem zu überreden (z.B. mit Javascript), ich selber bin da aber kein Stück weiter gekommen.

[bulgrin]

Original geschrieben von mrhappiness
Du könntest auch versuchen im umgebenden body-Element ein padding zu definieren und das div 155% breit und hoch sein zu lassen?

Das beträfe dann aber auch alle verwendeten DIVs, was schlecht wäre. Hier mal die Webadresse zur Ansicht: http://www.eikesteinmetz.de/referenzen.htm

[wahsaga]

Original geschrieben von bulgrin
Das beträfe dann aber auch alle verwendeten DIVs, was schlecht wäre. Hier mal die Webadresse zur Ansicht: http://www.eikesteinmetz.de/referenzen.htm

Uh, was soll denn der Kram?

Wofür resized du mein Browserfenster automatisch? (Ja, derzeit muss ich einen IE 5.01 nutzen, der sowas leider zulässt.)

Meine erste Reaktion darauf ist, das Fenster wieder auf volle Größe zu bringen (deine resize-Angabe bringt das nämlich nicht ganz) - und daraufhin verschwinden reproduzierbar Logo, Hintergrundbild und Navigation vollständig.

Nee, so einen Murks bitte gleich unterlassen, Danke.

Hatte gehofft es gäbe vielleicht einen Trick, den Explorer trotzdem zu überreden (z.B. mit Javascript), ich selber bin da aber kein Stück weiter gekommen.

Nun, das sollte kein größeres Problem darstellen. Ordentliche CSS-Lösung für fähigere Browser, Anpassungen von Elementmaßen und ggf. Position per Javascript für den IE.
Fragt sich nur, was für einen Murks der dann anzeigt, wenn gar kein JS zur Verfügung steht?


Außerdem sind seiteninterne Scrollbalken sowieso reichlich unschön, und auch von der Usability her umstritten - ich bevorzuge da doch einen Scrollbalken am rechten Rand, mit dem ich den Inhalt scrollen kann. Wenn man feststehende Bereiche wünscht, kann man ja dafür zu fixer Positionierung (nebst notwendigem Workaround dafür für den IE) greifen.
Bin selber gerade so etwas in der Art am umsetzen: Der zu scrollende Inhalt in einem bildschirmfüllenden Container, und dazu oben und unten fix positionierte Elemente über diesem Container, die dann oben und unten einen Rahmeneffekt darstellen (seitliche Rahmen werden durch Borders für den Inhalt innerhalb des Containers simuliert) ... funktioniert auch ohne Javascript halbwegs passabel (na ja, eine knappe handvoll IE-spezifischer Workarounds erfordert es doch, insb. natürlich für eine absolute Breite des Rahmens.)

[bulgrin]

Original geschrieben von wahsaga
Uh, was soll denn der Kram?

Wofür resized du mein Browserfenster automatisch? (Ja, derzeit muss ich einen IE 5.01 nutzen, der sowas leider zulässt.)

Meine erste Reaktion darauf ist, das Fenster wieder auf volle Größe zu bringen (deine resize-Angabe bringt das nämlich nicht ganz) - und daraufhin verschwinden reproduzierbar Logo, Hintergrundbild und Navigation vollständig.

Nee, so einen Murks bitte gleich unterlassen, Danke.

Dafür habe ich durchaus Gründe, die unter anderem sowohl mit plattformübergreifenden wie auch browserübergreifenden Problematiken zu tun haben! Und bei mir verschwindet auch nichts bei einem nachträglichen resize auf den kompletten Bildschirm meinerseits?! Eigentlich wollte ich auch nicht unbedingt eine Kritik an meiner Site hinsichtlich persönlicher Vorlieben.

Nun, das sollte kein größeres Problem darstellen. Ordentliche CSS-Lösung für fähigere Browser, Anpassungen von Elementmaßen und ggf. Position per Javascript für den IE.
Fragt sich nur, was für einen Murks der dann anzeigt, wenn gar kein JS zur Verfügung steht?

Ob Murks oder nicht, ich wüßte halt gerne mal eine Möglichkeit, wie man das mit Javascript schaffen könnte.

Außerdem sind seiteninterne Scrollbalken sowieso reichlich unschön, und auch von der Usability her umstritten - ich bevorzuge da doch einen Scrollbalken am rechten Rand, mit dem ich den Inhalt scrollen kann. Wenn man feststehende Bereiche wünscht, kann man ja dafür zu fixer Positionierung (nebst notwendigem Workaround dafür für den IE) greifen.

Ich empfinde Srollbalken am rechten Rand eher als unschön! Und fixed layers hab ich schon probiert, funktionieren leider auch nicht so wie gewünscht, führen zu jeder Menge anderem "Murks". Die Seite sollte auf allen Oberflächen in allen Browsern halbwegs gute Ergebnisse liefern und nicht nur z.B. auf dem PC im IE funktionieren.

Bin selber gerade so etwas in der Art am umsetzen: Der zu scrollende Inhalt in einem bildschirmfüllenden Container, und dazu oben und unten fix positionierte Elemente über diesem Container, die dann oben und unten einen Rahmeneffekt darstellen (seitliche Rahmen werden durch Borders für den Inhalt innerhalb des Containers simuliert) ... funktioniert auch ohne Javascript halbwegs passabel (na ja, eine knappe handvoll IE-spezifischer Workarounds erfordert es doch, insb. natürlich für eine absolute Breite des Rahmens.)

Würde mich sehr über konkrete Hilfe sprich mögliche Javascriptprogrammierung freuen. Vielen Dank.

[wahsaga]

Original geschrieben von bulgrin
Eigentlich wollte ich auch nicht unbedingt eine Kritik an meiner Site hinsichtlich persönlicher Vorlieben.

Ja, ich gebe es zu, es ist eine meiner "persönlichen Vorlieben", das Logo, Hintergrundbild und Menü einer Seite lieber nicht verschwinden sehen zu wollen ...

[bulgrin]

Original geschrieben von wahsaga
Ja, ich gebe es zu, es ist eine meiner "persönlichen Vorlieben", das Logo, Hintergrundbild und Menü einer Seite lieber nicht verschwinden sehen zu wollen ...

Kann ich leider nicht nachvollziehen. Seite ist auf diversen Rechnern (ca. 15 die unter windows, unix und mac os laufen) in allen Browsern getestet und dieses Phänomen tritt in keinem dieser Fälle auf. Hmm…

[bulgrin]

Vielen Dank nochmal für die ausführliche Hilfe. Habs jetzt selber rausgekriegt. Ist ganz einfach und geht ohne Javascript!