Here is the app that I have developed:
http://azeribocorp.pythonanywhere.com/index/
When I click on Search in the menu, the navbar shifts down, I cannot find where the problem is. I want the menu to be always fix on the top of the page. Any help is appreciated.
__base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
{% block stylesheets %} {% endblock %}
{% block javascript %} {% endblock javascript %}
{% block extra_head %} {% endblock %}
</head>
<body>
<header class="topnavbar">
{% include 'aztracker/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
</body>
</html>
_topnavbar.html
{% load static %}
{% load staticfiles %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>
<!--Top Navigation-->
<nav role="navigation" class="nav">
<ul class="nav-items">
<li class="nav-item">
<span>Home</span>
</li>
<li class="nav-item ">
<span>Track Container</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Product #1</li>
<li class="submenu-item">Product #2</li>
<li class="submenu-item">Product #3</li>
</ul>
</nav>
</li>
<li class="nav-item">
<span>Search</span>
</li>
<li class="nav-item">
<span>Report</span>
</li>
<li class="nav-item dropdown">
<span>More</span>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">About</li>
<li class="submenu-item">Contact</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Support</li>
<li class="submenu-item">FAQs</li>
</ul>
</nav>
</li>
</ul>
</nav>
search_form.html
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}
{% block content %}
{% block main_col %}
<body>
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">
<button id="search_btn">Search</button>
</form>
</section>
</body>
{% endblock main_col %}
{% endblock content %}
_topnavbar.css
* {border:1px black solid;}
.topnavbar {
background-color: rgba(0,100,150,0.6);/*rgba(0,255,150,0.6);/*#3EDC99*/
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #3498db;
}
.nav {
width: 550px;
margin: 0 auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Verdana, Georgia, Arial, sans-serif;
font-size: 14px;
}
.nav-items {
padding: 0;
list-style: none;
}
/* color of menu links
span {
color:yellow;
}
*/
.nav-item {
display: inline-block;
margin-right: 25px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
color:#fff;
}
.nav-link ,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position:absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff; /*small triangle showing drop down menu*/
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity:0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0,0,0,.1);
-webkit-filter:blur(1px);
filter:blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
.submenu-link{
color:red;
}
search_form.css
* {border:1px black solid;}
It seems you have a rouge Unicode character in you html.
Inspecting the page source after you click "search" reveals the Unicode character as . this character is 'ZERO WIDTH NO-BREAK SPACE'.
It will not be seen in you text editor since it parses the characters.
You can try to open your code in Notepad or some texteditor that does not understand Unicode and try to remove it from there.
It is also worth pointing out that your content is displayed in your tag
Foud out about the character from RHSeeger's answer here
Hope this helps!
You are breaking your HTML at some point, I can see some problems in the construction of your templates.
first:
you are including a head tag inside your body tag (_topnavbar.html)
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>
This should be inside the "extra_head" block, like this (_topnavbar.html):
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
{% endblock %}
Second:
you are adding an extra body tag inside your body tag (search_form.html):
{% block content %}
{% block main_col %}
<body>
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">
<button id="search_btn">Search</button>
</form>
</section>
</body>
{% endblock main_col %}
{% endblock content %}
You must delete that body tag.
third:
you are adding a script in a wrong way (_topnavbar.html):
<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
you can add it this way:
<script src="{% static 'css/_topnavbar.js' %}" charset="utf-8"></script>
maybe you have more errors, you should review your code line by line and find all the other problems.
I hope this answer works for you, have a good day.
On all children pages (including search), try adding this to your CSS:
body {
margin: auto;
}
Related
Currently working on my first webpage with HTML, CSS, Django and maybe Javascript soon :)
My issue is that I've added some images into my main content to test all(Wanted to add a sticky nav) but the main content is somehow overlapping my NAV and i'm not able to click the links of the Nav itself anymore.
Inspector where we can see clearly the overlap.
HTML:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static '/css/design.css' %}" />
</head>
<body>
<!--NAVBAR-->
<div class="navbar">
<div class="navbar-title">
site-name
</div>
<div class="navbar-links">
HOME
PICTURES
ALBUM
</div>
</div>
<div class="main-content">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
<img src="{% static '/img/1.jpg' %}">
</div>
{% block content %}{% endblock %}
</body>
</html>
CSS:
body {
background-color: #171717;
font-family: Helvetica;
}
/*------------------NAVBAR------------------*/
.navbar, a {
color: #FFF;
text-decoration: none;
font-size: large;
margin: 10px;
}
.navbar-title {
float: left;
text-align: center;
display: block;
position: relative;
padding-left: 50px;
padding-top: 25px;
font-style: italic;
}
.navbar-links {
float: right;
text-align: center;
display: block;
position: relative;
padding-right: 50px;
padding-top: 25px;
}
/*------------------MAIN-CONTENT----------------*/
.main-content {
padding-top: 100px;
position: relative;
}
in main-content style if you remove the position: relative;
your problem will be solved
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>
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
{% load static %}
<link rel="stylesheet" href="{% static 'input.css' %}">
<link rel="stylesheet" href="css/cool.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<title>HealthEz</title>
</head>
<body>
<h1 class="heading">Create your list</h1>
<div class="form">
<form action="/addItem/" method="POST">
{% csrf_token %} <br>
<input type="text" name="name" autocomplete="off" id="foodInput"required>
<br>
<input class="button" type="submit" id="add" value="Enter">
<label for="name" class="label-name" >
<span class="content-name">Input</span>
</label>
</form>
</div>
<ul id="Food List">
{% for list_item in all_items %}
<li>{{ list_item.content }}</li>
<form action="/deleteItem/{{list_item.id}}" style="display:inline;" method="POST">{% csrf_token %}
<input type="submit" value="X">
</form>
{% endfor %}
</ul>
</body>
</html>
-----
CSS
body {
height: 60vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
font-family: 'Poppins', sans-serif;
background: aqua;
}
.form{
width: 50%;
position: relative;
height: 50px;
}
.form input{
width: 100%;
height: 100%;
color: black;
padding-top: 20px;
border: none;
}
.form label{
position: absolute;
bottom: 0px;
left: 0%;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
}
.form label::after{
content:"";
position: absolute;
left: 0px;
bottom: -1px;
height: 100%;
width: 100%;
border-bottom: 3px solid aqua;
transition: all 0.3s ease;
}
.form{
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3s ease;
}
.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name{
transform: translateY(-150%);
font-size: 14px;
color: aqua;
}
.form input:focus + .label-name::after,
.form input:valid + .label-name::after {
transform:translateX(0%);
}
I am trying to create a form input similar to https://www.youtube.com/watch?v=IxRJ8vplzAo and I can not figure out why I can not do it. Im very new and was wondering if someone could help guide me, please? I have tried creating separate divs and etc but can not get it to work. Thank you for any help.
it should be <link rel="stylesheet" href="{% static 'css/cool.css'%}"> you forgot to add {% static ''%} there
{% load static %}
<link rel="stylesheet" href="{% static 'input.css' %}">
<link rel="stylesheet" href="{% static 'css/cool.css'%}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
My navbar had been working fine, until I tinkered with trying to change my navbar to fixed and now it's not working. Not sure what I did wrong, but none of my links are showing up at all. I removed the code I had originally put so it should be working now but it's not. I also tried doing the special reload, forgot what it's called, to get rid of an old cached file, but still not working. Only thing that shows up is my logo on my nav bar, that's it.
base.html/navbar
{% load bootstrap4 %}
{% load static %}
{% load unread_messages_counter %}
<!-- Navbar is located in this file -->
<!doctype html>
<html lang="en">
<head>
{% block head %}
<title>Base</title>
{% endblock %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
<!-- Add this tag -->
{% block styles %}
{% endblock %}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" >
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item" >
<a class= "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" >
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
style.css
.navbar-nav li{
padding-left:35px;
padding-right:10px;
margin-top: -20px;
margin-bottom: -20px;
color:yellow;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron{
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding:50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a{
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook{
color: #3b5998;
}
.fa-twitter{
color:#00aced;
}
.fa-goggle-plus-g{
color:#dd4b39;
}
.fa-instagram{
color:#517fa4;
}
.fa-youtube{
color:#bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover{
color: #d5d5d5;
}
footer {
padding-top:3.5rem;
color:blue;
background-color: #ffffff
}
hr.light{
border-top:1px solid red;
width:75%;
margin-top: .8rem;
margin-bottom:1rem;
}
hr.light-100{
border-top:1px solid #;
width:100%;
margin-top: .8rem;
margin-bottom:1rem;
}
body{
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container{
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container{
height: 150px;
background: #7F00FF;
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container{
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3, h4{
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4{
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p{
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn{
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover{
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
Maybe instead of .navbar-nav li, try .navbar-nav li a in your css
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