horizanteles Scrollen auf einen Bereich beschränken
1 0 0 0 0 
Gernot Back
0 
Patrick Andrieu
0
0 1 Gernot Back
horizanteles Scrollen auf einen Bereich beschränken
Hallo zusammen!
Habe eine Bildergallerie mit css containern erstellt. Hierbei wird es viel content geben, der sich sowohl horizontal als auch vertikal ausweitet. Bei Klick auf das erste Bild sollen sich in der gleichen Zeile weiter Bilder laden.
Zur verdeutlichung ist hier die Skizze zu finden:
http://www.three-tourist-treasure.de/print.php
Meine Frage ist nun, wie ich es schaffe das horizontale Scrollen lediglich auf die Bilderreihe zu beschränken und die linke Informationsspalte immer sichtbar erhalten kann.
Muss ich hierfür einen neuen unsichtbaren container erstellen, der eingerückt eben nur den Bilderbereich abdeckt und nur dieser zum Scrollen erlaubt wird?
Habe dies schon erfolglos gestestet, bin mir aber ehrlich gesagt auch nicht ganz im klaren wie dies korrekt anzulegen wäre.
Oder gibt es hierfür eine andere Lösung?
Über jeglichen Ratschlag wäre ich sehr dankbar.
Gruß - Markus
-
Muss ich hierfür einen neuen unsichtbaren container erstellen, der eingerückt eben nur den Bilderbereich abdeckt und nur dieser zum Scrollen erlaubt wird?
Im besten Fall, ja. Dieser muss natürlich eine feste breite haben und eine entsprechende overflow Eigenschaft. Auch die Höhe der Bilder sollten die des Containers nicht übersteigen.
Aber im Endeffekt solltest du eine solches CSS-Layout erstellen:<-- 100% Breite -->
-------------------------- <
| | |
| | | feste
| | | Höhe
| | |
-------------------------- <
< overflow: auto >Dann sollte das von dir gewünschte ohne weiteres funktionieren.
Oder was bereitet dir Probleme?Grüße.
-
Hi Rafael,
habe mich im Layout nochmal reduziert und mich an deine Skizze gehalten, insofern ich diese richtig verstanden habe. Die beiden Spalten müssen wohl noch in einen gemeinsamen Container gepackt werden, um vertikal beim scrollen beide ansprechen zu können? Kriegs leider nicht gebacken.Meine Zuweisungen sehen wie folgt aus:
Container: scroll nur vertikal
Linke Spalte: scroll gar nicht
Rechte Spalte: scroll nur horizontalHier nochmals das aktuelle Exemplar:
http://www.three-tourist-treasure.de/test.htmlInteressant aber nicht das was ich erreichen wollte. Vielleicht kann da nochmal jemand einen Blick drauf werfen. Ich versteh´s nicht.
Danke jedenfalls soweit - Gruß - Markus
-
Hi rainbowmonkey,
Container: scroll nur vertikal
Der "Container" ist ja auch Quasi das gesamte Browser Fenster, wenn du es nicht
anders wünschst, dann scrollt der eh.Linke Spalte: scroll gar nicht
overflow:hidden
Rechte Spalte: scroll nur horizontal
ich weiss nicht ob man sich die richtung aussuchen kann, in die man gescrollt haben will.
http://www.three-tourist-treasure.de/test.html
Grüße,
Engin
GYRO-
ich weiss nicht ob man sich die richtung aussuchen kann, in die man gescrollt haben will.
Es gibt eine proprietäre Eigenschaft, die man für den IE zuweisen kann overflow-y. Ansonsten einfach dafür sorgen, dass das enthaltene Element nicht größer ist als die Zeile.
-
Hallo Rafael,
Es gibt eine proprietäre Eigenschaft, die man für den IE zuweisen kann overflow-y. Ansonsten einfach dafür sorgen, dass das enthaltene Element nicht größer ist als die Zeile.
Das kann man mittlerweile den meisten modernen ohne Weiteres zuweisen, die das dann auch anstandslos schlucken, zumal es in CSS3 ja auch Standard und beileibe nicht mehr proprietär werden soll.
http://www.w3.org/TR/css3-box/#the-overflow-x
Gruß Gernot
--
super me-
Hallo Gernot!
overflow-x/y.
den meisten modernen ohne Weiteres zuweisen, die das dann auch anstandslos schlucken, zumal es in CSS3 ja auch Standard und beileibe nicht mehr proprietär werden soll.Nach meinen Erfahrungen kann das Opera (hier 9.01) nicht.
Viele Grüße aus Frankfurt/Main,
Patrick -
Hi Gernot,
Das kann man mittlerweile den meisten modernen ohne Weiteres zuweisen, die das dann auch anstandslos schlucken, zumal es in CSS3 ja auch Standard und beileibe nicht mehr proprietär werden soll.
was mich grad wundert ist, warum es bei den versuchen des OP mit overflow überhaupt nicht geht.
Bei meinem versuch war es so, das wenn ich im zu scrollenden bereich nur Text hatte, auch kein scrollbalken erschien, erst nachdem ich Bilder anstelle von Text genommen hatte erschien auch der scrollbalken, woran liegt das?Grüße,
Engin
GYRO
-
-
-
-
-
-
Hi,
Meine Frage ist nun, wie ich es schaffe das horizontale Scrollen lediglich auf die Bilderreihe zu beschränken und die linke Informationsspalte immer sichtbar erhalten kann.
ich denke mal overflow auto dürfte die kriterien erfüllen.
Grüße,
Engin
GYRO -
Hallo rainbowmonkey,
Zur verdeutlichung ist hier die Skizze zu finden:
http://www.three-tourist-treasure.de/print.phpMeine Frage ist nun, wie ich es schaffe das horizontale Scrollen lediglich auf die Bilderreihe zu beschränken und die linke Informationsspalte immer sichtbar erhalten kann.
Du müsstest da mit zwei verschachtelten Containern um deine Bilder arbeiten, die in einer Zeile dargestellt werden sollen. Die Weite des inneren Containers, der direkt um deine Bilder herum liegt, setzt du auf die Gesamtweite aller deiner Bilder in der Zeile, sodass sie alle ohne Umbruch nebeneinander passen. Wie viele Bilder du insgesamt in einer Zeile hast und wie breit die sind, das kannst du ja client- oder serverseitig auslesen.
Mit Javascript habe ich unlängst etwas Ähnliches auf dieser Testseite gemacht:
http://lernspielwiese.de/scroll/horizontalscrollanchor.html
Dem äußeren Container gibst du eine Weite und overflow:auto. Wie breit der äußere Container sein muss, damit er zusammen mit der feststehenden linken Spalte beim Client das ganze Fenster ausfüllt, das kannst du natürlich nur cleintseitig mit JavaScript auslesen.
Wie deine Seite im Moment funktioniert, ist mir allerdings auch schleierhaft: Du hast zwei ineinander verschachtelte BODY-Elemente. Das ist absolut invalide. Was die Browser da anzeigen, ist reine Glücksache.
Gruß Gernot
--
super me-
Hi Gernot,
und danke für die Hinweise! Das mit dem 2ten body ist mir auch schleierhaft. Habe festgestellt, dass dieser erst erzeugt wird, wenn das .php mit den Bildern dazugeladen wird. Habe das body Element aus dieser .php herausgenommen und nun sieht der code halbwegs sauber aus.Ansonsten krieg ich mein Scrollproblem beim besten Willen nicht in den Griff. Habe mir hier die Stunden um die Ohren gehauen, aber irgendwo hakt es stets. Dein scroll-Beispiel scheint tatsächlich eine Lösung zu sein, nur leider geht mir das zu weit. Bin absoluter Programmier-Laie und meine abstrakte Denke reicht scheinbar manchmal nicht aus.
Trotzdem danke soweit!
Gruß
Markus
-
