Наследование шаблонов Django нарушает макет сайта - PullRequest
Новая
       8

Наследование шаблонов Django нарушает макет сайта

0 голосов
/ 02 февраля 2012

В настоящее время я использую django 1.3.1, пытаясь реализовать наследование шаблонов, чтобы минимизировать количество дублирующегося кода.Я также использую twitter-bootstrap v2.0.

У меня есть базовый html-файл, содержащий панель навигации.Он содержит один {% block%}, который находится ниже панели навигации внутри тега div, например: 

<div class="container">
    {% block content %} {% endblock %}
<footer>
    <p>Designad och skapad av Johan Rende, jrende@kth.se, 2012</p>
</footer>
</div>

Так выглядит сайт без наследования, только с одним html-файлом.:

хороший макет

А вот как это выглядит с наследованием.Обратите внимание на пространство над панелью навигации и сжатое поле поиска:

неверный макет

Когда я использовал только базовый CSS, он выглядел хорошо, но даже когда я использовалпустой шаблон для наследования: 

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

Пробел все еще был.

Что-то не так с HTML, или это ошибка в Django?Как я могу это исправить / обойти?

edit: Вот весь базовый html-файл: 

<!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, jrende@kth.se, 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>

Ответы [ 2 ]

2 голосов
/ 03 февраля 2012

Я решил это.

Проблема была в заголовке utf-8, "метке порядка байтов". Джанго жаловался, когда файл был закодирован в ANSI, поэтому я сохранил файл в кодировке utf-8 с помощью блокнота. Это, видимо, добавил заголовок. Я исправил это, загрузив notepad ++ и изменив кодировку на UTF-8 без спецификации.

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

1 голос
/ 02 февраля 2012

Django распознает пространство между {% block content%} и {% endblock%} и записывает его в html.Я должен был бы увидеть ваш CSS, чтобы убедиться, но, вероятно, пространство между этими тегами отображается вверху.

...