I have two folders in my website.
My directory structure like this:
In my file inside Cidadao I want to get a file from assets.
I am trying code like this:
<link rel="stylesheet" href="site/assets/plugins/bootstrap/css/bootstrap.css">
but this is not working.
Try
<link rel="stylesheet" href="../assets/plugins/bootstrap/css/bootstrap.css">
you just have the path incorrect.
it should be <link rel="stylesheet" href="/site/assets/plugins/bootstrap/css/bootstrap.css">
Or you could try <link rel="stylesheet" href="/assets/plugins/bootstrap/css/bootstrap.css">
Or you could also try <link rel="stylesheet" href="../assets/plugins/bootstrap/css/bootstrap.css">
one of those above 3 should work, / are important when it comes to filepaths.
To get from inside a folder to one level up, use ..
This is not confined to HTML though; all computer languages work like that. (Some need the slashes to be the other way around, but the principle is the same throughout.)
Related
I need some help here.. I tried different links but it does not load the CSS file..
<link rel="stylesheet" type="text/css"
href="https://github.com/cengizkirazjs.github.io/cengizkiraz.github.io/styles.css">
This is the page and the outcome: https://cengizkirazjs.github.io/cengizkiraz.github.io/
Any advice? Its my first time linking CSS with HTML on Github!
As it was said in the comments, what do you think about changing file path a bit?
In your code we have this line
<link rel="stylesheet" type="text/css" href="cengizkiraz.github.io/styles.css">
It contains an absolute path. If you want to stick to this method, maybe just add a protocol, like this
<link rel="stylesheet" type="text/css" href="https://cengizkiraz.github.io/styles.css">
But it would be better if you use relative paths
In this case, our <link> will look like this
<link rel="stylesheet" type="text/css" href="styles.css">
It means that HTML will search for this file in folder, where .html file is saved. Looks slightly better, doesn't it?
hii all i am currently learning external css so i used link tag which helps me out with external css. So basically guys the format of link tag which it shows to me in atom is
<link rel="stylesheet" href="/css/master.css">
so the first slash in href tells about root which i don't know in detail as have not yet studied js. So i have removed it. to get the external css correctly i have done all the correct steps regarding it but the problem arises here....
<link rel="stylesheet" href="css/style.css">
( i applied this due to that i am not getting desired out put )..
So done some research and i came to point that by appling this layout of linktag i am getting desired out put
<link rel="stylesheet" href="C:\Users\KUSH\Desktop\UDEMY WEEB DEVELOPMENT 2022\css\styles.css">
this is the path of my external css folder.
but my prof is using this 👇
<link rel="stylesheet" href="css/style.css">
and she is getting desired outputs
so pls help me out with that.....
Try this:
<link rel="stylesheet" href="./css/style.css">
the ./ means that the path start from the current folder where your Html file is located
You need to put your HTML file and CSS file in same folder which make your work easierhere is the example if you I am not understandable
I have created a few html-pages and one CSS-page inside a folder (Webservice). At first I just used to reference to my CSS-page like this because they were in the same folder.
<link rel="stylesheet" href="style.css">
Then I wanted to make it look more clean so I created separate folders for html and CSS within the already existing folder (Webservice). The new folders were named html and CSS. If I do it like down below it works, but I need to be able to access the files on other computers/devices as well.
<link rel="stylesheet" href="file:///Users/home/Desktop/Webservice/css/style.css">
It does not work to do like this:
<link rel="stylesheet" href="css/style.css">
How do I solve this?
You will have to use ../ inside the html folder to go to the parent folder.
And then you can access the css folder so your link will look like this:
<link rel="stylesheet" href="../css/style.css">
By using a relative path, it will work on your other computer.
You have to set the relative path to your CSS style from HTML file.
To view more https://desktop.arcgis.com/en/arcmap/10.3/tools/supplement/pathnames-explained-absolute-relative-unc-and-url.htm
I've using bootstrap and file and folders is like this
root/css/..
When I include <link id="bs-css" href="css/bootstrap.min.css" rel="stylesheet"> it is working for files in root folder. But if I have file in another folder and trying to include css doesn't work. It doesn't show any style. For example
root/users/profile.php
then I include in profile.php like this
<link id="bs-css" href="../css/bootstrap.min.css" rel="stylesheet">
I've also tryed full path again didn't work properly. But if I put inside /users/ css file or full folder is working href="css/bootstrap.min.css"
You can change the link to be the full path from your URL like this:
<link id="bs-css" href="yoursite.com/css/bootstrap.min.css" rel="stylesheet">
That should work from any page.
Try using href="/css/bootstrap.min.css" This should work no matter where your php or html file is located. This is called a relative path. So..
<link id="bs-css" href="/css/bootstrap.min.css" rel="stylesheet">
As long as css is a direct child of the root, this should find it.
I have created
a static html page in a play 2.2.1 project.
My public folder looks like that:
These are my stylesheet links:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/social-icons.css">
<link rel="stylesheet" href="assets/css/coming-soon-style.css">
However, when I open the site I only get the html.
I appreciate your answer!
UPDATE
My routes:
GET / controllers.Assets.at(path="/public", file="comingSoon.html")
GET /coming-soon_followUpPage.html controllers.Assets.at(path="/public", file="coming-soon_followUpPage.html")
Move all files/folders from /public/assets/ directory one level higher, so for an instance instead /public/assets/bootstrap it should be /public/bootstrap
As I can see you are using default route for assets, which means that every file/folder placed in /public folder will be available with assets/file or assets/folder within your templates.
If you are gonna to keep them in /public/assets/file.css style you just need to use proper path in your templates, ie.:
<link rel="stylesheet" href="assets/assets/bootstrap/css/bootstrap.min.css">
Anyway as you can see it doesn't make sense ;)
Hi you're linking in the wrong way your css files, you have :
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
With this you're searching on the same level the folder assets but that is the parent and you don't need to reference this then you only need:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
You also can try adding / at the begin of the path:
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">