I'm currently facing an issue when attempting to align my footer in the center of my Django template. The specific class for the footer is Pagination.
Base 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;
}
pagination {
position: relative;
margin-top: -150px;
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 {
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid #000000;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
margin-left: auto;
margin-right: auto;
top: 0;
left: 10px;
}
</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 demonstrates how to authenticate against Twitter using their oAuth API.<br>Click below to begin authentication:</p>
<p><a class="auth" href="auth/">Authenticate »</a></p>
{% endblock %}
</div>
</div>
{% block footer %}
{% endblock %}
</body>
</html>
Actual Page 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 %}