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.
Related
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?
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.
Firstly, I could not find any answers what would solve this (hope simple) issue. So I've just moved the whole website, all its pages and stylesheets to a new directory through my host and now it just cannot load any style for itself. I guess it's about a little problem but already working to find that piece but couldn't get at all.
So to simplify it, in cPanel's File Manager I catched all files and moved to an addon domain like below:
/www/public_html <--- This was the main directory but I moved it to
/www/public_html/addondomainname's directory
The above location is now the current for all pages like index, account, dashboard etc. and all of them are .php files.
Also, I call css sheets to individual pages like
<link rel="stylesheet" href="css/styles.css">
Note that too, there is no full-named links on single pages, I use all my links as they are in-page like so:
Help
Would be just
Help // Or without the DOT and SLASH
And finally I use BS 3 and Font Awesome as sources of my website. I could say it relies on Bootstrap mainly and yes, I included all necessity of script and js implementation within the .
Full code of BS and FA in index.php:
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I tried linking the css like
<link rel="stylesheet" href="mysite.com/css/styles.css/>
But both, with or without the mysite.com href did not work. And yes, the addon domain's directory structured like the root (after public_html/addon) contains index.php, dashboard.php, otherpage.php etc. and folder called css holds all sheets what I would like to use.
Any suggestions would be appreciated guys!
Can you try loading the CSS in the following methods:
<link rel="stylesheet" href="http://www.example.com/css/styles.css" />
Or try:
<link rel="stylesheet" href="/css/styles.css" />
When loading from your addon domain e.g. http://www.example.com
I'm so sorry to everybody who wasted his/her time trying to help me. The issue occured by my stupidity and everything was just fine. What I did is like I ensured that preventing hotlinking my files e.g. jpg, gif and such as CSS does really work. I've just removed the extension of css to be prevented from hotlinking and it works like a charm. Really, sometimes people do not know what are they doing and again I'm sorry who answered my question!
PS: We should log ourselves what are we doing while remaking any of the projects, stuff or materials.. :)
Best wishes,
Christian
I downloaded some css template from the web, copied the folders containing the css files and pasted them in my project, i used their html code as well in order to test the page on the server. It just doesnt work and i went through all the steps on the internet to link css to html.
The css folder is inside WEB-INF, the jsp pages are inside web content, i can't yet post an image on the site so i'll hope you can picture the structure.
<link rel="stylesheet" href="/WEB-INF/css/animate.css" type = "text/css"/>
this is the link syntax i'm using copied from stackoverflow.com and even if i include the project name in the path, it still doesn't work.
Is the folder structures wrong ? or something with the link syntax ?
any help appreciated
change
href="/WEB-INF/css/animate.css"
to
href="/css/animate.css"
You don't need to write that... css, pages and images are usually put into the webcontent folder (as per practice).
I Think you have just to be simple and link your css like this:
This work in HTML, PHP
<link rel="stylesheet" type="text/css" href="css/animate.css" />
This is for ASP.NET
<link rel="stylesheet" type="text/css" runat="server" href="css/animate.css" />
I Hope it help!