Building a Flask project for a simple login screen project I plan to expand on, but here I am stuck on what I would have guessed would have been simple.
Why is my html below not updating to be styled by my login.css?
Here is a snippet up until the link relation:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=devilce-width, intial-scale=1">
<link rel="stylesheet" type="text/css" href="/webapp/templates/login.css">
</head>
It is inside of the same folder, but to make it what I believe to be fool-proof I specifically ran it through the full folder directory.
I have the .scss, the .cssmap from the compiler, and the output login.css in the same folder as the .html as well.
I've downloaded SASS, ran a Live Sass Compiler through VSCode, and now it's compiled to a .css
"What do"?
Not sure exactly the specifics, but from my understanding using {{ url_for--}} worked.
(If someone can follow up with an explanation that would be beautiful.)
Noticed when scanning examples from PythonHow
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, intial-scale=1">
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
Related
<!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">
<title>Blooger</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
I have searched a lot, checked my syntax of linking css n times and spelling of style sheet is correct, the folder I am using is correct I don't know the problem, please help.
I'm not sure whether you've not added it here on SO, but your HTML file doesn't contain anything to show. (no <body></body> or anything within it)
As an example, you need to add
<body>
<h1>My Blog</h1>
<p>welcome to my blog.</p>
</body>
Please check status, type and size in network tab of browser developer tool
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>an infinite endeavor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
The CSS is a separate file, and I've been searching for hours for a solution.
https://i.stack.imgur.com/3GdHj.png
This is troubleshooting, so I will give you three viable answers.
Maybe your css file is not in the same directory as your HTML file.
If you are loading this locally, remember to write the ENTIRE file location ex: C://User/desktop/styles.css
If none work, think about just copypasting the entire css code and putting it inside a tag.
Is your CSS file in a CSS folder? If so do not forget to add css/ to entering your CSS folder.
<link rel="stylesheet" href="css/style.css">
or try like this
<link rel="stylesheet" href="/style.css">
I have my index page head section as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
<title></title>
</head>
Until this morning, the page always used to load fine. But I noticed this morning that css isn't loading at all. I checked the locations of css files. It seems to be correct. Can anyone suggest whats wrong?
There may be a problem with your browser calling the local bootstrap CSS file.
Try requesting the bootstrap CSS via CDN by using:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
And then troubleshoot your local CSS file.
Hope this helps!
Your code looks fine, try playing with the css file path. You may not need the "bootstrap-3.2.0-dist." Typically css is just css/bootstrap.min.css if it's located in a CSS folder and your index file is in your root directory.
I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode
Google Chrome Audit tool says:
Put CSS in the document head (3) CSS in the document body adversely
impacts rendering performance. Link node bootstrap-extract.css should
be moved to the document head Link node style.css should be moved to
the document head Link node css should be moved to the document head
But the stylesheets are linked in the head. Here is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR" xml:lang="fr-FR">
<head>
<title>site</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/resources/css/bootstrap-extract.css">
<link rel="stylesheet" type="text/css" href="/resources/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
etc.
What am I missing?
Your code looks like it should be valid to me, however, the meta tag shouldn't be closed with />:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
This could cause the <head> tag to close, but that's very unlikely.
Have you looked at the HTML in Google Chrome to see how it is being displayed in comparison with what the code should look like?