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.
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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
}
/*---------------------Dashboard-----------------------*/
.dashboard{
position: relative;
width: 100%;
min-height: 100vh;
}
/*--------------------Dashboard Sidebar Begin-----------------------*/
.dashboard-sidebar{
position: fixed;
width: 50px;
min-height: 100vh;
background-color: #2E86C1;
color: white;
padding: 15px 6px;
}
.dashboard-sidebar .dashboard-sidebar-top{
position: relative;
width: 100%;
min-height: 100vh;
justify-content: center;
display: flex;
}
.dashboard-sidebar-top i{
font-size: 17px;
}
/*-----------------------Dashboard Sidebar End--------------------*/
/*--------------------Dashboard Main Content Start----------------------*/
.dashboard-main-content{
position: absolute;
width: calc(100% - 50px);
height: 100vh;
left: 50px;
padding: 10px 15px;
}
.dashboard-main-content .dashboard-app{
position: relative;
background-color: white;
width: 70px;
height: 70px;
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dashboard-main-content .dashboard-app:hover{
background-color: #EBEDEF;
}
.dashboard-main-content .dashboard-app i{
font-size: 30px;
color: #2874A6
}
.app-name{
font-size: 12px;
font-family: tahoma, sans-serif;
color: #2874A6
}
/*--------------------Dashboard Main Content End----------------------*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="dashboard.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="dashboard"><!--Dashboard begin-->
<div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
<div class="dashboard-sidebar-top">
<i class="bx bxs-dashboard"></i>
</div>
</div><!--Dashboard sidebar end-->
<div class="dashboard-main-content"><!--Dashboard contents begin-->
<div class="dashboard-app"><!--App begin-->
<i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div>
</div><!--App end-->
</div> <!--Dashboard contents end-->
</div><!--Dashboard end-->
<script src="script.js"></script>
</body>
</html>
I have the following dashboard layout. The dashboard has the Begin Design dashboard app which will have many sub components of its own and will have a separate html file called begin-design.html. When the use clicks on it, it will take the user to the design app components. My question is, how can I go about bringing thebegin-design.html app into the dashboard.html file rather than writing the entire begin-design.htmlcomponents in the dashboard.html file? I would like to keep all the components in seperate html files and connect eachother together.
****HTML****
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="dashboard.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="dashboard"><!--Dashboard begin-->
<div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
<div class="dashboard-sidebar-top">
<i class="bx bxs-dashboard"></i>
</div>
</div><!--Dashboard sidebar end-->
<div class="dashboard-main-content"><!--Dashboard contents begin-->
<div class="dashboard-app"><!--App begin-->
<i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div>
</div><!--App end-->
</div> <!--Dashboard contents end-->
</div><!--Dashboard end-->
<script src="script.js"></script>
</body>
</html>
<a href="begin-design.htmk"><i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div></a>
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
<!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">
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}