<!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">
Related
Only body styling work in django, I use static files to get css. I tried even commenting out body part css, but it still works, I don't know how, I don't know why, please help! (I've used collectstatic, so it's not because of that). I've inserted static_root and url and other things in setting to, but it didn't help either.
body{
max-width: 1080px;
margin: auto;
background: #8D7D77;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* ----------------------------------------------NAV-BAR-UPPER------------------------------------------ */
.nav-bar{
display: flex;
flex-direction: row;
padding-top: 20px;
}
.nav-bar img{
max-width: 150px;
margin-left: 20px;
}
.nav-bar ul{
list-style: none;
display: flex;
flex-direction: row;
}
.nav-bar ul li{
margin-right: 15px;
}
.nav-bar ul a{
text-decoration: none;
color: white;
font-size: 20px;
margin-left: 80px;
padding: 10px 20px 10px 20px;
border: solid 1px;
border-radius: 10px;
}
.nav-bar ul a:hover{
text-decoration: none;
color: #8D7D77;
background-color: white;
}
.search-bar{
width: 600px;
height: 40px;
margin-top: 10px;
margin-left: 50px;
border-radius: 5px;
border-width: 1px;
border-color: #C2B280;
font-size: 110%;
}
.search-bar:focus{
border-style:none;
}
{% load static %}
<html lang="en">
<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" />
<link rel="stylesheet" href="{% static 'styles/main.css' %}" />
<link rel="icon" href="{% static 'images/logomogo.png' %}" />
<title>BookShelf</title>
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}
</body>
</html>
And here's navbar
{% load static%}
<header>
<div class="nav-bar">
<a href="">
<img src="{% static 'images/logo-white.png' %}" alt="BookShelf Logo" />
</a>
<input type="search" class="search-bar" placeholder="Search">
<nav>
<ul>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div class="lower-nav-bar">
<nav>
<ul>
<li>Books</li>
<li>Reviews</li>
<li>Users</li>
<li>About</li>
</ul>
</nav>
</div>
I have tried everything mentioned on the internet but yet bootstrap CDN overrides the custom CSS file.
The HTML file:
{%extends 'movies/base.html'%}
{%block content%}
{% load static %}
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="section">
<h1>Recommend Me:</h1>
<form action="recommendation" method="post">
{% csrf_token %}
<input type="text" name="emotion" />
<button type="submit" name="button">Find</button>
</form>
<div class="video-container">
<div class="color-overlay"></div>
<video autoplay loop muted >
<source src="{% static 'movies/intro.mp4' %}" type="video/mp4">
</video>
</div>
</div>
<div class="shows">
<h2 class="mt-5">Shows you might like:</h2>
<br>
<div class="row">
{%for tvshow in tvshows%}
<div class="col-lg-5 col-md-6">
<a href="{{ tvshow.url }}">
<img src="{{ tvshow.image.url }}" class="img-fluid mb-2">
</a>
<h3>{{ tvshow.title }}</h3>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
{%endblock%}
I tried adding the attribute !important in CSS but yet it didn't work.
CSS file:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins';
}
.video-container video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 570px;
object-fit: cover;
z-index: 1;
opacity: 0.8;
}
.section h1{
position: relative;
text-align: center;
font-size: 4rem;
padding: 20px;
margin: 15px;
top: 100px;
z-index: 2;
opacity: 0.6;
}
.section form{
position: relative;
text-align: center;
font-size: 4rem;
padding: 20px;
margin: 15px;
z-index: 2;
top: auto;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
background: #03a9f4;
width:100%;
height: 100%;
mix-blend-mode: overlay;
}
.shows{
position: relative;
height:400px;
top: 230px;
padding: 20px;
width:100%;
}
I also gave an ID to the body tag and then changed the CSS file, for example: #mypage .section but still it didn't work.
If I remove the bootstrap CDN link from the header file then the custom CSS file runs like a charm. I have no idea why bootstrap CDN is overriding the custom CSS file.
the HTML file extends base.html so I just wanted to say that base.html has no bootstrap stuff attached to it. It has no styling sheets.
Please help! Thank you.
So I am making a Flask web app and I have a nav bar. The background color of this navbar reaches to both horizontal ends of the page. How could I change this so that the background color is only behind the content? Any help would be much appreciated.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{url_for('static', filename = 'css/base.css')}}">
<link rel="shortcut icon" href="#" type="image/x-icon">
{% block head %}{% endblock %}
</head>
<body>
<div class="navBar">
<div id="flex-container">
<button class = "navButton" onclick = "window.location.href='main'">Main Page</button>
<button class = "navButton" onclick = "window.location.href='user'">User</button>
<button class = "logIO navButton" onclick = "window.location.href='login'"">Login</button>
<button class = "logIO navButton" onclick = "window.location.href='logout'">Logout</button>
</div>
</div>
{% block body %}{% endblock %}
</body>
CSS:
*{
margin:0;
padding:0;
}
html{
background-color: thistle;
}
.navBar{
background-color: darkslategrey;
}
#flex-container{
display:flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
flex-direction: row;
border-radius: 13px;
position:relative;
}
.navButton {
padding:10px 20px;
margin:8px;
font-family: Georgia, 'Times New Roman', Times, serif;
border: none;
box-shadow: rgb(133, 131, 131) 3px 3px;
}
.navButton:hover{
box-shadow: rgb(104, 101, 101) 5px 5px;
}
Is this what you are looking to do?
I simply added this code to your navbar:
display: block; <!--convert div to block element-->
max-width: 90%; <!--make div 90% width of container -->
margin: 0 auto; <!--center the div -->
*{
margin:0;
padding:0;
}
html{
background-color: thistle;
}
.navBar{
margin: 0 auto;
display: block;
max-width: 90%;
background-color: darkslategrey;
}
#flex-container{
display:flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
flex-direction: row;
border-radius: 13px;
position:relative;
}
.navButton {
padding:10px 20px;
margin:8px;
font-family: Georgia, 'Times New Roman', Times, serif;
border: none;
box-shadow: rgb(133, 131, 131) 3px 3px;
}
.navButton:hover{
box-shadow: rgb(104, 101, 101) 5px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{url_for('static', filename = 'css/base.css')}}">
<link rel="shortcut icon" href="#" type="image/x-icon">
{% block head %}{% endblock %}
</head>
<body>
<div class="navBar">
<div id="flex-container">
<button class = "navButton" onclick = "window.location.href='main'">Main Page</button>
<button class = "navButton" onclick = "window.location.href='user'">User</button>
<button class = "logIO navButton" onclick = "window.location.href='login'"">Login</button>
<button class = "logIO navButton" onclick = "window.location.href='logout'">Logout</button>
</div>
</div>
{% block body %}{% endblock %}
</body>
I have a mini project here. When I try to text-align: center; in body, the icons don't follow. If I remove the left: 0; in .content-label i in css, it stays on the right and I have no clue how to put it on the left side.
For more info, please check my code.
https://jsfiddle.net/Foxseiz/zse8tuL9/2/
There you go.
Try not to use position absolute as first priority as its the last option to style and element :)
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
}
.content-label {
position: relative;
}
.content-label i {
left: 0;
top: 8px;
padding: 9px 8px;
color: #aaa;
transition: 0.3s;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
.content-label {
position: relative;
display: flex;
flex-direction: row-reverse;
margin: 0 auto;
text-align: center;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
Use
.content-label.inputIconBg i {
margin-right: -42px;
}
to align icon inside input
You can use Flexbox.
You can set your content-label as flex element and center with justify-content property.
N.B. i used order property because you set the i tag after the input, so i change the order.
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
order:2;
}
.content-label {
position: relative;
display:flex; /* add this */
justify-content:center; /* add this */
}
.content-label i {
/*position: absolute;
left: 0;
top: 8px;*/ /* comment this */
margin: 9px 0 8px 8px;
color: #aaa;
transition: 0.3s;
order:1;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
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;
}