Ergebnis 1 bis 9 von 9

Thema: Vertikales Scrollen verhindern

  1. #1
    Contao-Nutzer
    Registriert seit
    29.10.2012.
    Beiträge
    16

    Standard Vertikales Scrollen verhindern

    Hallo!

    Ich hab ein Problem bei der Umsetzung einer Homepage.

    Auf der rechten Seite der Webseite ragt eine Grafik in den Content mit dem Wort "Sprechzeiten".
    Diese Grafik soll mithilf des hover-Effekts beim "drüberfahren" der Maus komplett in den Content ragen, sodass die Uhrzeiten angezeigt werden.
    Das funktioniert auch alles soweit.
    Allerdings kann man nun die Webseite horizontal scrollen, was zur Folge hat, dass man die Grafik sehen kann, was ja nicht im Sinne des Zwecks ist.

    Kann mir da jemand helfen? Weiß jemand wie ich das Scrollen verhindern kann, sodass der Effekt funktioniert?


    Vielen Dank im Vorraus.

  2. #2
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Hast du width angepasst an den Zustand?
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  3. #3
    Contao-Nutzer
    Registriert seit
    29.10.2012.
    Beiträge
    16

    Standard

    Inwiefern soll denn da die Breite angepasst werden?

  4. #4
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Ich kann nur Räteslraten, wenn du nicht ein wenig von deinem CSS preisgibst, besser wäre noch ein Link!
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  5. #5
    Contao-Nutzer
    Registriert seit
    29.10.2012.
    Beiträge
    16

    Standard

    Code:
    .sprechzeiten {
        position: absolute;
        width: 300px;
        top: -175px;
        right: -240px;
        transition: right 0.25s ease-in-out;
        -moz-transition: right 0.25s ease-in-out;
        -webkit-transition: right 0.25s ease-in-out;
        -o-transition: right 0.25s ease-in-out;
        }
        
    .sprechzeiten:hover {
        right: -60px;
        transition: right 0.25s ease-in-out;
        -moz-transition: right 0.25s ease-in-out;
        -webkit-transition: right 0.25s ease-in-out;
        -o-transition: right 0.25s ease-in-out;
        }
    Das ist das aktuelle CSS.
    Ich muss mich auch korrigieren ich meine natürlich das horizontale scrollen -.-
    Sorry!

  6. #6
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Gibt's irgendwo noch ein "overflow: hidden", das verhindert, dass das Fenster durch das Neupositionieren vergrößert wird?
    Was passiert, wenn du width im Hover-Zustand verkleinerst?

    Was mir daran außerdem auffällt (hat allerdings nichts mit deinem Problem zu tun):
    Warum definierst du transition für beide Zustände?
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  7. #7
    Contao-Nutzer
    Registriert seit
    29.10.2012.
    Beiträge
    16

    Standard

    Hier zwei Screenshots um das Problem zu zeigen:
    geschlossen.jpgbeim scrollen.jpg

  8. #8
    Contao-Nutzer
    Registriert seit
    29.10.2012.
    Beiträge
    16

    Standard

    Hab overflow:hidden nochmal woanders eingesetzt. Jetzt funktionierts
    Danke!

    Ich hatte für transition einen Code von einem Programmierer genommen, deswegen weiß ich nicht warum..
    Würde eins reichen?

  9. #9
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Hab overflow:hidden nochmal woanders eingesetzt. Jetzt funktionierts
    Und der Footer sieht dann bestimmt auch besser aus!

    Ich hatte für transition einen Code von einem Programmierer genommen, deswegen weiß ich nicht warum..
    Würde eins reichen?
    Ich habe zwar selber noch nicht viel mit Transitions gemacht, aber wenn ich nicht irre, wird das nur beim Ausgangszustand definiert. Beim Hover wird nur noch der geänderte Wert notiert.

    Hier gibt's Infos: http://www.css3.info/preview/css3-transitions/
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •