Question

我在尝试将我的页脚放在我的Django模板中时遇到了问题。页脚div类是Pagination。

基础HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Flickr Photobrowser</title>
        <style>
        html, body {
            height: 100%;
        }
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            min-height:100%;
        }
        #header {
            background: #111;
            color: white;
        }
        #header, #content {
            padding: 10px 150px 10px 150px;
        } 
        #content {
            overflow:auto;
            padding-bottom: 150px;  /* must be same height as the footer */
        }
        pagination {
            position: relative;
            margin-top: -150px; /* negative value of footer height */
            height: 150px;
            text-align: center;
        } 
        h1 {
            font-family: Georgia;
            font-weight: 100;
            font-style: italic;
            font-size: 30px;
            padding-top: 50px;
        }
        h2 {
            font-size:20px;
            margin-top: 5px;
            color: #ff0080;
            margin-bottom: 5px;
        }
        #image {
            float:left;
            padding: 2px;
        }
        .thumbnail {
            position: relative;
            z-index: 0;
        }
        .thumbnail:hover {
            background-color: transparent;
            z-index: 50;
        }
        .thumbnail span { /*CSS for enlarged image*/
            position: absolute;
            background-color: lightyellow;
            padding: 5px;
            left: -1000px;
            border: 1px solid #000000;
            visibility: hidden;
            color: black;
            text-decoration: none;
        }
        .thumbnail span img { /*CSS for enlarged image*/
            border-width: 0;
            padding: 2px;
        }
        .thumbnail:hover span { /*CSS for enlarged image on hover*/
            visibility: visible;
            margin-left: auto;
            margin-right: auto;
            top: 0;
            left: 10px; /*position where enlarged image should offset horizontally */
        }

        </style>
    </head>

    <body>
        <div id="wrap">
            <div id="header"><h1>Flickr Photobrowser</h1></div>
            <div id="content">
            {% block content %}
                <h2>Welcome!</h2>
                <p>This sample application is here to show you how you can authenticate against Twitter using their 
                    new oAuth API.<br>Press the big button below to authenticate.</p>
                <p><a class="auth" href="auth/">Authenticate »</a></p>
            {% endblock %}
            </div>

        </div>
        {% block footer %}
        {% endblock %}
    </body>

</html>

实际页面HTML：

{% extends "base.html" %}

{% block content %}
<form method="get" action="../photouser/">
Flickr username: <input type="text" name="username"> 
<input type="submit" value="submit">
</form>
<p>Search by <a href="../phototags/">tags</a>?</p>
<p><h2>Displaying photos for {{ username }}</h2></p>
<ul>
{% for photosmall, photobig, actualimage in photopages.object_list %}
<div id="image"><a class="thumbnail" href="{{ actualimage }}">
<img src="{{ photosmall }}"/><span><img src="{{ photobig }}"/></span>
</a></div>
{% endfor %}
</ul>

{% endblock %}

{% block footer %}
<div class="pagination">
    <span class="step-links">
        {% if photopages.has_previous %}
            <a href="?username={{ username }}&page={{ photopages.previous_page_number }}">Previous</a>
        {% endif %}

        <span class="current">
            Page {{ photopages.number }} of {{ photopages.paginator.num_pages }}
        </span>

        {% if photopages.has_next %}
            <a href="?username={{ username }}&page={{ photopages.next_page_number }}">Next</a>
        {% endif %}
    </span>
</div>
{% endblock %}

Answer 1

看起来简单的拼写错误是你唯一的问题。

你有这个CSS：

pagination {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    text-align: center;
}

那里正在寻找像<pagination>这样的元素，你没有（或想要）。

相反，您的元素是：

<div class="pagination">

因此，将CSS选择器更改为：

.pagination

我的Django模板中存在页脚问题

1 个答案: