CODEWITHSUNDEEP
htmlcssdjango
codingcoding
codingcoding

Reputation: 751

Django template tags disrupting css output

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)

Upvotes: 0

Views: 84

Answers (1)

catavaran
catavaran

Reputation: 45585

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>

Upvotes: 1

Related Questions