The footer from my homepage is behaving like a div - just after the content and not at the bottom of the page - only in my home page, i.e., at the store.html file. In all the other pages it behaves as expected. I've lost more time trying to solve this than I'd like to say... What am I missing?
footer.html
<footer>
<div class="container">Helga's</div>
</footer>
main.html
<head>
...
</head>
<body>
{% include 'store/navbar.html' %}
<div class="container">
<br>
{% block content %}
{% endblock content %}
</div>
{% include 'store/footer.html' %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</body>
store.html
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row h-50">
{% for product in products %}
<div class="col-lg-3">
<a href="#">
<img class="thumbnail" src="{{product.image_url}}">
</a>
<div class="box-element product">
<h6 style="text-align: center;"><strong>{{product.name}}</strong></h6>
<hr>
<button data-product={{product.id}} data-action="add"
class="btn btn-outline-secondary add-btn btn-sm update-cart">Buy</button>
<h4 style="float: right; font-size: 22;">R${{product.price|floatformat:2}}</h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Basically, the footer element is not different from div in terms of visual presentation. The footer does not come fixed to the bottom of a page or section by default - you need to configure it this way with CSS.
Maybe the element is positioned at the bottom of your other pages just because they have more content above, which naturally moves the footer down.
Because you have not provided any snippets about the styling of your page, I can only suggest you take a look at the several approaches to make the footer stick to the bottom of the page.
Related
I have copied the bootstrap card code from the offical site and tried many changes to my code but the output always comes in a vertical line.
How to make these product cards appear as table with 3 columns?
{% extends 'base.html' %}
{% block content %}
<h1>Products</h1>
<div class="row">
{% for product in products %}
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<img src="{{ product.image_url }}" class="card-img-top" alt="..." width="300" height="300">
<div class="card-body">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">${{ product.price }}</p>
Add to Cart
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
This is the output I am getting
If you missed adding the CSS and JS files of bootstrap 4 in your base.html, add the below file to your code.
<!-- bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<!-- jquery and bootstrap.bundle.min.js -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>
my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?
signin html:
{% extends "accounts/_base.html" %}
{% block title %}
Sign In
{% endblock %}
{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading">Sign In</h2>
<div class="form-group">
<div class="fieldWrapper">
{{ form.username.errors }}
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password.label_tag }}
{{ form.password }}
</div>
</div>
<label for="signIn" class="sr-only">Click</label>
<button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>
</form>
<form class="form-signin" action="{% url 'signup' %}">
<button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}
base html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<body>
<!-- head -->
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
<!-- body -->
<div class="container" id="elem_cont">
{% if message is not none %}
<div class="alert alert-{{ message.0 }} alert-dismissable">{{ message.1 }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% block control %}
{% endblock %}
</div>
<div class="container" id="elem_disp">
{% block disp %}
{% endblock %}
</div>
<div class="container" id="elem_misc">
{% block misc %}
{% endblock %}
</div>
<!-- footer -->
<nav class="navbar navbar-fixed-bottom" id="nav_footer" role="navigation">
<div class="container" id="elem_foot">
<footer class="navbar" id="footer">
<hr>
{% block botm_cont %}
{% endblock %}
<p>© 2019 madlogos</p>
</footer>
</div>
</nav>
</body>
</html>
This is a styling issue for css.
You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:
form.form-signin {
max-width: 64ch;
margin: auto;
}
64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.
margin: auto will automatically handle the distances between the form and its containing div.
Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.
shop.html
{% extends 'base.html' %}
{% block content %}
<div class="container">
<!-- Product List -->
<br>
<h2 align="center">List of Products</h2>
<br>
<div class="row">
{% for product in products %}
<div class="col-3 col-md-3 col-sm-3">
<div class="card">
<form method="POST" action="{% url 'add_to_cart' product.id %}">
{% csrf_token %}
<img src="{{ product.image.url }}" class="card-img-top" alt="...">
<div class="card-body">
<h5 name="item" class="card-title">{{product.name}}</h5>
<div class="card-text">
<p>Category: {{ product.category }}</p>
<p>Price:</p>
<p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
<p style="color:blue;">{{ product.discount_price }}</p>
</div>
<hr>
<input name="quantity" type="number" value="1">
<input type="submit" class="btn btn-primary" value="Add to Cart">
</form>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Shopping System</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
<!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- -->
</body>
</html>
For this code I have used the class col-3 and the second product still being put under the first product. Instead I would like to put the second product card next to the first one. I grabbed the code from Bootstrap Card Grid System but it still does not work even though I have put the required bootstrap css and javascript links into the base.html. May I ask what I need to change in order to have the cards 3 in a row?
Ideally, you'd have a container div, then a a row, inside the row you declare your columns(in this case we are using size 3 for colum). Let me know if it's helpful.
<div class="container">
<!-- Product List -->
<div class="row justify-content-center">
{% for product in products %}
<div class="col-3 col-md-3 col-sm-3">
<div class="card">
<form method="POST" action="{% url 'add_to_cart' product.id %}">
{% csrf_token %}
<img src="{{ product.image.url }}">
<div class="card-body">
<h5 name="item" class="card-title">{{product.name}}</h5>
<div class="card-text">
<p>Category: {{ product.category }}</p>
<p>Price:</p>
<p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
<p style="color:blue;">{{ product.discount_price }}</p>
</div>
<hr>
<input name="quantity" type="number" value="1">
<input type="submit" class="btn btn-primary" value="Add to Cart">
</form>
</div>
</div>
{% endfor %}
</div>
</div>
I have two pages that use base.html as a base template: index.html and login.html. login.html has a fully functional nav bar (links and :hover working) where index.html shows the nav bar but won't recognise the links.
Bear with me as this is my first post, so I have no idea what I need to provide etc...
base.html:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Graduate Proofreading | Professional Essay
Proofreading{% endblock title %}</title>
{% block head_meta %}
{% block head_meta_charset %}
<meta charset="UTF-8">
{% endblock head_meta_charset %}
{% block head_meta_contentlanguage %}
<meta http-equiv="Content-Language" value="en-UK" />
{% endblock head_meta_contentlanguage %}
{% block head_meta_viewport %}
<meta name="viewport" content="width=device-width, initial-
scale=1">
{% endblock head_meta_viewport %}
{% endblock head_meta %}
{% block head_css %}
{% block head_css_site %}
<!--=================================CSS LINKS==========================================-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-cyan.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Custom fonts for this template-->
<!-- Custom styles for this template-->
{% endblock head_css_site %}
{% block head_css_section %}
<style type="text/css">
</style>
{% endblock head_css_section %}
{% block head_css_page %}
{% endblock head_css_page %}
{% endblock head_css %}
</head>
<body>
<!-- Hidden Side Navigation -->
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
center " style="display:none" id="mySidebar">
<h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>
Link 1
Link 2
Link 3
Link 4
<button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
<!-- ====================================================
| MAIN NAV BAR |
========================================================
-->
<div class="w3-bar w3-left w3-dark-gray" style="width:100%;overflow:hidden;height:44px">
<button class="w3-bar-item w3-button w3-left" onclick="w3_open()" title="Sidebar"><i class="fas fa-bars fa-2x"></i></button>
<span id="nav-right-btn-margin" class="w3-bar-item w3-right" style="margin-right: 30px"> </span>
<a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'signup' %}" title="Sign Up" style="padding-top: 14px">SIGN UP</a>
<a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'login' %}" title="Login" style="padding-top: 14px">LOGIN</a>
<a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
<a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
</div>
{% block header %}
{% endblock header %}
{% block content %}
{% endblock content %}
{% block footer %}
<!-- Footer -->
<footer class="w3-container w3-dark-gray w3-padding-16">
<h3>Graduate Proofreading</h3>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Go To Top</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up" style="color: #00aac1"></i></span></a>
</div>
<br>
<br>
<p>Website design and development by Luke Pilkington. For Full Stack Web Development, Visit www.lukepilkington.com</p>
</footer>
<script>
// Script for Sidebar etc
// Side navigation
function w3_open() {
var x = document.getElementById("mySidebar");
x.style.width = "100%";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block"
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
{% endblock footer%}
</body>
</html>
index.html:
{% extends "base.html" %}
<title>{% block title %}Professional Essay Proofreading{% endblock title %}</title>
{% block head_css_section %}
<style type="text/css">
</style>
{% endblock head_css_section %}
{% block header %}
<header class="w3-display-container" id="myHeader">
<img src="/static/pics/office.jpeg" style="width:100%; padding: 0px; opacity: 0.5;">
<div class="w3-display-middle w3-container" style="text-align: center">
<h4>GRADUTEPROOFREADING.CO.UK</h4>
<h1 class="w3-xxxlarge w3-animate-bottom">QUALITY ESSAY PROOFREADING</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-hover-light-grey" style="background-color: #00aac1" onclick="#" style=";"><span style="color: black; font-weight:900">TRY FOR FREE TODAY</span></button>
</div>
</div>
</header>
{% endblock header %}
{% block content %}
<body>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Quality Proofreaders</h3><br>
<i class="fab fa-jenkins fa-7x" style="color: #00aac1"></i>
<!--<i class="w3-xxxlarge material-icons">person</i>-->
<p>Native English Proofreaders Only</p>
<p>University Graduates, Always</p>
<p>Impeccable Attention To Detail</p>
<p>Fast Turnaround</p>
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Unbeatable Price</h3><br>
<i class="far fa-money-bill-alt fa-7x" style="color: #00aac1"></i>
<p>Simple and Affordable</p>
<p>Just 1.4p Per Word</p>
<p>Proofread Any Essay</p>
<p></p>
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Try Our Dissertation Service</h3><br>
<i class="fas fa-graduation-cap fa-7x" style="color: #00aac1"></i>
<p></p>
<p>English Lit./Lang. Graduates Only</p>
<p>Essay Writing Style Improvements</p>
<p>Formatting Correction</p>
<p>Just 1.6 Pence Per Word!</p>
</div>
</div>
</div>
<div></div>
</body>
{% endblock content %}
</html>
finally, login.html:
{% extends "base.html" %}
<title>{% block title %}Login | Graduate Proofreading{% endblock title %}</title>
{% block head_css_section %}
<style type="text/css">
#media (max-width: 600px) {
input[type=text], input[type=password] {
width: 90%;
margin-top: 0;
}
#logincontainer {
}
</style>
{% endblock head_css_section %}
{% block header %}
<header class="w3-padding">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-button w3-theme"></i>
<div class="w3-center" style="padding-top: 50px">
<h4></h4>
<h1 class="w3-xxxlarge w3-animate-bottom"></h1>
<div class="w3-padding-32">
<!-- <button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="#" style="font-weight:900;">TRY FOR FREE TODAY</button>
-->
</div>
</div>
</header>
{% endblock header %}
{% block content %}
<body class="w3-theme">
<div class="w3-card w3-display-middle w3-round" style="width: 60%; max-width:600px" id="logincontainer">
<div class="w3-container w3-dark-gray">
<form class="form-signin" action="#">
<h2 class="form-signin-heading">Login</h2>
</div>
<div class="w3-container w3-light-gray w3-padding-32" style="width:100%";>
<div>Username</div>
<input type="text" class="form-control" name="username" placeholder="Username/Email Address" required="" autofocus="" />
<div></div>
<div style="padding-right:6px">Password</div>
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<label class="checkbox">
<div></div>
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember Me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
<div class="w3-container w3-dark-gray" style="height:3em"></div>
</div>
</body>
{% endblock content %}
{% block footer %}
{% endblock footer %}
Please let me know if you need any other info. Thanks!
Make a new file for navbar and just
{%include 'navbar.html'%}
It should solve the problem and it should be easier
Try doing the following
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
center navbar-collapse collapse" style="display:none" id="mySidebar">
<h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>
Link 1
Link 2
Link 3
Link 4
<button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
Ok, I finally worked it out, it's not a Django issue at all, it's just that the w3.CSS class ".w3-display-container" invisibly covers up the nav bar above it for some reason.
index.html:
...
{% block header %}
<header class="w3-display-container" id="myHeader">
...
Padding the actual element ( in this example) didn't work. The only solution I could come up with was a rather inelegant one. I added a div above the element and padded it equal to the height of the nav bar.
<div style="padding-bottom: 44px";>
</div>
<div class="w3-display-container" id="myHeader">
https://www.w3schools.com/w3css/w3css_display.asp
Didn't tell me anything useful, but there's the link in case anyone wanted to do some digging.
I have an <audio> element that's seems to work fine. However, whenever I try to use the seeker, it just takes the audio back to the beginning. This is the HTML:
<audio id="audio-player" src="/music/You-Too-Much.mp3" type="audio/mp3" controls="controls"></audio>
I've searched online, but I can't seem to find a cause or solution for this. I need this fixed. Thanks.
Full HTML code:
{% extends 'base.html.twig' %}
{% block title %}
Welcome
{% endblock %}
{% block nav_head %} Havilah Radio {% endblock %}
{% block content %}
<div class="music-player">
<div class="row">
<div class="col-md-3">
<img class="cover" src="/img/album-art/HANILAH.jpg" alt="">
<div class="footer-song-info">
<h4>
You Too Much
</h4>
<h6>Unknown Artist</h6>
</div>
</div>
<div class="col-md-6">
<audio id="audio-player" src="/music/untitled05.mp3" type="audio/mp3" controls="controls"></audio>
</div>
</div>
</div>
{% endblock %}
The main code extends this base.html.twig:
<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="theme-color" content="#9e1935">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %} | Havilah Radio</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans' />
<!-- Bootstrap CSS -->
<link href="{{ asset('lib/bootstrap/css/bootstrap.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Font Icons -->
<link href="{{ asset('lib/iconsmind/iconsmind.css') }}" rel="stylesheet" type="text/css" media="all"/>
<!-- Extra CSS -->
{% block css %}{% endblock %}
<!-- Custom CSS -->
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all"/>
</head>
<body style="background: {% block body_background %}#fff {% endblock %}">
<div class="body">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-nav">
<i class="icon-Align-Right icon"></i>
</button>
<a class="navbar-brand" href="/"><img src={{ asset('img/havilahradio-logo.png') }} />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-nav">
</div>
</div>
</nav>
{% block content %}{% endblock %}
</div>
</body>
<!-- JQuery -->
<script src="{{ asset('lib/jquery/jquery-3.1.0.min.js') }}"></script>
<script src="{{ asset('lib/jquery/jquery.easing.1.3.js') }}"></script>
<!-- Bootstrap JS -->
<script src="{{ asset('lib/bootstrap/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('lib/bootstrap/js/bootstrap_select.min.js') }}" ></script>
<!-- Extra JS -->
{% block js %}{% endblock %}
<!-- Custom JS -->
<script src="{{ asset('js/app.js') }}"></script>
</html>