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.
Related
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.
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 may be using subdomains incorrectly here instead of using sub directories, but I want to import the same CSS into my subdomain (hire.joeisaacson.com) from my main domain (joeisaacson.com)
The current file structure is below
public_html (where joeisaacson.com points to)
-index.html
-css
--style.css
-hire (where hire.joeisaacson.com points to)
--index.html
I want to access style.css from the "hire" folder instead of creating a duplicate and having to updated both.
using ../css/style.css from the "hire" folder doesn't work, because it searches within hire.joeisaacson.com and not joeisaacson.com
When you have a case that the same source code will be used at different nesting levels (like /index.htm and /hire/index.htm or different domains you might want to consider the HTML BASE tag.
<base href="http://joeisaacson.com">
<link rel="stylesheet" href="/css/style.css" type="text/css">
This will fetch the CSS from http://joeisaacson.com/css/style.css regardless of where the HTML page is served as long as you realise it will do this for all external resources (images, css, js, etc).
Just be sure BASE tag is inside HEAD and comes before any linked content. You also do not close this tag in HTML (so no </base> or <base /> is expected)
you should provide absolute path in that case for including on subdomain. It should be looking something like :
http://joeisaacson.com/css/style.css
I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.
I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp
<link rel="stylesheet" href = "css/styles.css">
I'm having no luck getting my css to show...
what am i missing?
The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.
One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
This will end up in the generated HTML output as follows:
<link rel="stylesheet" href="/yourContextPath/css/styles.css">
This way the browser will be able to download them properly.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.
If your app context path is for example "myApp" then you can do something like this to make it work:
<link rel="stylesheet" href = "/myApp/css/styles.css">
If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp
Then your link tag would be
<link rel="stylesheet" href = "../css/styles.css">
Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.
Hope this helps!