I am trying to create a github page using the css stylesheet from W3.CSS.
However, when I try to load the page, it seems like no CSS stylesheet is loaded. I did not found an answer here on stackoverflow or anywhere else
Maybe I am doing something wrong, but I don't know what.
Here is the beggining of my index.html file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {padding: 12px;}
.w3-navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
</style>
<title>Amérique du Sud</title>
</head>
And here is the page in question
If you look in the browser console you'll see an error
Mixed Content: The page at 'https://laurenthayez.github.io/#Argentine' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.
That means that since your site is https://, it will not load resources that are served over http:// for security reasons.
The solution is to use https://www.w3schools.com/... for your assets instead of http://www.w3schools.com/.... Or you can just use //www.w3schools.com/... and that will request the asset from the site using the same protocol as your site. Or in other words, if your website is http://, it will request http://, or if your website is https://, it will request https://
So change your link tags to
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
or
<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="//www.w3schools.com/lib/w3-theme-black.css">
Related
so i just activated ssl for my website and i noticed that the font changed. It went from League Sparton Bold to something slightly different. It is not exactly what i desire. Here is what i wrote in css
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" /><head>
<script src="jquery-3.5.1.min.js"></script>
</head>
<style>
body,h1,h2,h3,h4,h5,h6 { font-family: 'League Spartan Bold', arial; }
body, html {
height: 100%;
color: #777;
line-height: 1.8;
min-width: 100%;
}
</style>
here is what it looks like with http, which is also what i want for https:
and this is what it looks like in https,
The problem comes from the CSS file which has been linked to by
<link href="https://allfont.net/allfont.css?fonts=league-spartan" rel="stylesheet" type="text/css" />
Although the actual linking is requested using https, if you look within the file you will see it has:
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(http://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
and so if the font isn't local, it tries to get it from allfont.de but with http
One way of getting over this problem would be to put this code direct into style in your header, altering the two http to https so you aren't dependent on allfont's text.
#font-face{font-family:league spartan bold;font-style:normal;font-weight:700;src:local('League Spartan Bold'),local('LeagueSpartan-Bold'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.woff) format('woff'),url(https://allfont.de/cache/fonts/league-spartan_96d155934eb746bc55706f1589b67f14.ttf) format('truetype')}
Embed or import the font from somewhere you can also download the font then use #font-face to import it in your site like this:
#font-face {
font-family: 'League Spartan Bold'; // You can use any name
src: url(fonts/thefont.ttf) format('TTF') // The path of the font file
// You can use many formats like TTF, OTF, WOFF
}
So, by this way you can host your own font and don't need to be depended on a third party service (which can be down any time).
I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
I'm stuck in the first few steps of developing a very basic static website. I began by typing out my header and then I created a main.css file in a css directory and I set the body background color as a test to verify that the link is working. When I preview index.html in the browser, I'm not getting a color for the body but I'm also getting the text of my link showing up above the header. I believe I'm following the right protocol and can not figure out why this is. Any ideas? T.I.A.
File structure:
css
main.css
normalize.css
index.html
Browser preview:
rel="stylesheet" href="css/normalize.css"> rel="stylesheet" href="css/main.css">
Quiet Woods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Quiet Woods </title>
<link> rel="stylesheet" href="css/normalize.css">
<link> rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1> Quiet Woods </h1>
</header>
</body>
</html>
You must remove the > character:
<link rel="stylesheet" href="css/normalize.css">
I am using Bootstrap to display a list and I am trying to customize its list-item-component.
I have the following code in my CSS file:
.list-group-item {
border:0 !important;
padding-top:2px;
padding-bottom:2px;
}
I reference the CSS file like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="list.css" rel="stylesheet" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Restriction Lists</title>
</head>
<body>
<div id="tree"></div>
<script src="ListApplication.js"></script>
</body>
</html>
The Bootstrap code is in the following file(I am using React).
<script src="ListApplication.js"></script>
Another weird thing is that Chrome Developer Tools does not display the CSS file correctly.
Try with <meta> first:
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="list.css" rel="stylesheet" type="text/css">
and make sure jquery and bootstrap are coded succesfully in your ListApplication.js
it should work.
The problem was that I was opening the HTML file from within Webstorm. When I was changing the CSS file, the changes were not loaded into the browser upon refresh.
I made a simple responsive website and everything is working great when browser reads file from my computer but when I put it on my server Mozilla is not loading CSS. It loads fine in Chrome and IE.
Here is the HTML code:
<head>
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css\normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css\main.css">
<link rel="stylesheet" href="css\responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
And CSS (in main.css) starts with this:
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Is it a problem with encoding? Is there anything I should put in main.css and responsive.css file?
I didn't change any settings in Mozilla and my version is 31.0.
Website: http://test.mateajdukovic.com
Thanks!
The errors are:
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cnormalize.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cmain.css"
"NetworkError: 404 Not Found - http://test.mateajdukovic.com/css%5Cresponsive.css"
Try changing the \ to / in your HTML.
I am not sure But according to me you should use forward slash.
instead of "\" use "/" in your path of hreg tag
i.e.
use this:
<meta charset="utf-8">
<title>Mate Ajdukovic | Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Rest all seems good.