Ergebnis 1 bis 2 von 2

Thema: one-pager, scroll, image nicht sichtbar

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

    Standard one-pager, scroll, image nicht sichtbar

    Hallo liebe Community,

    ich habe folgendes Problem und würde mich sehr freuen, wenn jemand von euch eine Lösung dafür kennen würde.
    ich habe ein one-pager mit einem j-query slide system. Dies funktoniert auch wunderbar. Als Startseite habe ich ein video eingebettet und
    wenn man runterscrollt soll ein image kommen. Dies hab ich natürlich auch in meiner html eingebettet, aber wird auf der seite nicht sichtbar.
    Ich finde das Bild bzw die Bilder einfach nicht auf meiner Seite. Könnten diese unter irgendeiner layer liegen?

    Ich würde mich freuen, wenn mir jemand helfen könnte.
    Beste Grüße
    El Julio


    mein html code:


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Menschen die nach oben starren</title>
    <link rel="image_src" href="/images/notify_better_image.png" />


    <link rel="shortcut icon" id="favicon" href="favicon.png">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.onepage-scroll.js"></script>
    <link href='onepage-scroll.css' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style>

    </style>
    <script>
    $(document).ready(function(){
    $(".main").onepage_scroll({
    sectionContainer: "section",
    responsiveFallback: 600,
    loop: true
    });
    });
    </script>
    </head>

    <body>
    <div class="wrapper">
    <div class="main">

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

    </section>

    <section class="page2">
    <div class="page_container">
    <img src="image/books.jpg">

    </div>
    </section>

    <section class="page3">
    <div class="page_container">
    <img src="image/books.jpg">

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

    </body>
    </html>




    css code



    body, html {
    margin: 0;
    overflow: hidden;
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    transition: opacity 400ms;
    }

    body, .onepage-wrapper, html {
    display: block;
    position: static;
    padding: 0;
    width: 100%;
    height: 100%;
    }

    .onepage-wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    padding: 0;
    -webkit-transform-style: preserve-3d;
    }

    .onepage-wrapper .section {
    width: 100%;
    height: 100%;
    }

    .onepage-pagination {
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 5;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .onepage-pagination li {
    padding: 0;
    text-align: center;
    }
    .onepage-pagination li a{
    padding: 10px;
    width: 4px;
    height: 4px;
    display: block;

    }
    .onepage-pagination li a:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0,0,0,0.85);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }

    .onepage-pagination li a.active:before{
    width: 10px;
    height: 10px;
    background: none;
    border: 1px solid black;
    margin-top: -4px;
    left: 8px;
    }

    .disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
    overflow: auto;
    }

    .disabled-onepage-scroll .onepage-wrapper .section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    }
    .disabled-onepage-scroll .onepage-wrapper {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;
    -ms-transform: none !important;
    min-height: 100%;
    }


    .disabled-onepage-scroll .onepage-pagination {
    display: none;
    }

    body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
    position: inherit;
    }


    html {
    height: 100%;
    }
    body {
    background: #E2E4E7;
    padding: 0;
    text-align: center;
    font-family: 'open sans';
    position: relative;
    margin: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    }

    .wrapper {
    height: 100% !important;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    }


    .pointer {
    color: #9b59b6;
    font-family: 'Pacifico', cursive;
    font-size: 30px;
    margin-top: 15px;
    }
    code {
    margin: 20px 1%;
    float: left;
    width: 48%;
    height: 105px;
    background: rgba(0,0,0,0.1);
    border: rgba(0,0,0,0.05) 5px solid;
    border-radius: 5px;
    padding:5px;
    color: white;
    text-align: center;
    font-size: 15px;
    margin-top: 25px;
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
    code.html {
    color: #7EC9E6;
    }
    code.js {
    color: #FFAD00;
    }

    .main {
    float: left;
    width: 100%;
    margin: 0 auto;
    }

    .main h1 {
    padding:150px 50px;
    float: left;
    width: 100%;
    font-size: 45px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-weight: 100;
    color: white;
    margin: 0;
    }



    .reload.bell {
    font-size: 12px;
    padding: 20px;
    width: 45px;
    text-align: center;
    height: 47px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    }

    .reload.bell #notification {
    font-size: 25px;
    line-height: 140%;
    }


    .main section .page_container {
    position: relative;

    margin: 0 auto 0;
    max-width: 100%;
    z-index: 3;
    }
    .main section {
    overflow: hidden;
    }

    .main section > img {
    position: absolute;
    max-width: 100%;
    z-index: 1;
    }



    .main section.page1 {
    background:rgb(230, 217, 200);
    }


    .main section .page_container video {
    width: 100%;
    height: 100%;
    }

    .main section.page2 {
    background: #000000;
    }
    .main section.page2 > img {
    position: absolute;

    }
    .main section.page2 .page_container {
    margin-top: 100%;
    overflow: hidden;
    }

    .main section.page2 .page_container img {
    width: 100%;
    height: 100%
    }

    .viewing-page-2 .back{
    background: rgba(0, 0, 0, 0.25);
    color: #FFF;
    }
    .main section.page3 {

    }
    .main section.page3 .page_container {
    overflow: hidden;
    width: 100%;

    }


    body.disabled-onepage-scroll .onepage-wrapper section {
    min-height: 100%;
    height: auto;
    }

    body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container {
    padding: 20px;
    margin-top: 150px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    body.disabled-onepage-scroll section .page_container h1{
    text-align: center;
    font-size: 50px;
    }
    body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
    text-align: center;
    width: 100%;
    }

    body.disabled-onepage-scroll .main section.page1 > img {
    position: absolute;
    width: 80%;
    left: 10%;
    }

    body.disabled-onepage-scroll .main section > img {
    position: relative;
    max-width: 80%;
    bottom: 0;
    }
    body.disabled-onepage-scroll code {
    width: 95%;
    margin: 0 auto 25px;
    float: none;
    overflow: hidden;
    }

    body.disabled-onepage-scroll .main section.page3 .page_container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    }
    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
    HTML Newbie
    Themenstarter

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

    Standard AW: one-pager, scroll, image nicht sichtbar

    Hat sich erledigt ... ich weiß woran es lag ...
    hatte den main div falsch gelegt.

Ähnliche Themen

  1. one pager lässt sich nicht scrollen
    Von el-julio im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.09.2015, 21:18
  2. image-map area sichtbar machen
    Von synaptic im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 03.11.2010, 00:34
  3. Erklärung: Background Image nicht sichtbar, clear hilft ?
    Von Kiiwii im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 20.07.2008, 20:46
  4. URL nicht sichtbar
    Von Bk-Studios im Forum Computer - Internet Forum
    Antworten: 5
    Letzter Beitrag: 05.05.2007, 12:07
  5. Scroll-Leiste wird nicht sofort angezeigt
    Von Me, the G im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 14.03.2007, 00:02

Stichworte

Berechtigungen

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