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
Related
https://github.com/Leevance-singh/tech
CSS is not working on my GitHub pages and I've searched more than 40 forums and solutions but still can't get it working. My href is correctly pointed towards CSS file but still can't see changes live on website.
I suggest you store your CSS file in a separate folder name it as css and then name your file as styles.css with no uppercase letters.
Change your link as <link rel="stylesheet" type="text/css" href="css/styles.css">
See linking approach here https://www.codecademy.com/forum_questions/553bcfc6d3292f7e1b000760
I tried doing it by creating a css file style.css in the same folder, copied the source code of the bulma link provided and then linked it to my html doc. But then, it shows no css features at all.
Unfortunately you cannot edit resources that are hosted on our CDN. Many, many sites rely on these resources remaining intact and the same forever!
You can however modify the styling on your site whilst using this resource by first including it in your website's HTML (within in the head tag):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
You can then modify this styling by creating a secondary CSS file locally alongside your site's HTML file, calling it my-styles.css for example. You can then also include that on your webpage by using another link tag within your head tag, after the link for bulma:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" integrity="sha256-vK3UTo/8wHbaUn+dTQD0X6dzidqc5l7gczvH+Bnowwk=" crossorigin="anonymous" />
<link rel="stylesheet" href="my-styles.css" />
Hope that helps with what you are trying to achieve!
- Matt.
Community Manager # cdnjs.com
Although I didn't achieve what I was trying to do, I guess the only solution is either copying the exact design provided via Bulma link or ending up writing the whole css code all by own which I don't really prefer until essentially needed. So, I'd rather stick to the pre-defined design provided by Bulma.
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.
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" />