2015-01-04 4 views
0

Это попытка разместить фиксированную навигационную панель в верхней части веб-страницы. В файле .html есть оператор {% if %}, который влияет на рендеринг .css.Теги шаблона Django, нарушающие вывод css

Это содержание .html:

<body> 
    <div class="navbar"> 
     <div class="nav-div" id="site-links"> 
      <ul> 
       <li><a href="{% url 'index' %}">Home</a></li> 
       <li><a href="/this_site/about/">About</a></li> 
      </ul> 
     </div> 
     <div class="nav-div" id="auth-links"> 
      {% if user.is_authenticated %} 
       <ul> 
        <li><a href="{% url 'auth_logout' %}?next=/this_site/">Logout</a></li> 
      {% else %} 
        <li><a href="{% url 'auth_login' %}">Login</a></li> 
        <li><a href="{% url 'registration_register' %}">Register</a></li> 
       </ul> 
      {% endif %} 
     </div> 
    </div> 
    <div> 
     {% block body_block %}{% endblock %} 
    </div> 
</body> 

В этом случае <div> элементы не не выровнены по горизонтали, когда страница отображается, потому что <ul> в class="nav-div" не обрабатывается CSS (без красного граница).

Это делает правильно, когда я удалить {% if %} тегов, как показано ниже:

<body> 
    <div class="navbar"> 
     <div class="nav-div" id="site-links"> 
      <ul> 
       <li><a href="{% url 'index' %}">Home</a></li> 
       <li><a href="/this_site/about/">About</a></li> 
      </ul> 
     </div> 
     <div class="nav-div" id="auth-links"> 
       <ul> 
        <li><a href="{% url 'auth_logout' %}?next=/this_site/">Logout</a></li> 
        <li><a href="{% url 'auth_login' %}">Login</a></li> 
        <li><a href="{% url 'registration_register' %}">Register</a></li> 
       </ul> 
     </div> 
    </div> 
    <div> 
     {% block body_block %}{% endblock %} 
    </div> 
</body> 

Чтобы проиллюстрировать это, я добавил границу к элементам списка в .css файла :

.navbar { 
    background-color: #191A14; 
    height: 10%; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    } 

.navbar a { 
    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 
    } 

.navbar ul { 
    list-style-type: none; 
    border: 1px solid red; 
    } 

.navbar li { 
    display:inline-block; 
    border: 2px solid yellow; 
    } 

.nav-div { 
    width: 45%; 
    border: 3px solid green; 
    } 

#site-links { 
    float: left; 
    } 

#auth-links { 
    text-align: right; 
    float: right; 
    } 

Где: это ошибка? (Для чего это стоит, я использую Django 1.7 с Python 3.4)

ответ

1

Поместите <ul> тег вне {% if %} тега:

<ul> 
    {% if user.is_authenticated %} 
     <li><a href="{% url 'auth_logout' %}?next=/this_site/">Logout</a></li> 
    {% else %} 
     <li><a href="{% url 'auth_login' %}">Login</a></li> 
     <li><a href="{% url 'registration_register' %}">Register</a></li> 
    {% endif %} 
</ul> 
Смежные вопросы