0
フルスクリーンjsに問題があります。Fullpage.jsが画面上部に表示されない
問題は、フルページは、画面の一番上にはないということです。
これは(ジャンゴを使用してイム)私の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のテンプレートエンジンと関係があります。しかし、それは何ができますか?
あなたはナビバーです、それは空ですか? – M0ns1f
私がお勧めしたいのは、(1)chrome devツールを 'f12'キーで開き、マウスを使ってレンダリングされたページの要素を選択することです。 (2) 'Ctrl + Shift + C 'を同時に押して要素選択ツールを選択します。 (3)上の空白の上にカーソルを置き、をクリックします。 (4)あなたの質問にそれのスクリーンショットを追加してください。それは大きな助けになるでしょう。 – JaeGeeTee
@ M0ns1fはいそれは –