0

私は materialize.min.css と materialize.min.js を使用していますが、他のスタイルシートは使用していません。

簡単なホームページを作りました。コード：

{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/javascript" href="{% static 'js/jquery-1.11.3.min.js' %}">
<title>
TITLE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body data-marker-image="{% static 'img/truck3.png' %}">

<div>
    <nav class="light-green lighten-3">
        <div class="nav-wrapper">
            <a class="brand-logo center" href="SITE" target="_blank">
                LOGO<!-- <img src="{% static 'img/LOGO1.png' %}" style="height: 100%; width: 35%;"/> -->
            </a>            
        </div>
    </nav>
    <div class="side-menu-bar">
        <ul id="slide-out" class="side-nav full">
            <li><a href="#!">About Us</a></li>
            <li><a href="#!">Support</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse">
            <i class="large mdi-navigation-menu white"></i>
        </a>
    </div>
</div>

<main>
    <div id="map-canvas" style="width: 100%; height: 100%;">
        <div id="onmap-div">
            <div id="onmap-price"></div>
        </div>
    </div>
</main>

<footer>
    <div class="page-footer light-green lighten-3">
        <div class="container">             
            Footer Note             
        </div>
    </div>
    <div class="footer-copyright light-green lighten-2">
        <div class="container">
            Copyright
        </div>          
    </div>
</footer>



<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
<script>$(".button-collapse").sideNav();</script>
<script type="text/javascript">var shipment_id = {{shipment_id}};</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="{% static 'js/socket.io.js' %}"></script>
<script type="text/javascript" src="{% static 'js/map.js' %}"></script>
<script>google.maps.event.addDomListener(window, 'load', initialize());</script>
</body>
</html>

作成された Web ページは次のようなものでした: http://pasteboard.co/1hz4vuHF.png

画像からわかるように、青いボタンが NavBar の上に来ていません。

修正方法は？

PS - また、その色を変更する方法は?

4

1 に答える 1