Home/ Questions/Q 6559811
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:22:42+00:00

I’m really new to HTML and CSS, so this is probably a really basic

  • 0

I’m really new to HTML and CSS, so this is probably a really basic question:

Let’s say I have a page where I’m displaying books (with all the information associated with a book- like an image, name, isbn). Sometimes I’ll have 1 book, other times I’ll have 3 or 6 and so forth.

I know how to display one book using CSS and HTML, but how do I display and position multiple books? I want the first book to appear at the top of the page and subsequent books to appear below it – how do I achieve this?

The information is coming from a database and is on the HTML page through a Django template – so I have template tags like {{ author|safe }} that holds each (in this case) author’s name.

This is the code that I have in the Django template:

<html>
<head>
<body>
<h1>Testing the class page backend</h1>

<ul>
{% for edition in editions %}
    <li>{{ edition|safe }}</li>
{% endfor %}
{% for image in images %}
    <li>{{ image|safe }}</li>
{% endfor %}
{% for author in authors %}
    <li>{{ author|safe }}</li>
{% endfor %}
{% for book_title in book_titles %}
    <li>{{ book_title|safe }}</li>
{% endfor %}
</ul>

</body> 

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m a bit confused by your Django template code. You say you can have any number of books displayed on the page. What context are you passing to your Django template?

    Judging from your template code, it seems like you’ve got separate lists for each property — one list for all the images of all the books, one list for all the authors, etc.

    I would have thought it would make more sense to have a list of book objects, where each book has its properties as, y’know, properties. E.g.

    <ul>{% for book in books %}
    <li>
        <h2>{{ book.title|safe }}</h2>

        <p>by {{ book.author|safe }}</p>

        <p>{{ book.image }}</p>


        <h3>Editions</h3>

        <ul>{% for edition in book.editions %}
            <li>{{ edition|safe }}</li>
        </ul>
    </li>{% endfor %}
</ul>

    Of course, that might not make sense for your back-end, but at the moment I can’t quite see what your problem actually is.

    Edit:

    I think I understand your context now. This really isn’t an HTML issue, it’s a Django template issue. Because you’ve got separate lists for each property of your books (instead of a list of book objects), you need to loop through those indexes. Because the Django template language doesn’t have a built-in equivalent of Python’s range function, you’d have to either use a custom template tag, or pop a list of the indexes into your context (e.g. context['indexes'] = len(context['editions'])).

    But I would have thought it’d be a bit more Django-y just to pass a list of book objects to your template, as I suggested above.

    • 0