1
good morning!! I’m working with Django Templates. It turns out that I created a base.html template that will fit all the other html forms.I have an index.html that extends this beauty tamplate, but I already have another formLogin.html that also extends the base.html, but this one (formLogin.html) is not coming right, type footer does not appear and is not formatted. What may be happening, since index.html works perfectly well?:
html base.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/static/img/icone.ico"> <!--Icone da página-->
<script src="/static/js/angular.min.js"></script> <!--usando o angular!-->
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet"> <!--usando o bootstrap!-->
<!-- My styles para esse template -->
<link href="static/css/site.css" rel="stylesheet"> <!--usando o Style CSS!-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="cabeca">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="{% url 'web.views.login'%}">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
</head>
<body>
{% block content %}
{% endblock content %}
<div id="rodape">
</div>
{% block extra_javascript %}{% endblock extra_javascript %}
</body>
</html>
index.html
{% extends "base.html" %}
{% load i18n %}
{% block content %}
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
{% endblock content %}
{% block extra_javascript %}
{% endblock extra_javascript %}
formLogin.html (the one with the problem- doesn’t inherit everything in the base.html)
{% extends "base.html" %}
{% load i18n %}
{% block content %}
<div class="container">
<h1>TESTE</h1>
</div><!-- /.container -->
{% endblock content %}
{% block extra_javascript %}
{% endblock extra_javascript %}
Try to see the source code of the HTML page when rendering in your browser, check if the part of the code you want appeared, see if the CSS is being applied, in Chrome, Firefox and Safari you can do this. You say the footer does not appear, but the element
<div id="rodape"></div>is empty.– Paulo
What the
starter-templatedo Bootstrap makes? As pointed out by @Orion, your element#rodapeis empty, unless you have some CSS doing something on it (like a:beforeor:after) then it should be equally empty in both cases. Most likely it is Bootstrap that is adding a another footer on his own. I suggest the same thing as Orion, but besides looking at the source (which may not reveal anything unusual) use the option "inspect element" to see the DOM "live" (i.e. after Bootstrap has already done his "magic" ).– mgibsonbr
P.S. I noticed you have a
divin thehead. I’m assuming it was a mistake, right?– mgibsonbr
That div is in the header. Then there are the comments.. avoid the <!-- html --> comment and use {%comment %} {% endcomment %}
– brunofitas