I am getting 404 error while load css in my code
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>-------------</title>
<link type="text/css" rel="stylesheet" href="../../resources/css/hompage.css">
</head>
<body >
</body>
</html>
every time I am confusing and not able to load resources.
How to target resource of eclipse to load in browser. I have doubt href="../../resources/css/hompage.css path only plese find attachement.
Try move your css file, or if IDE support it, use absolute path, like /css/*
Related
Maybe I just have this whole idea wrong, so lets check this out. I have the following HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/xyz">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" defer=""></script><script src="polyfills.js" defer=""></script><script src="main.js" defer=""></script></body>
</html>
Now, when I try to load this in the browser with the following url: http://localhost:8080/xyz
it loads the index.html but for all the assets (styles and javascript files) I get 404
I would expect, because I have that base href="/xyz" that it would prefix all asset urls with that url, but as you can see it doesn't.
For completeness, here is my file structure:
./server.js
./xyz/index.html
styles.css
.....
So the server is serving all the files from the /xyz path
Relative paths are resolved by taking the base URL (http://localhost:8080/xyz), removing everything after the last / in the path (giving you http://localhost:8080/) and then appending the new path (http://localhost:8080/styles.css).
If you want /xyz/styles.css then you need to put a / on the end of your base path: <base href="/xyz/">
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
So I'm about to start to code a website using Sublime Text, but I have not touched code in a couple of months (5-7) so I am trying to get used to it again. So I have created my HTML and CSS page, but even though the CSS link is right, it is not displaying in browser. I know once you tell me I will be kicking myself but why is it not showing up?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>
Your code assumes that your folder structure is like this (where your css file is a sibling to the html):
index.html
home.css
However, make sure that if your project setup is in a way that your css is in a folder, you should reflect that in the code:
index.html
-- css
home.css
And you would then put this in your html file:
<link rel="stylesheet" type="text/css" href="/css/home.css">
you have to create a root-directory with the exact adress of the css file , but maybe its because you forgot to make a backslash at the end of the link ( i am not sure )
You are missing the slash in link tag. Try this. Also make sure css file is in same directory.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css"/>
<title>Home</title>
</head>
<body>
<h1>GymHub</h1>
</body>
</html>
I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!
It has been working... But I don't know why it is not working anymore. I am using Django to set up a local server (?) and I use MySQL for something else. The .css file is into a folder where the .html file is located, and like I said before it has been working.
My code inside the head:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8" />
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
</head>
<body>
<div class="header">
...
My .css is not worth mentioning, is it?
Solved
The problem was: indeed a wrong reference to my .css file. I was scrolling in my Terminal to some MySQL command from the moment there was not yet an 404 fault. It had to be:
/static/main.css
Thanks a lot
If the CSS file is in External server the code is
<html>
<head>
<style>
#import url(stile.css);
</style>
</head>
<body>[...]
</html>
Likely an error in the CSS file. Run it through a validation checker. Also ensure you are referencing the correct elements within that css file.
And as others has said, check the browser console for errors loading either resources.