2012-02-02 3 views
0

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

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

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

Это то, что сайт выглядит без наследования, только один HTML-файл:

good layout

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

bad layout

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

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

Белое пространство все еще было.

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

редактирование: Здесь вся база 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, [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>  
+0

Является '{% конечный блок%}' опечатка? Блоки содержимого должны быть закрыты с помощью '{% endblock%}' (всего одного слова). –

+0

Я думаю, что хотел бы увидеть разметку django HTML –

+0

end block был опечаткой, исправленной сейчас. –

ответ

2

Я решил.

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

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

1

Джанго распознает пространство между {% содержанием блок%} и {% ENDBLOCK%} и записать его в HTML. Я должен увидеть ваш css, чтобы убедиться, но, скорее всего, пространство между этими тегами появляется вверху.

+0

Вы уверены? Я думал, что есть пробелы или разрывы строк для отображения, мы должны явно поставить   или
Sid

Смежные вопросы