The problem should be fairly simple.
I have 2 HTML files styled by a unique CSS. Basically I have written CSS code for one HTML (the home page) yesterday, and everything works fine. Today I am adding a few 'div' and 'class' elements to the second HTML (checkout) but the code I have added to the CSS today seems to have no effect (code from yesterday works fine though).
So, I have inspected the page run on localhost and loaded the link to the CSS. Well, I have found out that the code I have written today is not being loaded.
Obviously I have saved the CSS, and also tried to close PyCharm and restart the project, but it does not seem to work.
How can I fix this issue?
Here is my project directories tree:
The CSS
body {
background-color: green;
font-size: 100%;
font-family: Sans-serif;
}
h3 {
font-size: 90%;
}
.menu{
background-color: CadetBlue;
text-align: center;
display: inline-block;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin:auto;
}
.order {
background-color: Brown;
float: right;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
.restaurant_name {
color: yellow;
font-size: 3em;
text-align: center;
padding-top:5%;
}
.order_header {
text-align: left;
padding-left: 10%;
background: grey;
color: yellow;
border-left: 4px solid LightSeaGreen;
}
.menu_and_order {
padding: 5%;
}
.menu_title {
background: grey;
color: yellow;
border-left: 4px solid LightSeaGreen;
font-style: italic;
font-size: 2.5em;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 5px;
text-align: left;
}
table {
border-collapse: collapse;
margin: auto;
}
.checkout {
border: 1px solid #ddd;
border-radius: 5px;
padding: 3px;
margin-left: 10%;
background-color: CadetBlue;
}
a {
text-decoration: none;
color: black;
border: 1px solid #ddd;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
margin: 10%;
background-color: grey;
}
.link {
margin-left: 35%;
}
.order_table {
width: 100%;
}
th {
padding-bottom: 5%;
}
.page_title {
color: yellow;
font-size: 3em;
text-align: center;
padding-top:5%
}
.order_summary {
background-color: Brown;
margin: auto;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
border: 1px solid #ddd;
}
.customer_details {
float: right;
}
N.B. from .page_title the code is not being loaded on localhost
The second (checkout HTML) is the following.
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title>
<link rel="stylesheet" href="{% static 'css/my_cart.css' %}">
</head>
<body>
<div class="order_summary">
<h1 class="page_title">Order summary</h1>
<h3>The following items will be ready to be collected:</h3>
<h3>Reference number: {{ cart }}</h3>
<table class="order_table">
{% for cart_item in cart_items %}
<tr class="order_item">
<td>{{ cart_item.item }}</td>
{% endfor %}
</table>
</div>
<form class="customer_details" action="{% url 'successful_order' %}" method="POST">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Confirm Order">
</form>
Back to order</ul>
</body>
</html>
Probably that's all you need, but here is also the code I have added to settings.py
Should you need me to provide other code, just let me know.
Thank you for any reply
Modern browsers cache the CSS to allow faster page loading for repeat visitors.
Using ctrl+f5 in the browser whenever you make any changes to the CSS forces it to update the cache.
Firefox and Chrome both have an option in the dev tools to disable the cache when the tools are open.
Related
I'm very new to css, html and asp.net. I'm trying to clone a website in order to learn web tech concepts. Well, when i write everything in inline css, everything works fine. But when put these inline css codes into an external file, it's all messed up. How can i fix this? I always face this trouble when I use external css. Some of my previous codes are affecting my following or later codes and I face this trouble.
I don't understand how css works. I use classes with dots, ids with # but can't uderstand yet how to put them in an order between my html codes.
I want to add a JSFiddle When I hover on recipes there's a new div pops up. There are 3 new divs in that popped up div. The 1st div has a list holding the info of soup, legume etc. I want those 3 divs stay next to each other. I want to be able to style them. I don't know how to style nested elements by using class and id. This leads to trouble. To clarify nested elements have a look at this please:
div
paragraph
div
list
a
how to style these elements from an external CSS file instead of inline CSS such as style="bla bla bla"
here's my codes and pics.
.auto-style1 {
width: 100%;
}
.aMain {
text-decoration: none;
color: black;
background-color: #ddd6d6;
display: inline-flex;
width: 100px;
height: 30px;
font-size: 13.5px;
justify-content: space-between;
align-items: center;
margin-left: 180px;
}
.divLogin {
border-style: solid;
border-width: 1px;
height: 46px;
width: 120px;
float: right;
margin-right: 180px;
margin-left: 16px;
margin-top: 12px;
background-color: #ffffff;
border-radius: 5px;
}
.pIcon {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.pLoginText {
float: right;
margin-right: 6px;
margin-top: 5px;
font-size: 15px;
text-align: center;
}
.divSendRecipe {
border-style: solid;
border-width: 1px;
width: 140px;
height: 46px;
float: right;
margin-top: 12px;
border-width: 1px;
background-color: #ff6a00;
border-radius: 5px;
}
.pSendRecipe {
background-color: transparent;
align-items: center;
margin-top: 8px;
margin-left: 6px;
}
.divSearch {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 46px;
float: right;
margin-top: 12px;
margin-right: 16px;
border-width: 1px;
background-color: #ffffff;
}
.divSearch .divSearchContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 426px;
height: 200px;
float: right;
margin-top: 2px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.divSearch:hover .divSearchContainer {
display: block;
background-color: #ffffff;
}
.divSearch .divSearchContainer span {
display: inline-block;
margin-left: 10px;
margin-top: 12px;
font-size: 18px;
font-weight: bold;
color: white;
}
.divSearch .divSearchContainer a {
display: inline-block;
background-color: #ddd6d6;
width: 80px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: white;
text-align: center;
font-size: 16px;
}
.divSearch input[type=search] {
all: unset;
font: 16px system-ui;
color: #fff;
height: 100%;
width: 360px;
padding-left: 6px;
float: left;
}
.divSearch button {
all: unset;
cursor: pointer;
width: 46px;
height: 100%;
float: right;
font-size: 16px;
font-weight: lighter;
background-color: #d91616;
color: white;
text-align: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.divSearch button:hover {
font-size: 20px;
}
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
/*.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
float:left;
margin-top: 52px;
position: absolute;
display: inline;
}*/
/*.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}*/
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
.image {
height: 40px;
width: 40px;
border: none;
position: absolute;
top: 23px;
left: 42px;
}
<head runat="server">
<title></title>
<link href="testCSS.css" rel="stylesheet" />
<link rel="stylesheet" href="/fontAwesome/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 30px; background-color: #ddd6d6">
<i class="fas fa-home"></i>MAIN PAGE
</div>
<div style="height: 70px; background-color: #ffffff">
<a href="mainPage.aspx">
<asp:Image ID="Image1" runat="server" Height="45px" Width="120px" ImageUrl="pics/logo.png" title="Logo" Style="margin-left: 180px; margin-top: 12px; float: left;" />
</a>
<div class="divLogin">
<p class="pLoginText">
<strong>Log In<br />
or Sign Up</strong>
</p>
<p class="pIcon"><i class="fas fa-2x fa-user-circle"></i></p>
</div>
<div class="divSendRecipe">
<p style="margin-right: 10px; margin-top: 15px; text-align: center; float: right; font-size: 15px;"><strong>Send Recipe</strong></p>
<p class="pIcon"><i class="fas fa-2x fa-marker"></i></p>
</div>
<div class="divSearch">
<input type="search" id="query" name="q" placeholder="Search cook or recipe..." />
<button><i class="fas fa-search"></i></button>
<div class="divSearchContainer">
<div>
<span>Popular Searchs</span><br />
cake
cookie
pasta
dessert
wet cake
browni
pastry
</div>
<div><span>My Last Searchs</span></div>
</div>
</div>
</div>
<div style="z-index: -1; height: 70px; background-color: #d91616;">
<table class="table">
<tr>
<td class="td">RECIPES<img class="image" src="pics/cook book.png" />
<div class="divContainer">
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">
<ul>
<li style="text-align:left;"><a style="width:230px;height:30px;">Soaps</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Legume Recipes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Vegetable Dishes</a></li>
<li style="text-align:left;"><a style="width:230px;height:30px;">Meat Dishes</a></li>
</ul>
</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div2</div>
<div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div3</div>
</div>
</td>
<td class="td">VIDEOS<img class="image" src="pics/camera.png" />
<div class="divContainer" style="margin-left:-124px;">videos</div>
</td>
<td class="td">TRENDS<img class="image" src="pics/trends.png" /></td>
<td class="td">SUGGESTIONS?<img class="image" src="pics/what should i cook.png" /></td>
</tr>
</table>
</div>
<div style="width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background-color: #D9FFFF">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
this is what my codes do:
this is what i want it to do:
this is how my website looks.
when put these inline css codes into an external file, it's all messed up. how can i fix this? i always face this trouble when i use external css.
You can your css in a separate .css file and import it to your HTML file inside the <head></head> tags.
I think the below example explains it clearly.
Here I have my CSS in a separate .css file called myStyle.css. Then I have imported it to my HTML file. Remember in this example, both files are inside the same directory. Of course, you can put them anywhere and change the href accordingly.
/* myStyle.css */
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>
</body>
The code share in the question
is not separating your CSS code into another file, but it is putting it inside the file as text, which is not evaluated as CSS. First, try to put that CSS code into a style tag as a proof-of-concept:
<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
.table a {
text-decoration: none;
color: white;
font-weight: bold;
}
.table td {
width: 25%;
font-size: 15px;
text-align: center;
vertical-align: top;
position: relative;
border: 1px solid;
}
.table td .divContainer {
border-style: solid;
border-width: 1px;
border-radius: 5px;
width: 732px;
height: 400px;
margin-top: 52px;
border-width: 1px;
background-color: #ffffff;
z-index: 1;
position: relative;
display: none;
}
.table td .divContainer div {
border-style: solid;
border-width: 1px;
width: 240px;
height: 300px;
background-color: brown;
margin-left: 2px;
margin-right: 2px;
margin-top: 52px;
float:left;
position: absolute;
display: inline;
}
.table td .divContainer ul li a {
display: inline-block;
background-color: #ddd6d6;
width: 244px;
height: 24px;
padding: 3px 0 0 0;
margin: 4px 0 0 8px;
border-radius: 25px;
text-decoration: none;
color: blue;
text-align: left;
font-size: 16px;
}
.table td:hover .divContainer {
background-color: #b50c0c;
display: block;
}
</style>
Once that works, you can proceed in separating the CSS code into a file.
Linking a CSS file
Let's create a CSS called style.css. Remember where it is and add this code to your head tag:
<link rel="stylesheet" href="/my/correct/path/style.css">
Now, load your page in the browser. Look at the Console of your Dev Tools. If you see an error that states that the file was not successfully loaded, then you have specified the wrong path. Fix the path until loading your page no longer complains about the file not being loaded correctly.
Moving the CSS
Now copy the inner content of your style tag discussed earlier and paste into your style.css. Don't copy the <style type="text/css">, nor the </style. Remove the style tag. Reload the page. Make sure that for now style.css does not contain anything else. Work until the page reflects your styling.
Resolve conflicts
Now, assuming that you have different external CSS that conflicts with your rule, the first question is: do you need the external CSS? If not, then don't load it. If yes, then adjust your rules to be more specific than the remote CSS's rules if you want your CSS to be reflected. Change your structure if necessary. Work on your structure and design bit-by-bit until you fix all conflicting rules and your page looks good.
Test in several browsers
When you are done with your changes, load your page in several browsers and see whether some browsers don't handle your design well. If so, find out what the problems are and fix them.
So guys my site looks like this right now.
Here's the site! You will definitely understand my problem if you didn't from the title,
HTML
{% load crispy_forms_tags %}
<div class="row">
<div class="col-md-6 offset-md-3" id="ada">
<h3>Makale Ekle</h3>
<hr>
<form method = "post">
{% csrf_token %}
{{form|crispy}}
<br>
<button type = "submit" class = "btn btn-danger">Ekle</button>
</form>
</div>
</div>
CSS
body {
background: rebeccapurple;
font-family: Arial, Helvetica, sans-serif;
}
#ada {
margin: auto;
margin-top: 100px;
padding-top: 5rem;
padding-bottom: 5rem;
border: 5px solid rgb(49, 2, 68);
background-color: purple;
border-radius: 5%;
}
h3 {
font-size: 2rem;
color: white;
}
label {
color: white;
}
input {
width: 800px;
margin-bottom: 1.2rem;
size: 2rem;
border: 3px solid purple;
text-align: justify;
}
input[name="context"] {
height: 10rem;
padding: 20px 10px;
line-height: 28px;
}
So guys I think I am missing something easy.
I tried to solve it by adding some code in CSS but it definitely didn't work.
You should use the TextArea widget at forms.py
I can give an example.
forms.py
def class FeedbackForm(forms.Form):
title = forms.CharField(label="Title",widget=forms.TextInput)
message = forms.CharField(label="Message", widget=forms.Textarea)
I am currently working on a project with Django. The home / main page of the project is locked behind a login form. I have the background blurred with the login form on top of the blur and I am looking to remove that form and blur when the user logs in with a valid account.
Is this possible and where should I look, googling has turned up nothing.
the blur is applied via css.
Also is it possible to stop the user from interacting with the elements behind the blur until they log in?
thank you
home.html
{% extends "main/base.html" %}
{% block content %}
<div class='login-form'>
<form method="POST">
{% csrf_token %}
<div class='larger-form'>
<h3>Login Form</h3>
<div class='smaller-form'>
<p>
<label>Username</label>
<input type="text" name="username">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<button type="submit" class='login'>Login</button>
Need an account? <a class='' href="{% url 'register-page' %}">Sign Up</a>
</div>
</div>
</form>
</div>
<div class="search-content">
<div class='bar-container'>
<h1> Search Here </h1>
</div>
<div class='searchbar-container'>
<p>
<input type="text" class="search-bar">
</p>
</div>
<div class='content-section'>
</div>
</div>
<style>
.search-content {
filter: blur(4px);
}
.login-form {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 20%;
height: 30%;
display: grid;
z-index: 3;
}
.search-bar {
border-radius: 2px;
width: 40%;
margin-left: 30%;
}
.bar-container {
filter: blur(4px);
margin: auto;
text-align: center;
color: white;
background-color: #545452;
border-radius: 3px;
width: 75%;
box-shadow: 1px 1px 3px grey;
}
.searchbar-container {
margin: auto;
right: 50%;
}
h3 {
color: white;
}
.loginform {
margin-top: auto;
margin: 0 auto;
width: 300px;
}
.larger-form {
margin-top: 25px;
background-color: #545452;
border: 3px solid #545452;
border-radius: 8px;
box-shadow: 1px 1px 3px grey;
text-align: center;
}
.smaller-form {
background-color: white;
text-align: left;
}
.login {
border: none;
text-align: center;
font-size: 16px;
display: inline-block;
background-color: white;
color: black;
text-decoration: none;
}
.login:hover {
color: #42A5F5;
</style>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class='container'>
<div class='bar'>
<a href="{% url 'main-home' %}" class='button'>Home</a>
<a href="{% url 'register-page' %}" class='button'>Sign up</a>
</div>
{% block content %}
{% endblock %}
</div>
<div class='menu-bottom'>
<div id='colorstrip'>
</div>
</div>
</body>
<style>
.container {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background: white;
}
.bar {
background-color: #545452;
padding-top: 10px;
height: 50px;
align-items: end;
box-shadow: 2px 2px 5px black;
border-radius: 1.5px;
}
.button {
float: right;
padding-top: 5px;
padding-right: 20px;
border: none;
text-align: center;
font-size: 18px;
display: inline-block;
background-color: #545452;
color: white;
text-decoration: none;
}
.button:hover {
color: #42A5F5;
}
.menu-bottom {
position: absolute;
bottom: 10px;
width: 100%;
}
#colorstrip{
width: 100%;
height: 0px;
border-style: solid;
border-color: #545452;
border-radius: 1px;
background-color: white;
}
</style>
</html>
Let me know if any other code is needed or if this is formatted incorrectly.
Yes. You can wrap the inline CSS code like so:
{% if not user.is_authenticated %}filter: blur(4px);{% endif %}
Also, you can disable interaction with the BG content by adding pointer-events: none; to the class of the element above the content you don't want interacted with.
I'm working using Django. I'm new to coding and working on my first project. I do not know JQuery, but I read that it's possible to collapse/expand a window without JQuery.
I followed this webpage: CSS Expand/Collapse Section (A PEN BY Peter Nguyen)
The problem is that I'm trying to use this in a for loop. I'm able to get the layout how I want it, but when I use expand/collapse it only works for the first item in the loop. So, expand/collapse works perfectly on the first iteration of the loop, but not the rest.
HTML
{% for assignment in assignments %}
<form id=form action= "/project/assignments" method='post'>
{% csrf_token %}
<label class=labels><a href="{% url 'project:assg' assignment_id=assignment.id %}">
Assignment: {{assignment.denominator}} - {{assignment.description}} </a></label>
<input id="toggle" type="checkbox">
<label for="toggle" id=labels2>Criteria</label>
<div id=expand>
<section>
<p>[Number] [Name]: Expand content goes here.
</p>
</section>
</div>
<section>
<textarea id=boxes name="review">{{assignments.review}}</textarea>
<input type="hidden" name="Function_id" value={{assignments.id}}>
<input class=save_tasks type="submit" value="Save">
</section>
</form>
CSS
#toggle{
display: none;
visibility:hidden;
}
#labels2{
display: block;
padding: 0.5em;
text-align: center;
background-color: white;
border-top: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
color: black;
font-size: 20px;
font-weight: bold;
margin: -6px;
margin-top: 5px;
margin-left: 0px;
}
#labels2:hover {
color: #000;
}
#labels2::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent
50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background-color: white;
color:black;
font-size: 20px;
border-bottom: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
padding: 10px;
/* margin-top: -30px; */
}
#toggle:checked ~ #expand {
height: 180px;
}
#toggle:checked ~ #labels2::before {
content: "-";
}
How do I get the collapse/expand division to expand/collapse for all the items in the loop and not just the first one? Is my Django loop incorrect?
Thanks!
The loop is not the problem here.
You only use IDs in your code, and since they are supposed to be unique on a page, the browser uses only the first element that can be found.
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
I have adjusted your code once in the necessary places:
.toggle {
display: none;
visibility:hidden;
}
.labels2 {
display: block;
padding: 0.5em;
text-align: center;
background-color: white;
border-top: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
color: black;
font-size: 20px;
font-weight: bold;
margin: -6px;
margin-top: 5px;
margin-left: 0px;
}
.labels2:hover {
color: #000;
}
.labels2::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
.expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background-color: white;
color:black;
font-size: 20px;
border-bottom: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
padding: 10px;
/* margin-top: -30px; */
}
.toggle:checked ~ .expand {
height: 180px;
}
.toggle:checked ~ .labels2::before {
content: "-";
}
{% for assignment in assignments %}
<form id=form action= "/project/assignments" method='post'>
{% csrf_token %}
<label class=labels>Assignment: {{assignment.denominator}} - {{assignment.description}}</label>
<input id="toggle-{{assignments.id}}" class="toggle" type="checkbox">
<label for="toggle-{{assignments.id}}" class="labels2">Criteria</label>
<div class="expand">
<section>
<p>[Number] [Name]: Expand content goes here.</p>
</section>
</div>
<section>
<textarea id=boxes name="review">{{assignments.review}}</textarea>
<input type="hidden" name="Function_id" value={{assignments.id}}>
<input class=save_tasks type="submit" value="Save">
</section>
</form>
At this point it is important that the input class="toggle" and the label class="labels2" get a unique distinction in the id and the for attribute, so that the click on the label also checks the correct input.
For this you should work with a dynamic value like toggle-{{assignments.id}} - Which I would also highly recommend in principle for all IDs in a loop.
I hope that could help :)
I have a HTML page reference a stylesheet on my github.
It is:
<html>
<head>
<title>Basic JavaScript Quiz</title>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" />
</head>
<body>
<h1 id="title">Please be styled</h1>
</body>
</html>
My expectation is that the Please be styled will be styled as per stylesheet. But it is not.
Any ideas?
Thanks.
Firefox logs an error in the console:
The stylesheet https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css was not loaded because its MIME type, "text/plain", is not "text/css". # http://jsbin.com/oyiceq/1/edit
Don't use the resource from github - it's not a CDN. Save the file and serve it up from your own server.
There is a discussion on this behavior. The relevant bit is the response from github:
"That's a feature, sorta. Please do not abuse the raw URLs like that, they are a very expensive operation for our servers. You should host files like that on pages.github.com instead."
The server is sending the file with the Content-Type of text/plain, which will likely prevent it from being used as CSS.
Remove the attribute id from your h1 tag to work. There is no #title selector in your CSS file there.
Use relalative paths, the link you used leads to a page showing the CSS, but not actually serving the data as CSS.
I checked the css file and you don't have any title id. You have set the style on the h1 element. So in order to see the style, you can choose to modify the HTML like this:
<html>
<head>
<title>Basic JavaScript Quiz</title>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" />
</head>
<body>
<h1>Please be styled</h1>
</body>
</html>
or modify the css like this:
#resultsTable {
width:100%;
border-collapse:collapse;
}
#resultsTable td, #resultsTable th
{
font-size:1em;
border:1px solid #0066CC;
padding:3px 7px 2px 7px;
}
#resultsTable th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#resultsTable tr.alt td
{
background-color:#e7f4c3;
}
body{
margin: 0px;
padding: 0px;
background: #669966;
cursor: default;
font-size: 12px;
font-family: Arial, Tahoma;
}
.questionContainer {
width: 800px;
border: 3px double #003366;
padding: 3px;
margin: 10px;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style: none;
}
a {
border: 1px solid #000;
padding: 2px 5px;
font-weight: bold;
font-size: 10px;
background: #FFF;
cursor: pointer;
}
a:hover {
background: none;
}
.btnContainer {
width: 96%;
margin: 10px 0px 10px 2%;
}
#progressKeeper {
width: 800px;
height: 25px;
border: 3px double #003366;
margin: 0px 10px;
padding: 3px;
}
#txtStatusBar {
margin: 5px 10px;
font-weight: bold;
}
#progress {
background: green;
width: 0;
height: 25px;
}
.radius {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
}
#resultKeeper {
width: 800px;
margin: 10px;
padding: 3px;
border: 3px double #003366;
background:#66CC66;
}
#resultKeeper div {
line-height: 20px;
}
.totalScore {
font-weight: bold;
padding:10px;
}
input {
position: relative;
top: 2px;
}
#title {
border-bottom: 1px solid #003366;
font-size: 16px;
height: 22px;
margin: 10px;
text-indent: 5px;
}
.prev { float: left; } /** elements after a float will flow around it **/
.next, .btnShowResult { float: right; }
.clear { clear: both; } /** no floats allowed left or right **/
.hide { display: none; }
.resultlist li.altli{background:#CCFFAA;}
.resultlist li {background: #BBEEAA;}
#resultsTable td.fail{color:red;}