CODEWITHSUNDEEP
htmlcssdjango
AngryWeeb
AngryWeeb

Reputation: 85

Navbar inherited from base.html using Django templating doesn't render styles properly

I'm implementing a navbar and I wanted to use django templating for the DRY principle. The first picture is its appearance before templating, the second one is after templating. (https://i.sstatic.net/cs6Gy.jpg)

How do I get the css files to render properly in the inherited html file? I thought it was a case of me not calling the CSS files in base.html (like this one: another similar answer), but I checked the code for base.html and I've already called the Bootstrap CDN for the navbar styles on the header. What went wrong in my code?

This is the relevant code for the problem: base.html

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <title>{% block title %}Title{% endblock title %}</title>
    {% block head_favicon %}
        <link rel="icon" type="image/x-icon" href="/favicon.ico">
    {% endblock head_favicon %}

    {% block head_meta %}
        {% block head_meta_charset %}
            <meta charset="UTF-8">
        {% endblock head_meta_charset %}
        {% block head_meta_contentlanguage %}
            <meta http-equiv="X-UA-Compatible" content="ie=edge" value="en-US">
        {% endblock head_meta_contentlanguage %}
        {% block head_meta_viewport %}
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
        {% endblock head_meta_viewport %}
    {% endblock head_meta %}

    {% block head_css %}
        {% block head_css_site %}
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        {% endblock head_css_site %}
        {% block head_css_section %}{% endblock head_css_section %}
        {% block head_css_page %}{% endblock head_css_page %}
    {% endblock head_css %}

    {% block head_javascript %}
        {% block head_javascript_site %}
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" async></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" async></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" async></script>
        {% endblock head_javascript_site %}
        {% block head_javascript_section %}{% endblock head_javascript_section %}
        {% block head_javascript_page %}{% endblock head_javascript_page %}
    {% endblock head_javascript %}
</head>

<body>
{% block navbar %}
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">CCC</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/product">Products 1</a></li>
                <li><a href="/resultpage">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
    </nav>
{% endblock navbar %}

{% block content %}
    if you see this, something is wrong!
{% endblock content %}

</body>
</html>

CCC.html

{% extends 'CCC/base.html' %}

{% load static %}

{% block title %}Gift Countdown{% endblock title %}

{% block head_css_page %}
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'homepage/styles/cccStyle.css' %}">
{% endblock head_css_page %}

{% block head_javascript_page %}
    <script type='text/javascript' language='javascript' src="{% static 'homepage/scripts/homepage.js' %}" async></script>
{% endblock head_javascript_page %}

{% block content %}
  <div class='bg'></div>
  <div class="ctr">
    <p>It's</p>
      <div id="demo" onload="countdown();"></div>
    <p>Until Christmas!</p>
  </div>
  <form class = 'ctrform' action="{% url 'homepage' %}" method="POST">
    {%csrf_token%}
    {{Reminder}}
    <button type="submit">Submit</button>
  </form>
{% endblock content %}

Upvotes: 0

Views: 736

Answers (1)

Mark Bailey
Mark Bailey

Reputation: 1675

The 3 scripts you need for Bootstrap are in the footer_javascript_site block of your base.html which is outside the <body> tag. That is invalid HTML. You could simply move it inside the <body> or have a look at Where should I put <script> tags in HTML markup? for suggestions on how to put it all in the <head>.

Upvotes: 1

Related Questions