I started to develop a web page project with nodejs ejs engine.
It’s my git repo link: https://github.com/FikretAKBAS/teknikhane.git
The problem is when I start my project “npm start” html pages are loading but css file does not load. I tried many different things to figure out that but I didn’t get any solutions for that. In addition to I guess that’s a file path problem. I hope someone could help to solve this problem. Thanks a lot.
enter image description here
Remove /public from your css files path
for example
before
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/public/css/fontawesome.css">
<link rel="stylesheet" href="/public/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/public/css/owl.css">
<link rel="stylesheet" href="/public/css/lightbox.css">
after
<!-- Additional CSS Files -->
<link rel="stylesheet" href="/css/fontawesome.css">
<link rel="stylesheet" href="/css/templatemo-edu-meeting.css">
<link rel="stylesheet" href="/css/owl.css">
<link rel="stylesheet" href="/css/lightbox.css">
After you started the server
Your public folder become a root folder for localhost:5000
Related
I pushed my project to git, and it was working just fine. However, now that I've cloned it onto a new computer, it's unable to link my html HTML my CSS stylesheet.
Here's the directory(?):
And here's the link throwing the error on the node server:
<link rel="stylesheet" href="/style.css" />
I'm sort of at a loss for what could be going wrong, especially after trying to link it with the path ../public/style.css
Any help appreciated!
I can't get your problem. if the problem is in html file path 3rd option will help you. sorry if this isn't work.
<link type="stylesheet" href="style.css"> - The "style.css" file is located in the same folder as the current page.
<link type="stylesheet" href="public/style.css"> - The "style.css" file is located in the public folder in the current folder.
<link type="stylesheet" href="/public/style.css"> - The "style.css" file is located in the public folder at the root of the current web.
<link type="stylesheet" href="../style.css"> - The "style.css" file is located in the folder one level up from the current folder
Have you tried using the absolute path for testing? Let's try using this method.
<link rel="stylesheet" href="./style.css" />
If your server is making public folder not a part of dockroot, then that might be the case for the error.
My css and Javascript are not showing when I open my file in browser via folder. My files are in the same folder which is a subfolder of subfolders
I have tried renaming files.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<script src="calc.js"></script>
You can use ./ to indicate that the css and js files are in the same directory or to indicate the current directory. This would be relative path for the css and js files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<script src="./calc.js"></script>
</body>
</html>
First of all , you want to identify,where those css files and javascript files are located.That means which folders contains particular css files and javascript files. when you integrating css files and javascript files with main html page , set the path to particular css or javascript file from current directory.if particular files are in same level with your current working directory , initialize the path to particular directory.At the same time id you working directory and particular directory are in deferent levels , at first go to particular directory level and initialize the path.(if you want to go previous(back) directory , ' .' can be used.
ex - if you want to go back 1 level './' can be used. if you want to go back two levels of directory '../' can be used.).I hope, you got the idea. cheers !
Introduction
I have two domains, http://mauricevandorst.com/ and http://tacticalmotion.nl/.
What do I want
I want the website https://mauricevandorst.com/personal-page/index.html to be the same website as http://tacticalmotion.nl/personal-page/index.html. The files and paths are exactly the same, so it should work but unfortunately it does not..
The issue
On my domain, mauricevandorst, the .css files load perfectly.
On my other domain, tacticalmotion, the .css files do not load at all.
To load the .css files in my Index.html I use the following code:
<!-- Custom Theme CSS -->
<link href="css/main.css" rel="stylesheet">
The CSS files I use can be found here:
main.css - bootstrap.css - bootstrap.min.css
Extra information
I have found out that when loading http://www.mauricevandorst.com/personal-page/index.html (http instead of https) gives the mistake too. Could it possibly be an SSL certificate that misses?
The thing is, since your website is in HTTPS you can't load HTTP content.
MDN Link
The best shot you've got is simply to use https CDN especially for bootstrap
Juste have a shot with thoose url.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I recently downloaded a theme namely (scalia)
it has lots of css but they are present in file with .html extension
every page of this theme open good at local computer [not localhost (i am directly opening index.html in browser)] but when upload it to hosting it shows a mime type error.
Stylesheets are linked in this format
<link rel='stylesheet' id='layerslider-group-css' href="indexf67d.html?f=scalia/wp-content/plugins/LayerSlider/static/css/layerslider.css,scalia/wp-content/plugins/contact-form-7/includes/css/styles.css,scalia/wp-content/plugins/scalia-style-changer/css/ssc-style.css,scalia/wp-content/plugins/mailchimp-for-wp/assets/css/checkbox.min.css,scalia/wp-content/themes/scalia/css/woocommerce.css,scalia/wp-content/themes/scalia/css/woocommerce1.css" type='text/css' media='all'/>
I already got these css file layerslider.css, styles.css, ssc-styles.css etc. etc.
My main question is [is there any alternative of the above code? so that i can replace this code and link my css files manually]
Yes.
If you have a .css file in the same directory than your html file, you can include it that way:
<link rel="stylesheet" type="text/css" href="myfile.css">
If it's in another directory, use relative path or complete path like so
Relative: file inside folders that are in the same directory than the html file
<link rel="stylesheet" type="text/css" href="folder/anotherfolder/myfile.css">
Relative: file that is in the root of the directory containing the html file.
<link rel="stylesheet" type="text/css" href="../myfile.css">
Complete
<link rel="stylesheet" type="text/css" href="C:/Users/yourname/Documents/CSS/myfile.css">
Just visit the link in your href. Save the CSS that you get as a seperate CSS file. Replace the href in the above line with the path to new downloaded file.
I want to link my css file in my index.html file. The structure of my project is:
MyWeb
Views
-> index.html
css
-> style.css
js
->jQuery.js
I tried the following relative href links but nothing worked.
<link href="../css/style.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<script src="../js/jQuery.js"></script>
Here is the link to the website hosted locally: http://127.0.0.1:5000/
Try <link href="/css/style.css" rel="stylesheet">
its relative to the root
Remove ../ in href
<link rel="stylesheet" href="css/style.css" type="text/css" />
The html files are dynamic if you are using Flask Framework. Try something like:
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
Found here: Flask framework intro
assuming your folder structure is as follows
your app
templates
static
style.css
app.py
or you can also do it like this
<link rel="stylesheet" href="/static/style.css" type="text/css" />