I've been using django for a while but I'm just a beginner in css, I don't know much. I put style on my style.css file which is in the static folder and I placed the link in my template base.html but when I launch the server, the css style does not apply. what to do?
mon templates base.html
{% load static %}
<html>
<head>
<title>Lax blog</title>
<link rel="stylesheet" href="{% static 'style.css' %}" />
</head>
<body>
<div class="sidebar">
<h1>Lax Blog</h1>
{% if user.is_authenticated %} {% if user.profile_photo %}
<img class="avatar" src="{{ user.profile_photo.url }}" />
{% else %}
<img class="avatar" src="{% static 'images/default_profile.png'%}" />
{% endif %}
<p>Accueil</p>
<p>
Vous etes connecté entant que {{request.user }}
Se déconnecter
</p>
{% endif %}
</div>
<div class="main">{% block content %}{% endblock content %}</div>
</body>
</html>
mon fichier style.css
body {
background-color: white;
color: blue;
}
html {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.sidebar {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 220px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #1d3030;
color: #ffffe6;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
/* le lien de navigation */
.sidebar a {
text-decoration: none;
color:yellow;
display: block;
}
.main {
margin-left: 240px; /* Same as the width of the sidebar */
padding: 20px;
}
.avatar {
width: 80%;
border-radius: 10%;
display: block;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
I thought the problem was on the browser, but I tried with firefox, edge and chrome but nothing worked. I delete the caches, always the same thing
Related
So I am using django to create a website but there must be a problem in my CSS and or HTML code, when I run the server the text on the pages is being covered by the sidenav bar I have. I previously had a width set for the sidenav but removed it but that didn't work either, here is the code:
<html>
<head>
<style type="text/css">
.sidenav {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover{
color: #f1f1f1;
}
.main{
margin-left: 160px;
padding: 0px 10px;
}
</style>
<title>{% block title %} My Website {% endblock %}</title>
</head>
<body>
<div class="sidenav">
Home
Create
View
</div>
<div id="content", name="content"></div>
{% block content %}
{% endblock %}
</body>
</html>
You are not using the main class you defined. Also your { block content } doesn't have a <div> around it. You could try creating a <div> for the sidebar and a <div> for the { block content }
I have 2 css columns on my page: the left one is 75%, and the right is 25%. However, for some reason the right column is sticking out slightly, making it wider than the page (pictured on bottom). How I make both columns together the same width as the logo on top?
This is 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 */
.ads {
float: right;
background-color: #c1c4c9;
width: 25%;
}
.videos {
float: left;
width: 75%;
padding-right: 10%;
padding-left: 10%;
}
.image {
/* padding-right: 3%;*/
/* padding-left: 3%;*/
padding-top: 3%;
padding-bottom: 3%;
}
.row {
display: flex;
}
.banner {
float: left;
width: 100%;
height: 5%;
background-color: red;
color: white;
text-align: center;
}
/* 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="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>
<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>
This is 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>
You can also see on my site, tachlis.herokuapp.com (that's where the problem is).
The problem you're describing in your question is due to elements overflowing the body width. Now, knowing this, it's always an annoyance trying to actually narrow down which element is causing this.
One way to figure it out is to run this script in the console:
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
I took the liberty to do that on your site, and the culprit is this block:
<div class="row">
<div class="videos>
.....
</div>
<div class="ads">
.....
</div>
</div>
A very quick fix would be to simply add overflow-x: hidden to the body element.
body {
overflow-x: hidden;
}
You could also go through your row block and see what specifically is causing the overflow to happen.
The ideal solution would be to add *{ box-sizing: border-box; }, define a width of 100% for your row element, remove the margins from your row element.
Example CSS:
* {
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;
}
.ads {
display: block;
float: right;
background-color: #c1c4c9;
width: 25%;
}
.videos {
display: block;
float: left;
width: 75%;
padding-right: 10%;
padding-left: 10%;
}
Using flex on the container and float on the children will not work. Erase the floats, remove flex-wrap from the container, add box-sizing: border-box to all elements and - if you want strict widths - use flex-grow: 0 and flex-shrink: 0 on the child elements (= your "columns").
I created a signup page and a login page. For this, I used django's default authentication features and forms. To modify a bit I used crispy forms but my labels are positioned wrong on my screen.
I have attached an image of my signup page where you can see the labels username, password, password again is positioned wrong.
Signup page
here's my signup.html
{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<body>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<img src="{% static 'pd/images/logo.png' %}" style="width:300px;">
<h2>Welcome to Panasonic Energy</h2>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="text-center ">
<button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
</div>
{% if form.errors %}
<p class=" label label-danger">
Please try again.
</p>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
and this is my signup.css. I thought the problem was in my css as the label affecting styles may be overriding Django's default styles so I commented them out but still, the problem remains.
.send-button {
background: #54C7C3;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
} */
/* .g-button {
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
} */
/* .my-input {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
} */
/* .header-title {
margin: 5rem 0;
} */
h1 {
font-size: 31px;
line-height: 40px;
font-weight: 600;
color: #4c5357;
}
h2 {
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
/* .login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
} */
/*
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
} */
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#media screen and (max-width:480px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
}
Please help me fixing the position of these labels.
Thanks in advance...
you should render form as {% crispy form %} as you have loaded the crispy form tag at top not like {{ form|crispy}} and you dont need to add <form> tag as you are building it in {% crispy form %}. So some of html is also redundant and you can generate the submit button in crispy form itself like
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
class SignUpForm(forms.Form):
Username=forms.CharField(required=True)
Password=forms.CharField(widget=forms.PasswordInput,required=True)
Confirm_Password=forms.CharField(widget=forms.PasswordInput,required=True)
def __init__(self,*args,**kwargs):
super(SignUpForm,self).__init__(*args)
self.helper=FormHelper()
self.helper.method='POST'
self.helper.add_input(Submit('gobtn','Login',css_class='btn-success'))
def clean(self):
cleaned_data = super(SignUpForm, self).clean()
password = cleaned_data.get('Password')
password_confirm = cleaned_data.get('Confirm_password')
if password != password_confirm:
raise forms.ValidationError("The two password fields must match.")
return cleaned_data
and make sure you pass it in you view like
def myview(request):
#your logic here
context={}
if request.method == "GET":
context['form']= SignUpForm()
else:
#POST request block
if SignUpForm(request.POST).is_valid():
#do what you like here
else:
#if form is invalid
context['form']= SignUpForm(request.POST) # this will render if validation errors so you can remove your if errors block in html
render(request,'template_name.html',context)
I have multiple templates in Jinja2 that extend my layout. They require different backgrounds. I've followed the instructions in the docs located here
http://flask.pocoo.org/docs/0.12/patterns/templateinheritance/#child-template,
but can't seem to get them to work. Thoughts on what is going wrong?
Here's the relevant section of layout.html:
<html>
<head>
{% block head %}
<title>Verbatim: Book Reviews & Recommendations</title>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
<!-- Additional CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
{% endblock %}
</head>
And here's the template in which I'm trying to insert a different background image:
{% extends "layout.html" %}
{% block head %}
{{ super() }}
<style>
body {
background-image: url(yellowed-paper-texture.jpg);
}
</style>
{% endblock %}
{% block body %}
<div class="container h-100 my-5 form">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-md-12 col-sm-12 col-xs-12 form">
etc ....
EDIT:
My CSS file doesn't appear to contain anything exciting that would abridge the inheritance process.
#media (max-width: 768px) {
div.ratings {
font-size: 13px; }
}
#media (max-width: 768px) {
#siteName {
font-size: 26px; }
#siteSubTitle {
font-size: 20px; }
#siteTagLine {
font-size: 14px; } }
#media (min-width: 768px) and (max-width: 992px) {
#siteName {
font-size: 26px; }
#siteSubTitle {
font-size: 20px; }
#siteTagLine {
font-size: 14px; } }
#media (min-width: 992px) {
#siteName {
font-size: 36px; }
#siteSubTitle {
font-size: 30px; }
#siteTagLine {
font-size: 24px; } }
#siteName, #siteSubTitle, #siteTagLine {
font-family: "IM Fell English SC", serif; }
.blank_row {
height: 10px !important;
/* overwrites any other rules */
background-color: #FFFFFF; }
a.nav-link {
color: #E8E8EE !important; }
a.nav-link:hover {
text-shadow: 0 0 5px #FFD700; }
.navbar.navbar-expand-md {
background-color: #000000;
border-color: #FFFFFF; }
div.container.siteTitle {
background-image: url(yellowed-paper-texture.jpg);
height: 100%;
width: 100%; }
.banner {
background-image: url(yellowed-paper-texture.jpg);
height: 20vh; }
.black-border-bottom {
border-bottom: 2px solid black; }
#loginPrompt {
font-family: "IM Fell English SC", serif; }
/*change btn color by adding custom-btn class*/
/*https://stackoverflow.com/questions/49184471*/
.btn-primary.custom-btn {
background-color: #000;
border-color: #000; }
The problem was here:
body {
background-image: url(yellowed-paper-texture.jpg);
}
The url link needed to be url('/static/yellowed-paper-texture.jpg').
My internal div though set at width: 100% does not fill the external div. I think it's because of the padding, but I'm not sure. How can I get the internal div to fit the width of the external div? Thanks.
myjsfiddle
HTML:
<html>
<head>
<title>Clinical Molecular Incident Reporting System</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'error_tracking/css/master.css' %}">
</head>
<body>
<div id="content">
<div id="pagetop">
<b>Clinical Molecular Incident Reporting System</b>
<span id="navigation">
{% if user.is_authenticated %}
search incidents |
report incident |
resolve incident
<span id="user-info">{{ user.username }} | logout</span>
{% else %}
<span id="user-info">Login</span>
{% endif %}
</span>
</div>
{% block content %}
{% endblock content %}
</div>
</body>
</html>
CSS:
html,body {font-family: Verdana; font-size: 16px;}
#content {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #F6F6EF;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
padding: 0px 10px 10px 10px;
}
#pagetop {
width: 100%;
background-color: #04B4AE;
font-family: Verdana;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
padding: 10px;
}
#pagetop a:link {color:#000; text-decoration: none;} /* unvisited link */
#pagetop a:visited {color:#000; text-decoration: none;} /* visited link */
#pagetop a:hover {color:#000; text-decoration: underline;} /* mouse over link */
#pagetop a:active {color:#000; text-decoration: none;} /* selected link */
#navigation{padding-left: 15px;}
#user-info {float: right;}
Remove width and add negative left&right margins for #pagetop.
#pagetop {
margin: 0 -10px;
width: auto; /* default value, just remove width: 100% */
}
https://jsfiddle.net/hmv753s4/1/