Kontaktdaten, rechts, beim Scrollen mitziehen lassen

[eisenherz]

Hallo!
Ich suche eine Möglichkeit Kontaktdaten auf der rechten Seite meiner Website, sozusagen in einer rechten Spalte, immer sehen zu können, auch wenn man nach unten scrollt.
Ich möchte aber die Spalte an sich unsichtbar haben. Zu sehen sein soll nur die "mitwanderende Kontaktkarte" rechts neben dem Inhalt. Diese Karte soll sozusagen über dem Hintergrund schweben/ gleiten.

Kann mir jemand einen Tipp geben wie man sowas mit Contao umsetzt.

Danke

Jörg Basler

[tblumrich]

Hi.

Die einfachste Variante dürfte da position:fixed sein... je nachdem wie und wo du das Ding genau haben willst. Die Realisierung hängt etwas davon ab, wie dein Layout aufgebaut ist.

Gruß
Thomas

[eisenherz]

Hi.

Die einfachste Variante dürfte da position:fixed sein...
je nachdem wie und wo du das Ding genau haben willst. Die Realisierung hängt etwas davon ab, wie dein Layout aufgebaut ist.

Hallo Thomas!
So dachte ich auch die Sache anzugehen ... bis ich auf das Problem stieß die gesamte Spalte durchsichtig zu gestalten, damit es so aussieht als ob die Adresskarte über dem Hintergrund beim Scrollen mitzieht.

Ich hatte bisher ein zweispaltiges Layout.
Ich habe jetzt die fixe Breite vergrößert und auf drei Spalten "hochgeschaltet". In dieser dritten, rechten, Spalte wollte ich die Adresskarte fixieren. Später vielleicht auch nochmal ein Sponsorenlogo

Wie krieg ich die Spalte durchsichtig, auch im Header und Fußbereich?

Tschüss
Jörg Basler



Auf dieser Site kann man sehen was ich wünsche

[tblumrich]

Ji.

Ich bin mir nicht sicher ob ich das richtig verstehe... gerade das mit dem "durchsichtig". Du meinst wahrscheinlich den z-index, also quasi die Überlagerungspositionen der positionierten Bereiche. Du müsstest deinen fixen Bereich am weitesten oben anordnen (höchster z-index).

Gruß
Thomas

[eisenherz]

Ji.

Ich bin mir nicht sicher ob ich das richtig verstehe... gerade das mit dem "durchsichtig". Du meinst wahrscheinlich den z-index, also quasi die Überlagerungspositionen der positionierten Bereiche. Du müsstest deinen fixen Bereich am weitesten oben anordnen (höchster z-index).

Gruß
Thomas

Hallo Thomas!
Mit durchsichtig meine ich Folgendes:
Ich möchte mein altes Layout erhalten.
Rechts habe ich eine Spalte ergänzt. Dort soll die Adresskarte fixiert werden. Damit jetzt das dekorative Hintergundbild, das ich im Body in den Hintergrund gelegt habe, zur Geltung kommt, soll der Rest der Spalte , ober- bzw. unterhalb der Adresskarte durchsichtig sein, auch im Kopf -und Fußbereich. Ähnlich wie auf dieser Site

Tschüss
Jörg

[tblumrich]

Hi Jörg,

Ich sehe dort weder eine rechte Spalte, noch ein dekoratives Hintergrundbild, oder verstehe ich dich da falsch?
Prinzipiell sollte das aber dann genau so funktionieren, wie schon beschrieben... durchsichtig wird diese Spalte doch per se schon sein, solange du ihr keine Farbe gibst, ich weiß nicht was du da erst durchsichtig machen willst?

Auf der Beispielseite erscheint mir das ähnlich gemacht, nur das dort JS im Einsatz ist um immer den aktuellen Viewport (Größe) zu bestimmen, damit das absolut positionierte DIV immer wieder neu angepasst wird...

Gruß
Thomas

[eisenherz]

Hi Jörg,

Ich sehe dort weder eine rechte Spalte, noch ein dekoratives Hintergrundbild, oder verstehe ich dich da falsch?
Prinzipiell sollte das aber dann genau so funktionieren, wie schon beschrieben... durchsichtig wird diese Spalte doch per se schon sein, solange du ihr keine Farbe gibst, ich weiß nicht was du da erst durchsichtig machen willst?

Auf der Beispielseite erscheint mir das ähnlich gemacht, nur das dort JS im Einsatz ist um immer den aktuellen Viewport (Größe) zu bestimmen, damit das absolut positionierte DIV immer wieder neu angepasst wird...

Gruß
Thomas

Danke dass du nochmal nachfragst. Wäre sicher sinnvoll von mir gewesen, dabei zu schreiben, dass ich in einer lokalen Version rumtüftel

Leider ist das mit dem Durchsichtigen nicht so einfach, weil mit der im Layout vergrößerten Gesamtbreite auch Wrapper, Footer, Header, Container etc. in die neue Spalte reinragen. Verkleinere ich im CSS z.B. die Breite des container schrumpft die neue Spalte mit !?
An irgendeiner Stelle fehlt mir da das Verständnis. In meiner lokalen Version könntest du das sehen ... aber wie mach ich die sichtbar?
Tschüss
Jörg Basler

Hier ist was Ähnliches zu sehen. Mir ist nur nicht klar wo und wie ich das HTML updatsicher einsetzen muss

[tblumrich]

Hi.

