2017-09-20 15 views
0

フルスクリーンjsに問題があります。Fullpage.jsが画面上部に表示されない

問題は、フルページは、画面の一番上にはないということです。

enter image description here

これは(ジャンゴを使用してイム)私のHTMLです:

{% extends 'layout/app.html' %} 


    <body> 
     {% block content %} 
     <div id="fullpage"> 
       <div class="section" id="section1">Some section</div> 
       <div class="section">Some section</div> 
       <div class="section">Some section</div> 
       <div class="section">Some section</div> 
      </div> 

     {% endblock %} 
    </body> 

index.htmlが延びbase.html from:

{% load static %} 
<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/normalize/normalize.css' %}" /> 

    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/fullpage/jquery.fullPage.css' %}" /> 
    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/bootstrap/bootstrap.css' %}" /> 
    <link rel="stylesheet" type="text/css" href="{% static 'Portfolio/css/style.css' %}" /> 
    <title></title> 

</head> 
<body> 
    {% block navbar %} 
    {% endblock %} 
    {% block content %} 
    {% endblock %} 
    <script src="{% static 'Portfolio/js/bootstrap/bootstrap.min.js' %}"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
    <script src="{% static 'Portfolio/js/fullpage/jquery.fullPage.min.js' %}"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#fullpage').fullpage({ 
       //sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], 
       anchors: ['Welcome', 'Portfolio', 'Skills', 'About', 'Contact'], 


    menu: '#menu', 
      scrollingSpeed: 1000 
     }); 

    }); 
</script> 
</body> 
</html> 

そして、これはCSSです:

#section1 { 
    background-image: url(../images/bg.png); 
    background-size: cover; 
} 

私は私がまたnormalize.cssリンクされているmargin : 0を設定しようとしています。

したがって、全ページと本文に余白や詰め物が適用されていません。この問題の原因は何ですか?

EDIT:

ナビゲーションバーが空であると私はapp.htmlそれを削除しようとした、それは仕事をdidntの。

EDIT:1つのHTMLファイル内のすべてのものを置く

は、問題を修正します。この手段はおそらく、djangoのテンプレートエンジンと関係があります。しかし、それは何ができますか?

+0

あなたはナビバーです、それは空ですか? – M0ns1f

+2

私がお勧めしたいのは、(1)chrome devツールを 'f12'キーで開き、マウスを使ってレンダリングされたページの要素を選択することです。 (2) 'Ctrl + Shift + C 'を同時に押して要素選択ツールを選択します。 (3)上の空白の上にカーソルを置き、をクリックします。 (4)あなたの質問にそれのスクリーンショットを追加してください。それは大きな助けになるでしょう。 – JaeGeeTee

+0

@ M0ns1fはいそれは –

答えて

1

問題が見つかりました。 エンコーディングをANSIIに変更して、ボディに追加されたブレイクスペースがありませんでした( )。

関連する問題