The top part of my website (with the logo and navbar) is slightly wider than the body (which is made up of 2 css columns).
How do I make the top and body both the same size?
Also, I recently had the opposite problem, with the body being wider, but by making the body regular, it left the top too wide.
My base html:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175481126-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175481126-1');
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
color: white;
text-decoration:none;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
.register {
float: right;
}
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
/* title */
.title {
color: black;
padding: 10px;
text-align: center;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
Color: black;
text-decoration: none;
}
/* descriptions */
.description {
color: black;
padding: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
font-size: 13px;
}
/* embedd url */
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
margin-left: auto; /* Automatic margin from left */
margin-right: auto; /* Automatic margin from right */
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/* make columns */
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 100%;
max-width: 100%;
/* you can just remove these margins all together. Just wanted to emphasize that there should be no margin left or right, to avoid overflow */
margin-left: 0px;
margin-right: 0px;
}
.videos, .ads {
flex-grow: 0; flex-shrink: 0;
}
.ads {
display: block;
float: right;
background-color: #c1c4c9;
width: 25%;
}
.videos {
display: block;
float: left;
width: 75%;
padding-right: 10%;
padding-left: 10%;
}
.image {
padding-right: 5%;
padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
}
.logo {
flex-direction:; row;
flex:; 0 0 100%;
max-width 100%;
justify-content:; center;
}
.banner {
/* float: left;*/
width: 100%;
height: 5%;
background-color: red;
color: white;
text-align: center;
}
img {
max-width: 100%;
max-height: 100%;
}
/* header */
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
font-family: Tahoma, Geneva, sans-serif;
}
</style>
<html>
{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
<div class="logo">
<div class="header">
<a href="/">
<img src="https://i.ibb.co/5Rqps7F/logo-black.png" alt="Computer Man">
</a>
</div>
<ul>
<li class="all">All videos</li>
<li class="stam">Stam videos</li>
<li class="music">Music videos</li>
<li class="news">News videos</li>
<li class="contact">Contact</li>
<li class="register">Login/Register</li>
</ul>
<div class="banner">
<text align="center">We are still developing our site, so we may not be able to update videos as often as we want</text>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
The page html:
{% include 'base.html' %}
<style>
.{{ category }} {
background-color: grey;
}
</style>
<div class="row">
<div class="videos">
{% autoescape off %}
<h1 class="title"> {{ video_.title }} </h1>
{% ifnotequal video_.tag 'none' %}
<small align = left> {{ video_.tag }} </small>
{% endifnotequal %}
<div class="iframe-container"><p align="center"> {{ video_.url }}</p></div>
<div class="description"> {{ video_.description }} </div>
<hr/>
{% endautoescape %}
</div>
<div class="ads">
{% for ad in ad_item %}
{% ifequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifequal %}
{% ifnotequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifnotequal %}
{% endfor %}
</div>
</div>
Try adding margin: 0px. Since you are using Bootstrap you can just add class m-0 where you need it.
<div class="row m-0">
<div class="videos m-0">
{% autoescape off %}
<h1 class="title"> {{ video_.title }} </h1>
{% ifnotequal video_.tag 'none' %}
<small align = left> {{ video_.tag }} </small>
{% endifnotequal %}
<div class="iframe-container"><p align="center"> {{ video_.url }}</p></div>
<div class="description"> {{ video_.description }} </div>
<hr/>
{% endautoescape %}
</div>
<div class="ads m-0">
{% for ad in ad_item %}
{% ifequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifequal %}
{% ifnotequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifnotequal %}
{% endfor %}
</div>
</div>
Related
I tried to make an accordion using jquery inside my code but there is a problem when I try to open a section.
This first one is working but not the second one.
The code is inside a django for loop.
**HTML : **
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function() {
$('#accordeon').on('click', function(){
$(this).next().slideToggle(300);
$('.accordeon-content').not($(this).next()).slideUp(300);
$(this).toggleClass('active');
$('#accordeon*').not($(this)).removeClass('active');
});
});
</script>
<div class="consultations">
<div class="section nosProduits">
<div class="two-blocks">
<div class="content">
<h2>Qu’est-ce que la consultation patrimoniale ?</h2>
<p>Vous pensez l’expertise sur mesure d’un CGP expert inaccessible ? Pour feter nos 20 ans, nous avons innové pour vous
permettre de bénéficier de l’accompagnement d’une équipe de spécialistes du patrimoine sous la forme d’une consultation
de 30 minutes à 120 € TTC.
</p>
</div>
<div class="video">
{% embed 'https://www.youtube.com/watch?v=LqiaOqiLcU4' %}
</div>
</div>
{% for subcategory, products2 in products.items %}
<div class="head" id="accordeon">
<h2>{{subcategory}}</h2>
</div>
<div class="accordeon-content line" style="display: none;">
{% for product in products2 %}
<div class="block-consultation">
<div class="titre">
<h3>{{ product.name }}</h3>
{% if product.images %}
<img src="{{ product.images|first }}" class="categoryImg" alt="Image of {{ product.name }}.">
{% endif %}
</div>
<div class="content">
<div class="description">
<p>{{ product.description }}</p>
</div>
<div class="options">
<div class="product">
<div>
Souscrire
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
CSS
background-color: $backgroundcolor;
background-repeat: no-repeat;
background-size: cover;
.two-blocks {
display: flex;
padding-bottom: 100px;
height: 500px;
.content {
flex: 1;
h2 {
color: #1f3750;
font-size: 1.5rem;
text-align: left !important;
padding-bottom: 10px;
padding-top: 50px;
}
p {
color: black;
}
}
.video {
flex: 1;
padding-left: 100px;
margin-top: 50px;
iframe {
width: 100%;
height: 100%;
}
}
}
.head {
padding: 5px 10px;
cursor: pointer;
background: $logincolorbg;
border-radius: 5px;
margin-bottom: 20px;
;
h2 {
font-size: 1.5rem;
margin-bottom: 0;
}
}
.line {
padding-top: 40px;
padding-bottom: 40px;
gap: 50px;
display: flex;
.block-consultation {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
max-width: 500px;
.titre {
text-align: center;
h3 {
margin-top: 20px;
font-size: 1.3em;
padding-bottom: 10px;
}
.categoryImg {
min-width: 300px;
max-width: 300px;
margin-bottom: 10px;
}
}
.content {
padding-top: 40px;
.description {
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;
p {
margin-bottom: 20px;
text-align: justify;
font-size: 1rem;
}
}
}
.options {
display: flex;
justify-content: center;
min-width: 200px;
.product {
display: flex;
flex-direction: row;
margin-bottom: 30px;
div {
display: flex;
a {
align-self: flex-start;
min-width: 180px;
text-align: center;
margin: 5px;
}
}
}
}
}
}
}
I tried to put accordeon{{subcategory}} inside my ID and my script butwhen I do this, none of the section opens.
It also work when I put :
$(function() {
$('#accordeon{{subcategory}}').on('click', function() {
$(this).next().slideToggle(300);
$('.accordeon-content').not($(this).next()).slideUp(300);
$(this).toggleClass('active');
$('#accordeon{{subcategory}}').not($(this)).removeClass('active');
});
});
And
<div class="head" id="accordeon">
<h2>{{subcategory}}</h2>
</div>
But the same problems occurs ...
When the user enter a not valid credentials it print this notificaitons message:
Sorry, your password was incorrect.<br/> Please double-check your password
But this doesn't look good when it is printed:
I want it to be printed between the Login button and the Forgot password.
Like that:
So theoretically the white box should expend to the bootom to leave so place for the notifications message
html file
<div class="testlol2" >
<div class="login-box" align="center">
<img class="logo" src="{% static 'images/testlogo.png' %}" alt="">
<div class="testlol" align="center">
<form action="" method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="my-button">
<input class="login-button" type="submit" value="Log in">
</div>
</form>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<p{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</p>
{% endfor %}
</ul>
{% endif %}
<a class="forgot" href="">Forgot password?</a>
</div>
</div>
</div>
css file
body{
background-color: #fafafa !important;
}
.messages {
position: relative;
top: 10px;
right: 8px;
color: red;
}
.logo {
position: relative;
top: 28px;
left: 134px;
width: 200px;
}
.testlol {
position: relative;
top: 115px;
right: 90px;
}
.testlol2 {
display:flex;
justify-content: center;
}
.login-box {
display:flex;
justify-content: center;
align-items: start;
align-self: center;
position: relative;
top: 100px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
margin:0 0 10px;
padding: 10px 0;
height: 280px;
width: 325px;
}
.forgot {
position: absolute;
top: 128px;
right: 95px;
font-size: 12px;
margin-top: 12px;
text-align: center;
color: #000000;
line-height: 14px!important;
text-decoration: none;
}
Your code (css) is quite a mess. I tried making some minimal changes to it would partly look ok. Main fix was to make the .messages have margin of 115px from top rather than be positioned 115px from top, so that login-box would expand in height.
body {
background-color: #fafafa !important;
}
.messages {
position: relative;
top: 10px;
right: 8px;
color: red;
}
.logo {
position: relative;
top: 28px;
left: 134px;
width: 200px;
}
.testlol {
position:relative;
right: 90px;
margin-top: 115px;
}
.testlol2 {
display: flex;
justify-content: center;
}
.login-box {
display: flex;
justify-content: center;
align-items: start;
align-self: center;
position: relative;
top: 100px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 1px;
margin: 0 0 10px;
padding: 10px 0;
/* height: 280px; */
width: 325px;
}
.forgot {
/* position: absolute; */
top: 128px;
right: 95px;
font-size: 12px;
margin-top: 12px;
text-align: center;
color: #000000;
line-height: 14px!important;
text-decoration: none;
}
<div class="testlol2">
<div class="login-box" align="center">
<img class="logo" src="{% static 'images/testlogo.png' %}" alt="">
<div class="testlol" align="center">
<form action="" method="post">
{% csrf_token %} {{ form|crispy }}
<div class="my-button">
<input class="login-button" type="submit" value="Log in">
</div>
</form>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<p{% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</p>
{% endfor %}
</ul>
{% endif %}
<a class="forgot" href="">Forgot password?</a>
</div>
</div>
</div>
I'm trying to put a <hr> below each three <div>s (one <hr> per three <div>s), however I'm getting unexpected results. I came to the conclusion that I have to put a <hr> below each third <div>, but when I do that, it is not positioned correctly (see the demo).
I am using this Django template:
{% extends 'pages/base.html' %}
{% load static %}
{% block cssfiles %}
<link rel="stylesheet" href="{% static 'products/css/list.css' %}" />
{% endblock %}
{% block jsfiles %}
<script type="text/javascript" src="{% static 'products/js/ellipsis.js' %}" defer></script>
{% endblock %}
{% block content %}
{% for product in products %}
<div class='product'>
<div class='product-title'>{{ product.title }} ({{ product.year }})</div>
<hr class='product-separator'>
{% if product.image %}
<div class='product-image'>
<img src='{{ product.image.url }}' width='100' height='100'>
</div>
{% endif %}
<p class='product-price'>${{ product.price }}</p>
</div>
{% if forloop.counter|add:1|divisibleby:3 %}
<hr>
{% endif %}
{% endfor %}
{% endblock %}
Here is the jsfiddle link.
Consider using CSS Grid and Flexbox for finer grained control. See the four CSS rules I added at the top of your code:
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid > hr{
grid-column: 1/4;
width: 100%;
}
.product {
display: flex;
flex-flow: column;
}
.product > .product-price{
margin-top: auto;
padding-top: 15px;
}
ul#menu {
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding :0;
}
li {
display: inline-block;
margin-right: 1px;
}
li a {
display:block;
min-width:103px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: "Share Tech Mono";
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*.product {
float: left;
width: 215px;
max-width: 215px;
height: 215px;
max-height: 215px;
}*/
.product-title {
color: #62646a;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
font-weight: bold;
font-size: 13px;
line-height: 13px;
/*height: 26px;
overflow: hidden;*/
}
.product-description {
margin-left: 10px;
margin-right: 10px;
font-size: 12px;
text-align: justify;
text-justify: inter-word;
}
.product-separator {
height: 1px;
border-top: 1px;
border-left: 1px;
border-right: 1px;
margin-left: 10px;
margin-right: 10px;
color: #d9d7d7;
}
.product-image img {
display: block;
margin: auto;
margin-top: 20px;
}
.product-price {
color: #62646a;
margin-top: 15px;
margin-left: 10px;
font-size: 18px;
}
.product:hover {
background: #f5f3f2;
}
body {
margin: auto;
max-width: 800px;
}
<nav>
<ul id='menu'>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<div class="grid">
<div class='product'>
<div class='product-title'>Franz Joseph (1917)</div>
<hr class='product-separator'>
<p class='product-price'>$100.00</p>
</div>
<div class='product'>
<div class='product-title'>Krugerrand South Africa (1917)</div>
<hr class='product-separator'>
<p class='product-price'>$200.00</p>
</div>
<div class='product'>
<div class='product-title'>Morgan Silver Dollar (1965)</div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$50.00</p>
</div>
<hr>
<div class='product'>
<div class='product-title'>Peace Silver Dollar (1934)</div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$75.00</p>
</div>
<div class='product'>
<div class='product-title'>Kralj Petar Drugi (1978)</div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$1.00</p>
</div>
<div class='product'>
<div class='product-title'>Kralj Stefan Prvi Prvovencani Kotromanic (1389)</div>
<hr class='product-separator'>
<p class='product-price'>$1000.00</p>
</div>
</div>
it's the float that's breaking everything since you're telling the browser to display the products next to eachother.
try this:
</div>
{% if forloop.counter|add:1|divisibleby:3 %}
<hr style="clear:both;">
I've got 2 buttons that I am trying to position next to each other, centered on the page. The easiest way to do this is put them in a div, but when I do this the buttons become unresponsive. They loose their hover and clicking functionality. I have tried changing the z-index of my background div, wrapper div and buttons but that didn't do anything. Here is my code:
<!DOCTYPE html>
<html>
{% load staticfiles %}
{% load rest_framework %}
<head>
<link type="text/css" rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="{% static 'app/index.css' %}">
<title>Home</title>
</head>
<body>
{% if messages %}
{% for message in messages %}
{{ message }}
{%endfor%}
{%endif%}
{% verbatim %}
<div id="background"></div>
<div id="wrapper">
Sign Up Now!
Learn More
</div>
<div id="topwrapper">
<a href="/login">
<div id="login">Log in</div>
</a>
<a href="/signup">
<div id="signup">Sign Up</div>
</a>
</div>
<h1>Catchy Interesting Hook.</h1>
<p>Lorem ipsum stuff blah blah blah</p>
<h2>What is this website?</h2>
{% endverbatim %}
</body>
</html>
The links inside the topwrapper div work, but they are not bootstrap buttons. NOTE: The funny code inside the {% %} is Django stuff, I have installed various django-bootstrap plugins so maybe that is what is messing with my buttons? But I am new to django so I don't really know how to go about investigating that. And then my CSS is:
#background {
background-color: #5f6273;
height: 500px;
position: absolute;
padding: 0px 0px 0px 0px;
border-width: 0px;
margin: 0px 0px 0px 0px;
top: 0px;
left: 0px;
right: 0px;
z-index: -30;
}
#wrapper {
text-align: center;
margin: 0 auto;
margin-top: 300px;
background: none;
width: 320px;
display: inline;
z-index: -1;
}
#topwrapper {
width: 300px;
display: inline;
background-color: none;
margin: auto;
height: 100px;
margin-right: 0;
z-index: 0;
padding: 20px;
}
#login {
border-radius: 2px;
border-color: #ffffff;
height: 30px;
width: 140px;
left: 30%;
margin: auto;
padding-top: 10px;
text-align: center;
font-family: sans-serif;
color: #ffffff;
z-index: 30;
}
#signup {
left: -50%;
font-family: sans-serif;
color: #ffffff;
height: 30px;
width: 70px;
z-index: 30;
margin: auto;
}
.btn-primary {
float: left;
margin-left: auto;
z-index: 31;
}
.btn-info {
float: right;
margin-right: auto;
z-index: 31;
}
h1 {
font-family: sans-serif;
text-align: center;
color: #ffffff;
padding-top: 160px;
}
h2 {
font-family: sans-serif;
text-align: center;
color: #000000;
padding-top: 275px;
z-index: 30;
}
p {
font-family: serif;
text-align: center;
color: #ffffff;
padding-top: 0px;
}
I kept all of your css the same, but changed just a little in the html while removing the django stuff...and the links are working. Try adding your django code to this:
<body>
<div id="background"></div>
<div id="wrapper">
<button class="btn btn-primary">Sign Up Now!</button>
<button class="btn btn-primary">Learn More</button>
</div>
<div id="topwrapper">
<a href="/login">
<div id="login">Log in</div>
</a>
<a href="/signup">
<div id="signup">Sign Up</div>
</a>
</div>
<h1>Catchy Interesting Hook.</h1>
<p>Lorem ipsum stuff blah blah blah</p>
<h2>What is this website?</h2>
</body>
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I'm having problems trying to center my footer in my Django template. The footer div class 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; /* 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>
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 tags?</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 %}
Previous
{% endif %}
<span class="current">
Page {{ photopages.number }} of {{ photopages.paginator.num_pages }}
</span>
{% if photopages.has_next %}
Next
{% endif %}
</span>
</div>
{% endblock %}
It looks like a simple typo is your only problem.
You have this CSS:
pagination {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
text-align: center;
}
That's looking for an element like <pagination>, which you don't have (or want).
Instead, your element is:
<div class="pagination">
So, change your CSS selector to:
.pagination