I have a website with a multiple pages some of which are in a seperate directory. However, I can't seem to link pages in one directory to a css file in a separate directory.
I have tried the pasting entire directory and css/main.css.
//Here is the folder/directory structure of my project
home.html
css
--main.css
lines
--M51.html
--M50.html
--M53.html
Here is the HTML code I use to reference to the css in html file M51.html or any file in lines folder/directory:
< link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
When testing the html page in lines folder(M51 or M52 or M53), I see css is not applied and error "cannot resolve file css/main.css". How can I resolve this error?
It works fine on home.html but not on those inside the "lines" directory.
Since you have Css files stored in a different directory. Make sure you use relative file path to include css in the HTML:
<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
A relative file path points to a file relative to the current page.
Best Practice
It is best practice to use relative file paths (if
possible).
When using relative file paths, your web pages will not be bound to
your current base URL. All links will work on your own computer
(localhost) as well as on your current public domain and your future
public domains.
Copying an answer from the comments because it is the right answer:
Reference the file using this:
../css/main.css
for files in the "lines" directory (map). The two dots go up one level, where the "css" directory(map) is located relative to the current folder. Use the Relative Path for the external CSS file.
Related
I try to link style sheets in a file with html file in different directory.
At first html document and CSS file were in the same directory and it were working well, till I moved style to other directory.
<head>
<link rel="stylesheet" type="text/css" href="/styles/style1.css">
</head>
You should go back one directory back by ../. This way go to parent folder of these two files. Then start to go into css file's directory.
href="../styles/style1.css"
Its a bad approach for putting styles and html folder in different directory try to use them in same folder so that where ever your run your project either on server ,local or in different directory, it work well.
If you do that(in different folder on windows) its hard coded and in programming(whatever Lagrange it is) hard coded coding is not allowed.
Well i think you only need:
<head>
<link rel="stylesheet" type="text/css" href="styles/style1.css">
</head>
Also you can use 'base' tag:
For more info : https://www.w3schools.com/tags/tag_base.asp
I'm having trouble referencing an external css file in my file manager. My html page is in a folder called "homepage" and my css file is in a folder called "library".
Currently, I have
<link rel="stylesheet" href="library/homepagecss.css">
but that won't reference the css file.
My only option is to have the homepage html file and css file in the same folder but i'd like to have them separated for organization.
Anyone know how to do this in Domain's file manager?
You should either write an absolute path there, like
<link rel="stylesheet" href="C:/User/Documents/public_html/library/homepagecss.css">
(I am assuming your path to the current directory)
BUt if I understood well your both folders library and homepage are in the same folder called public_html you can try this one
<link rel="stylesheet" href="../library/homepagecss.css">
By entering .. you go up in the directory tree, you go up at the parent directory, and you need to go up at public_html cause there is where you library folder is located.
If the homepage of your site is at example.com, and your homepage is in a “homepage” folder, then the href you currently have is going to be looking for a file at example.com/homepage/public_html/library/homepagecss.css. And that’s obviously not correct.
You have two options to fix it.
Use an absolute path to the CSS file: href="http://example.com/library/homepage.css"
Use the HTML <base> tag to set your base path as your homepage in the <head> of your site, and then specify the relative URL in the link to your stylesheet: href="/library/homepagecss.css"
I have my website project in /home/username/project with index.html in it. index.html has to contain the following .css file /home/username/project/css/application.css, so I try to load it like this:
<link rel="stylesheet" href="/css/application.css"/>
I run index.html page on my localhost and see no changes. Browser developer tools show me that style sheet doesn't exist in /home/username/css/application.css. Of course, because it is in the project folder, why does host trying to find it there?
You need to specify that the folder containing the css file in nested inside the folder containing your html file by putting a . before the path.
So your line becomes:
<link rel="stylesheet" href="./css/application.css"/>
For additional info, if you want to go the folder containing the folder of your html file, you have to put ...
So, for example, if your css file was in /home/username/css/application.css, your line becomes:
<link rel="stylesheet" href="../css/application.css"/>
There is my problem:
Since I had some organization issues with my website, I wanted to arrange my files to a better classification.
Now, the folder tree looks like:
www
ressources
images
...
css
design.css
mypage1
index.html
mypage2
index.html
index.html
And now I don't know how to link the css file to the pages stored in a folder like the "mypage1" folder.
To start from my C: drive will will produce path errors once online, I tried the "shortcuts to the css file in each folder" solution too, but I think there is a far better way to proceed.
Need some help!
Thanks again!
use the link:
<link type="text/css" rel="stylesheet" href="../ressources/css/design.css">
here, used ../ going back folder..
You can use:
<link rel="stylesheet" href="../ressources/css/design.css" type="text/css" media="all">
The .. will go one directory top. Since the html files are in a directory (like mypage1), this will go to the parent directory, which is www. Then the next that should be done is to pass the directory path to your CSS file, which in your case is /ressources/css/design.css.
I'm currently working on updating a "legacy" website to xhtml/css, so that I can go ahead and proceed on a re-design. All of the pages have the header included via PHP. The issue is is that if I reference the style sheet from the header as "style.css" it looks in the current directory for the style sheet where of course there is no style sheet. Do I need to use an absolute path, or is there a better way to do this?
The line below should work in any HTML/PHP file in any directory, included/required or not, as long as the directory "assets" is in your home directory. I think i'm right in saying this is true for all "href" attributes (i.e. in anchors).
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
If you're including a CSS file with a PHP inluclude, you must know the relative path from every file in which you are running the include function - no absolute URLs are allowed.
The path to the CSS file is relative to the URL which you used to request the main PHP page (the one in browser address bar), not to the local disk file system path where the PHP page is located in the server machine. CSS files are namely loaded by the webbrowser, not by webserver.
So to figure the relative style sheet path which you'd like to use in <link href> in the HTML head, you need to know the absolute URL of both the PHP page and the CSS file so that you can extract the relative CSS path from it.