I'm working on an HTML-based game using Node.js and I'm now working on the front end interface of it. I'm trying to link a CSS stylesheet, but I am getting a strange issue.
My folder structure is set up as follows:
C:\Users\myname\Documents\gamename, and within the gamename folder is the app.js file, and within client I have the index.html file to serve to the client. Within the client folder I also have the stylesheet, w3.css
Within the app.js I have the following line:
app.use('/client',express.static(__dirname + '/client'));
Inside index.html I have the following line:
<link rel="stylesheet" href='w3.css'>
However, when I run the server, it seems it cannot find the stylesheet. When I open the html file locally, it is able to find the CSS file.
Any ideas about how to fix this? I'm just using the link from W3schools that hosts the page, but I really need to edit and add my own parameters.
how did you tried to import your stylesheet in the link tag ?
did you write it something like that ?
<link rel="stylesheet" href="http://localhost:3000/client/w3.css" />
Use this in your app.js
app.use(express.static(__dirname + '/public'));
and add css like
<link rel="stylesheet" type="text/css" href="css/style.css" />
dont need / before css like
<link rel="stylesheet" type="text/css" href="/css/style.css" />
How can I include css files using node, express, and ejs?
Related
Super simple question, but this is not working for me. I have googled it, but for some reason, I am not sure.
I am trying to render my CSS styling in my index.ejs file (essentially my index.html)
My stylesheet is located in Base Directory > public > css > stylesheet.css
and my index.ejs file is located in Base Directory > views > index.ejs
This is currently how I am trying to pull in my stylesheet in my index.ejs:
<link rel="stylesheet" type="text/css" href= "/public/css/stylesheet.css" />
Is there anything wrong with this approach?
Edit:
Using href= "../public/css/stylesheet.css" and CMD+click I am able to go to the stylesheet, so the syntax above must be correct... but it is not rendering
Note: I am also using express
It should not be with respect to the HTML file and not the base directory
<link rel="stylesheet" type="text/css" href= "../public/css/stylesheet.css" />
Try using
href="../public/css/stylesheet.css"
. Most probably your href is searching for the stylesheet.css in the public/css/stylesheet of the current directory (which doesn't exist) instead of Base Directory
Using /css/stylesheet.css worked.
Becuase I am using
app.use(express.static(join(__dirname, 'public')));
In my express file, the href already includes /public
I'm facing this issue loading my CSS stylesheets. For reference, here is my current folder layout:
I am having problem loading the stylesheets for recs.html. In my text editor, the code is as such:
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
The stylesheet for index.html works just fine, as it loads from assets-index perfectly. However, it doesn't seem to work for recs.html (even after I changed changed the folder name and the corresponding html code, e.g. assets-recs).
Can someone advise? Thank you!
Oh yes, if it helps, I am trying to run it on Flask, and on my Python script, the code is as such:
app = Flask(__name__, static_url_path='',
static_folder='template',
template_folder='template')
The directory you see in the above screenshot is the "template" folder itself.
Try flipping the two - eg..
<link href="assets/css/main.css" rel="stylesheet">
Also remove the "/".
If index.html just work fine with the stylesheet path than copy paste it from there over to your recs.html .
The html to your stylesheet path should look like this
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
You are using "/" at the end of yours "/>". Thats also not correct html.
I am building a web project at Eclipse in Java. I wrote a simple HTML and CSS files but I can't see how to link them and I can't spot the problem.
<link rel="stylesheet" type="text/css" href="css/AdminOptionCss.css" >
My files are located here:
you have to give a relative path of that css file , it means that :
your HTML's are in html folder , but your CSS's are not in html folder but your are trying to load them from html folder!
what you need to do is, go a step backward in directory by using ../ and continue pathing, something like this :
<link rel="stylesheet" href="../css/AdminOptionCss.css" >
Try to do like this
<link rel="stylesheet" type="text/css" href="../css/AdminOptionCss.css" >
../ help you to navigate out of html location path , and after go to css and so on
Change your Eclipse view to "Navigator" to see the real file path and use a relative path, like href="../css/AdminOptionCss.css" in your link tag.
So i have like triple checked the code cant see the error. I even tried inspecting the page and it doesn't find the files. If you visit zoeaa.com you will see just html no styling. What am I doing wrong?
<head>
<meta name="descri
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/web/assets/mobirise-
icons/mobirise-icons.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/tether/tether.min.css">
<link rel="stylesheet"
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/bootstrap/css/bootstrap-
grid.min.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/bootstrap/css/bootstrap-
reboot.min.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/dropdown/css/style.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/theme/css/style.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/mobirise/css/mbr-
additional.css" type="text/css">
</head>
The path has to start from where this html page is, so for instance if this let's call it index.html is inside let's say "mainFolder", in order to work the "application" folder also has to be inside "mainFolder".
If it's not check via ftp the whole path from the css file to where the "index.html" is and that is the correct path (no need of the full url with the domain as mentioned above, that's not the issue).
You need to use absolute paths when referencing files.
Include the site name e.g. https://www.example.org/app/css/styles.css.
This is because if you go to a sub directory and you have your src setup like /app/css/styles.css the server will try to find your file on https://www.example.org/my-sub-dir/app/css/styles.css
Also a side note. bring all your files in together as your just causing more requests. HTTP works faster with larger files and less files to download.
Is it typo mistake or something? But I cant see closing tag > in meta. + When I opend the site you provided and checked the developer consoler , I found error.
It looks like your meta name might not be getting closed (missing the ">). That could definitely be interfering with things working properly. If you're sure the paths are correct that's the only thing I could see that might be an issue.
Hope that does it!
I am learning the basics of web development as well as AWS. I am building a dummy webpage have the following workspace structure:
styles/
index.html
my stylesheet link looks like this:
<link rel="stylesheet" href="/styles/styles.css">
My problem is that when I open the file locally, instead of navigating the webpage through the web, this href does not work for my stylesheet and I have to remove the first '/':
<link rel="stylesheet" href="styles/styles.css">
I am on a windows 10 machine, in case it's relevant.
There are few basics which has to be known while linking style sheets or any external style sheets.
Please see the below example. Assuming the below script is nested under the assets/pages folder. Inside access.html file
<link rel="stylesheet" type="text/css" href="../theme/theme-blue.css">
Explanation:
.(dot) indicates current directory
..(dot dot) indicates go two levels above from the current directory and then point to theme folder.
Then inside theme folder look for theme-blue.css
Image Explanation:
I discovered the solution with help from Ragavan Rajan's answer:
<link rel="stylesheet" href="./styles/styles.css">
"./" being the difference.