Django template tags disrupting css output
Question
This is an attempt at placing a fixed navigation bar at the top of the web page. There is an {% if %} statement in the the .html that effects the .css rendering.
This is the .html content:
<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>
In this case, the <div> elements are not aligned horizontally when the page is rendered because the <ul> in class="nav-div" is not processed by the css (no red border).
It renders properly when I remove the {% if %} tags as shown below:
<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>
To illustrate, I've added borders to the list elements in the .css file :
.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;
}
Where is the error? (For what it's worth, I'm using Django 1.7 with Python 3.4)
1 answers
solution1
1 ACCPTED 2015-01-04 04:56:38
Put <ul> tag outside of the {% if %} tag:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.