CODEWITHSUNDEEP
djangodjango-templatestwitter-bootstrap
Johan Rende
Johan Rende

Reputation: 54

Django template inheritance breaks site layout

I'm currently using django 1.3.1, trying to implement template inheritance, to minimize the amount of duplicated code. I'm also using twitter-bootstrap v2.0.

I have a base html-file, containing the navbar. It contains a single {% block %} which is below the navbar, inside a div-tag, like this:

<div class="container">
    {% block content %} {% endblock %}
<footer>
    <p>Designad och skapad av Johan Rende, [email protected], 2012</p>
</footer>
</div>

This is what the site looks like without inheritance, with only a single html-file:

good layout

And here's how it looks with inheritance. Notice the space above the navbar, and the squashed search field:

bad layout

When i used only the base css, it looked fine, but even when i used an empty template to inherit:

{% extends "base.html" %}
{% block content %}
{% endblock %}

The white space was still there.

Is there something wrong with the HTML, or is it a bug in Django? How can i fix/circumvent it?

edit: Here is the entire base html-file:

<!DOCTYPE html>    
<html lang="en">    
  <head>    
    <meta charset="utf-8">    
    <title>Biblio</title>    
    <meta name="description" content="">    
    <meta name="author" content="">    
    <!--[if lt IE 9]>    
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    
    <![endif]-->    
    <link href="/static/css/bootstrap.css" rel="stylesheet">    
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">    
  </head>    

  <body>    
    <div class="navbar">    
        <div class="navbar-inner">    
            <div class="container">    
                <ul class="nav pull-left">    
                    <a class="brand" href="#">Test-test</a>    
                </ul>    
                <ul class="nav">    
                    <li class="active"><a href="#">Home</a></li>    
                    <li><a href="/about/">Din profil</a></li>    
                    <li><a href="/contact/">Dina böcker</a></li>    
                    <li><a href="/contact/">Lägg till bok</a></li>    
                    <li class="divider-vertical align-left"></li>    
                    <li>    
                        <form class="navbar-search" name="input" action="." method="get">    
                            <input type="text" class="search-query" name="search" placeholder="Sök böcker/användare" >    
                        </form>    
                    </li>    
                </ul>    
                <ul class="nav pull-right">    
                    <li class="divider-vertical align-left"></li>    
                    <li class="dropdown">    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">    
                            Logga in    
                            <b class="caret"></b>    
                        </a>    
                        <ul class="dropdown-menu">    
                            <form name="input" action="/login/" method="post">    
                                <p><label for="id_username">Username:</label> <input id="id_username" class="input" type="text" name="username" maxlength="30" /></p>    
                                <p><label for="id_password">Password:</label> <input type="password" name="password" id="id_password" /></p>    
                                <input type="submit" value="Logga in" />    
                            </form>    
                        </ul>    
                    </li>    
                </ul>    
            </div>    
        </div>    
    </div>    

        <div class="span5">    
            {% if uname %}    
                Välkommen, {{ uname }}    
            {% else %}    
                Logga in!    
            {% endif %}    
        </div>    

    <div class="container">    
    {% block content %} {% endblock %}    
    <footer>    
        <p>Designad och skapad av Johan Rende, [email protected], 2012</p>    
    </footer>    
    </div> <!-- /container -->    

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script src="../static/js/bootstrap-dropdown.js"></script>    
  </body>    
</html>

Upvotes: 0

Views: 1398

Answers (2)

Johan Rende
Johan Rende

Reputation: 54

I solved it.

The problem was a utf-8 header, the "byte-order mark". Django complained when the file was encoded with ANSI, so i saved the file with utf-8 encoding using notepad. That apparently added the header. I fixed it by downloading notepad++ and changing the encode to UTF-8 without BOM.

http://www.w3.org/International/questions/qa-utf8-bom

Upvotes: 2

jdickson
jdickson

Reputation: 724

Django will recognize the space between {% block content %} and {% endblock %} and write it into the html. I'd have to see your css to make sure, but it's likely that the space between those tags is showing up at the top.

Upvotes: 1

Related Questions