Ok, verstehe.
Das heißt, du willst die fe_page.* nicht anpassen?
Die Schwierigkeit besteht darin, dass das Elternelement dieses Buttons oder eben des feststehenden Teils so breit wie der Viewport des Browsers sein muss. Am einfachsten wäre das normal <body>. Das hieße, du müsstest den Inhalt außerhalb des wrappers bringen - das geht IMHO nur über das Seitentemplate.

Es ginge aber auch im Wrapper ohne das du ans Template musst. Das hängt aber sehr davon ab, wie du dein Layout gestaltet hast. Wrapper darf dann im Seitenlayout keine Breite bekommen haben. Falls dein Layout zentriert ist und eine feste Breite hat, musst du das dann in deinem CSS für #header, #container und #footer regeln.

Dann legst du für deinen fixen Bereich nach dieser Anleitung einen neuen Layoutbereich an. Dieser könnte dann das DIV sein, wie es in deinem Beispiel beschrieben wird.

Den zusätzlichen Layoutbereich könntest du dir sparen, wenn du für den Rest deines Layouts z.B. den Footer garnicht brauchst. Dann nimmst du einfach diesen dafür. Aber wie gesagt, ich kenne deinen Aufbau nicht.

Ich hab das noch nie so probiert, aber das müsste eigentlich gehen.

Gruß
Thomas

[MiTsch]

Hallo eisenherz,

eine Alternative wäre evtl. noch IzzyFeedback.

Viele Grüße
MiTsch

[eisenherz]

Dann legst du für deinen fixen Bereich nach dieser Anleitung einen neuen Layoutbereich an. Dieser könnte dann das DIV sein, wie es in deinem Beispiel beschrieben wird.

Den zusätzlichen Layoutbereich könntest du dir sparen, wenn du für den Rest deines Layouts z.B. den Footer garnicht brauchst. Dann nimmst du einfach diesen dafür. Aber wie gesagt, ich kenne deinen Aufbau nicht.

Hallo!
Puh was für ne Tüftelei. Ich habe deine Idee jetzt ausprobiert ... hat natürlich wieder länger gedauert:-(. Als ich auf die Idee kam den HTML Code über ein eigenes Modul zu integrieren hat es funktioniert. Ich kriege jetzt also dieses Beispiell fast umgesetzt nur es gleitet auf der Hintergrundfarbe von Wrapper & Co und nicht auf dem Hintergrund (des Body)
Also ist das Problem der Durchsichtigkeit leider noch nicht gelöst. Wie gehabt pfuschen mir Wrapper & Co dazwischen. Die kann ich aber nicht einfach auf durchsichtig schalten, dann fehlt ein Hintergrund für die Schrift. Verkleinere ich sie wird alles kleiner incl. der rechten Spalte.
Ich kriege es nicht hin die rechte Spalte für sich allein durchsichtig zu gestalten )-:
Tschüss
Jörg Basler

[eisenherz]

Hallo eisenherz,

eine Alternative wäre evtl. noch IzzyFeedback.

Viele Grüße
MiTsch

Hallo!
Dazu muss ich ins php ... ich versteh ja schon den Rest nur mit Mühe ... ne das trau ich mir nicht zu.
Trotzdem danke
Jörg Basler

[eisenherz]

Hallo!
Vielleicht hab ich jetzt die Lösung, brauch aber erstmal ne Pause.
Ich habe die Position "fixed".
Im Beispiel ist sie nur oben definiert "top: 40%; " ich habe sie jetzt auch mal seitlich bestimmt und das sieht dem schon ziemlich ähnlich was ich wünsche.
Vielleicht krieg ich es ja noch diese Jahr hin
Tschüss
Jörg Basler

[tblumrich]

Hi.

Ich glaub grundsätzlich sind wir jetzt an einem Punkt, wo Hilfe ohne Sicht auf das Problem nicht mehr geht... und ich kapier nach wie vor nicht, was du mit Durchsichtigkeit meinst, leider. Aber du scheinst ja einer Lösung näher zu kommen.

Vielleicht machst du einfach nächstes Jahr weiter.

In diesem Sinne... komm gut rein.

Gruß
Thomas

[SFuchs]

Nur mal so das Fixed Element wird über dem Wrapper "gleiten" (was es eigentlich gar nicht tut) weil es mittels Z-Index:1000 eben oben drauf liegt. Soll es darunter musst du den Index reduzieren, nur dann wirst du das Element nicht mehr bedienen können weil der Wrapper drüber liegt.

Wenn du mit Opacity herum spielst solltest du daran denken das die Opacity Werte auch an die Kind Elemente übertragen werden. Willst du beispielsweise den Hintergrund eines Headers teiltransparent haben aber nicht den Inhalt, kannst du das auf diesem Wege vergessen. Da bietet es sich an eine Grafik mit Alphatransparenzen (PNG32) als Background Grafik zu verwenden, wenn es eine Farbe sein soll und nur für moderne Browser relevant ist dann RGBA oder HSLA Farbewerte (die haben einen Alpha Kanal)

[Ale]

Meinst du mit Durchsichtigkeit eventuell opacity? Hier ein Beispiel http://www.w3schools.com/css/css_image_transparency.asp. Am besten ist Beispiel 3. Opacity hat aber auch seine Kniffe. Auf CSS4you, das leider nicht mehr aktuell ist, kann man schon sehen, dass opacity nur eingeschränkt funktioniert: http://www.css4you.de/moz-opacity.html.

Alexander