Receiving the following console log from my static website
Failed to load resource: the server responded with a status of 404 ()
on style.css
Project structure
root - home.html
folder inside root - styles
file inside 'styles' folder - style.css
(It's a simple website, for testing firebase)
I've used firebase to create the instance of my website and it outputted my html to a public folder with index.html but no css files.
Like so public/index.html
I've added inline css to account for this by using <style media="screen"> and it works but it's still not reading/finding my style.css file
style.css link inside index.html (firebase created)
<link rel="stylesheet" type="text/css" href="../style/style.css">
Looked into other answers but they're using bootstrap supplied cdn/url. I want to be able to use the one I created.
Firebase hosting will only host the files under your public folder. Which means that your style folder is not being uploaded and thus index.html can't detect the css file.
You need to move your style folder to have it inside the public folder and change the link to:
<link rel="stylesheet" type="text/css" href="style/style.css">
Related
For some reason my CSS isnt loading, I use sass so it creates a css folder outside of the public folder, And it just keeps doing that after i try to move it
my folder directory
-node project
-public
+index.htmlFOlder structure
-css
+style.css
+index.js (my server)
Here are my links in the css and the middleware im using to serve this in the index
html
<link rel="stylesheet" href="../css/style.css">
nodejs
app.use(express.static('public'))
Note im now also getting an error -
"Refused to apply style from 'http://127.0.0.1:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
To serve the multiple static files you need to add multiple middlewares in your index.js file
app.use(express.static('public'));
app.use(express.static('css'));
and link to CSS with this line in your index.html file
<link rel="stylesheet" href="style.css">
I am trying to load CSS file in localhost but it's just showing white page. I was try to drag and drop file direct to browser and its opened. So file its not empty. and file also open when i use a server and add link to file.
I am using laravel 5.8, PHP 7.2
<link href="{{ URL::asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
CSS file location /public/css i am getting link in source http://localhost/css/style.css
This is most likely a file reference error. Check the markup output and compare the file URL against where it actually sits in the directory structure. If they match up, maybe a directory permissions issue?
In css links only asset is working fine... No need to include URL. so try using only asset.
I am using spring, when i run my project in web common.css files and js files will load. Now, when i run project the existing css file should not load, new css file should load in runtime.For example, if i open my project in web then a.css file sholud load , if i open it from android b.css file should load.
In spring i used web interceptor class http://alvinalexander.com/java/jwarehouse/spring-framework-2.5.3/src/org/springframework/web/servlet/mvc/WebContentInterceptor.java.shtml, in this class i am getting file paths from lookup path variable when i run my project . Here i tried to update file path but it is not working.please help me how can we do it.
Thanks in advance.
Add that css file which you want to override other after that file.
For example you you want to override 'a.css' to 'b.css' than
<link rel="stylesheet" type="text/css" href="b.css">
<link rel="stylesheet" type="text/css" href="a.css">
Here a.css will override b.css
How to specify a custom stylesheet (external) to a SSP template (Scala Server Pages) in Scalate?
I tried specifying the html linking in the default.ssp file as follows.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<%= unescape(body) %>
</body>
</html>
However the stylesheet is not served by Scalatra (Jetty Web Server). I tried inserting the script through <%#include .. as well. Still no luck.
The web page is served without any stylesheet!
You need to have the style.css file as follows.
cd <YourProjectRoot>/src/main/webapp/
mkdir css
touch style.css
Create a style.css file inside a directory css which should be within the webapp directory, for the Scalatra to find out and serve the resource (stylesheet) appropriately.
Note: The folder should be named as css however the file can be named as anything.
I'm developing a webapp on Eclipse and this is the file system directory structure:
myapp
- src
- build
- WebContent
- pages
- css
- images
- modules
- META-INF
- WEB-INF
When I run this webapp with Tomcat (Run from Eclipse) I can load in the browser
the jsp pages contained in (myapp -> WebContent -> pages) using for example this URL:
http://hostname:8080/myapp/pages/somepage.jsp
However the problem is that the loading of the css and images in such somepage.jsp fail.
In the code of the somepage.jsp I pointed the css in this way:
<link href="../css/new_style.css" rel="stylesheet" type="text/css"/>
And the image in this way:
<img src="../images/someimage.png"/>
Problem is I have no clue why such images and css are not loaded.
The problem is in the relative path, always a safer approach to do something like
<link href="<%=request.getContextPath()%>/css/new_style.css" rel="stylesheet" type="text/css"/>
or a JSTL equivalent
<link href="${pageContext.request.contextPath}/css/new_style.css" rel="stylesheet" type="text/css"/>
than you're starting from the root, accounting for context path as well
Better way is to use ${pageContext.request.contextPath} as it returns the name of the application's context.
For ex,
myapp/css/new_style.css can be dyanmically formed as {pageContext.request.contextPath}myapp/css/new_style.css
Have a look here to know What does "./" (dot slash) refer to in terms of an HTML file path location?