Ergebnis 1 bis 3 von 3

Thema: one pager lässt sich nicht scrollen

  1. #1
    HTML Newbie
    Registriert seit
    05.09.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard one pager lässt sich nicht scrollen

    Hallo liebe Forumsmitglieder,

    ich habe folgendes Problem beim erstellen eines one pager. Ich hoffe jemand kann mir helfen. Ich will als Startseite ein Video abspielen lassen (was auch funktioniert)
    ,wenn man dann weiterscrollt soll auf der "nächsten Seite" ein Bild erscheinen im Vollformat. Mein Problem gerade ist, dass ich zwar das Video und das Bild einbinden kann, aber ich nicht nach unten scrollen kann. Ich kann also nicht zum Bild scrollen und sehe es nur am unteren Rand des Browsers. J-Query will ich hier benutzen um möglichst elegant von einer section zur nächsten section zu gelangen, aber auch ohne die Einbindung von jquery funktioniert das scrollen nicht.
    Ich habe hier mal meinen Code reinkopoert und würde mich freuen, wenn jemand eine Lösung kennen würde.

    Beste Grüße
    El Julio

    HTML Code:

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <title> Menschen die nach oben starren</title>
    <link rel="stylesheet" href="onepage-scroll.css">
    <script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.scrollify.min.js"></script>
    <script>
    $(function() {
    $.scrollify({
    section : "section",
    });
    });
    </script>
    <title> Menschen die nach oben starren</title>
    </head>


    <body>

    <section>
    <div class="container">
    <video autoplay>
    <source src="video/Anfang.3gp" type="video/3gp">
    <source src="video/Ufo_3.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
    </div>
    </section>


    <section>
    <div class="zwei">
    <div class="container">
    <img src="image/ivan.jpg">

    </div>
    </div>
    </section>



    </body>
    </html>


    css-code



    body {
    background-color: #000000;
    width:100%;
    height:100%;
    overflow:scroll;
    margin-bottom: auto;
    }


    .container video{
    position:fixed;
    top: 50%;
    left: 50%;
    min-width: 75%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    margin: auto;
    }


    .zwei .container img {
    position:fixed;
    top: 50%;
    left: 50%;
    max-width: 120%;
    max-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    margin-top: 1000px;

    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: one pager lässt sich nicht scrollen

    Hallo,

    recht seltsames CSS und viel unnötiges HTML. Ich würde mal auf "position: fixed;" verzichten.

    Gruss

    MrMurphy
    Geändert von MrMurphy (05.09.2015 um 13:22 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.09.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: one pager lässt sich nicht scrollen

    perfekt ..danke schön.
    Ich hab auch das CSS nocheinmal umgeschrieben, es funktioniert jetzt

Ähnliche Themen

  1. Footernavigation lässt sich nicht zentrieren
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 20
    Letzter Beitrag: 30.05.2012, 17:01
  2. rar Datei lässt sich nicht öffnen
    Von Dr. Gore im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 16.11.2009, 20:47
  3. Lässt sich nicht speichern
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 19
    Letzter Beitrag: 13.06.2009, 19:58
  4. BAnner lässt sich nicht öffnen?
    Von thebosstomas im Forum Off Topic und Quasselbox
    Antworten: 0
    Letzter Beitrag: 18.05.2008, 20:46
  5. Quelltext lässt sich nicht anzeigen
    Von Jessy im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 16.07.2005, 19:49

Stichworte

Berechtigungen

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