The external style sheet is not working on my site - html

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!

Related

CSS error: 'Could not find the original style sheet'

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.

CSS issue after moving website

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

Stylesheets aren't loading on sub-pages

Why isn't my HTML linking my CSS properly? using the Prologue template from html5up.com... In my main directory (I mean where index.html is) I created a subfolder for the different products I want to display. This folder contains a few files: 125st.html, 125stmain.css, and a folder called _notes created by Dreamweaver. Here is the code in the 125st.html that should be linking to the 125stmain.css:
<link rel="stylesheet" href="products/125st/125stmain.css" />
When I visit shercousa.com/products/125st/125st.html (It wont work for you, I've just tricked the hosts file to go to my local save instead of the live site while I work on it) it shows no CSS only the HTML. I just copied this line from the index.html file (which works) and changed the folder to try to direct it to the CSS clone I created. When this didn't work I tried copying and pasting the original line verbatim that works on the main site, but when linked in 125st.html still loads no CSS at all. I'm a bit new so sorry if I'm a bit hard to follow. I can elaborate or post any more code if anyone needs to see it.
Edit: Also my images are not loading, even the ones linked in the html file.
If i'm not wrong, this have an easy solution.
If you're on host/products/125st/125st.html and you linked CSS this way:
<link rel="stylesheet" href="products/125st/125stmain.css" />
What it's happening there is that your file 215st.html is trying to find: host/products/125st/125st.html/products7125st/125stmain.css
So you can either link your css with both this ways:
<link rel="stylesheet" href="/products/125st/125stmain.css" />
or
<link rel="stylesheet" href="125stmain.css" />
I hope this works for you :)
And sorry for my english!
Ga, I'm such a dope. There should be a slash in front of products like so:
<link rel="stylesheet" href="/products/125st/125stmain.css" />

Configure Relative path in HTML when inside a folder

Currently i am doing a website admin redesign where i need to include some css and js files into the header, but i am confused how to do this,
admin path is
www.xxx.com/admin/
what i want to include is in the top level
www.xxx.com/css/style.css
I know i can use the full path but i dont want to hard code the full path like this
<link rel="stylesheet" href="http://www.xxx.com/css/colorbox.css" type="text/css" media="screen" />
So i am looking for a URL independent solution to use to include them.
may be ../../ but not sure this works though ? any idea ?
Start your URL with a slash and use the full path:
<link rel="stylesheet" href="/css/colorbox.css" type="text/css" media="screen" />
On Unix systems, "." is the current directory, and ".." is one directory up.
This means that for your problem, the correct path would be:
../css/style.css
or the whole line:
<link rel="stylesheet" href="../css/colorbox.css" type="text/css" media="screen" />
You just gave answear in Your question :)
For relative paths use ../ this will go one folder up. So for excample:
file placed in www.xxx.com/admin/ path used in this location: ../css/style.css in result path will be: www.xxx.com/css/style.css
One thing i'm not sure is if this method is used with full adress of a web will it be working properly.
I know that this (as i can see) is not a solution fo You but while i'm a PHP programmer i like to use full paths based on servers direct paths (using $_SERVER['DOCUMENT_ROOT']). This saves me a lot of time with paths while for example moving web from one server to another and from my experiaece i can tell that it is worth of implement in any project.
Link them like this
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />

node.js express.js routes slash css

when i write localhost/profil the css works.
But when i write localhost/profil/ the css doesn't work.
app.use(express.static(__dirname+'/public'));
app.get('/profil',[checkCo],require('./routes/profil.js'));
Why?
thanks!
edit:
it's because it thinks that profil/ is a folder, so how can i get around this?
You likely need to use absolute paths within your HTML.
For example, instead of
<link rel="stylesheet" href="style.css">
you need to do
<link rel="stylesheet" href="/style.css">
In the first example, the browser tries to access style.css in the current directory the user is navigated to. So if the user is navigated to /profil/, it tries to load the css from /profil/style.css. In the second example, the browser is told to load the css from /style.css no matter what.