Member Avatar for HtmlStart

Hi I am new to html design and learning... I am rendering some content from a django service onto a html template i am not able to set the page in such a way the if a condition is satisfied it goes the top of the html page and if the condition is not satisfied it goes to the bottom of the page like

{% for t in list %}
    {% if not t.appendix %}
         <div id="content">
                Content
          </div>
    {% else %}
         <div id="appendix">
                appendix
          </div>
    {% endif %} 
    {% endfor %}

And the HTML page should be like

Content 1
Content 2
Content 1
Content 2 

Appendix 1
Appendix 1
Appendix 1
Appendix 1

Now i get like

Appendix 1
Content 1
Appendix 2
Content 2
Edited by HtmlStart
  • 2 Contributors
  • 1 Reply
  • 237 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: the loop in the first post renders items in the order they appear in the source list, so appendix items will be interleaved if they appear that way. The simplest, most robust fixes are to group the data before rendering (preferred) or render in two passes in the template. This keeps DOM order correct for accessibility and SEO and avoids fragile CSS re-ordering.

As reported, a one-pass if/else inside the loop will not move appendix items to the bottom — it only decides what to output for each item. As noted, avoid repeating the same id on multiple elements; use classes for repeated items and a single container id for the whole appendix section.

Example approaches (server-side grouping — recommended):

# views.py (Django)
items = MyModel.objects.filter(...)      # a QuerySet or list
main_items = [i for i in items if not i.appendix]
appendix_items = [i for i in items if i.appendix]
return render(request, "template.html", {
    "main_items": main_items,
    "appendix_items": appendix_items,
})

Template: render main items first, then the appendix container with its items.

{% for item in main_items %}
  <article class="main-item">{{ item.title }}</article>
{% endfor %}

<div id="appendices">
{% for item in appendix_items %}
  <article class="appendix-item">{{ item.title }}</article>
{% endfor %}
</div>

If items come from a model with a BooleanField, ordering at the query level is also clean: use .order_by('appendix') (False before True) or two .filter() calls. Avoid using CSS positioning to change reading order; visual reordering with CSS order or absolute positioning can confuse assistive tech and search engines. If client-side grouping is needed, move elements in the DOM with JavaScript after render rather than relying on duplicated ids.

Styling tip (use classes, not duplicate ids):

.main-item { margin-bottom: 0.8em; }
#appendices { margin-top: 2em; border-top: 1px solid #ddd; padding-top: 1em; }
.appendix-item { color: #666; }

This preserves semantics, keeps markup predictable, and produces the desired "all content first, all appendices after" layout.

Member Avatar for almostbob

id is unique may only contain 1 item, duplicating id may cause problems in compliant browsers
class contains one or more items
positioning is done easiest by css styling the classes

<div id='singular'> this div has an id, the id can only be used by this div and no other</div>
<div class='appendix'> This div is one of many, that class is multiple </div>
<div class='appendix'> This div is one of many, that class is multiple </div>
<div class='appendix'> This div is one of many, that class is multiple </div>

in the head or external style sheet class appendix can be styled for position exactly how has drawn a blank, major messup apologies

just thoughts, try one of the online tutorial sites for better answer (sorry no link)

Dos Vdanye

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.