When opening a file from your hard drive into your browser, where is the document root? To illustrate, given the following HTML code, if the page is opened from the local machine (file:///) then where should the css file be for the browser to find it?
<link href="/temp/test.css" rel="stylesheet" type="text/css" />
You can, but probably don't want to, set the document root on a per-file basis in the head of your file:
<base href="my-root">
It depends on what browser you use, but Internet Explorer, for example, would take you to the root directory of your harddrive (eg. C:/), while browsers such as Firefox does nothing.
On a Mac, the document root is what you see in the window that appears after you double click on the main hard drive icon on your desktop. The temp folder needs to be in there for a browser to find the CSS file as you have it written in your code.
Actually, you could also write the code like this:
<link href="file:///temp/test.css" rel="stylesheet" type="text/css" />
Eric, the document root is the folder in which your file is, wherever it may be.
As far as local, static html goes, unless you specify it, most browsers will take the location of the html file you are viewing as the root. So any css put in there can just be referenced by it's name only.
The lazy way to get the correct reference for your css file is to open it in your browser. Then just grab the url that you see there - something like: file:///blah/test.css and copy that into your stylesheet link on your html: <link href="file:///blah/test.css" rel="stylesheet" type="text/css">
Either that or you can just take the url for the html file and amend it to refer to the stylesheet.
Then your local page should load fine with the local stylesheet.
If you're interested in setting the document root, you might look at getting a web server installed on your machine, or, if you already have one (like Apache or IIS), storing your project-in-development in the web root of that server (htdocs in Apache, not entirely sure in IIS). If you'd rather leave your files where they are, you can set up virtual hosts and even map them to addresses that you can type into your browser (for example, I have a local.mrwarshaw.com address that resolves to the web root of my personal site's development folder).
If you're on Windows and don't want to mess around with setting up a server on your own, you could get a package like XAMPP or WAMPP, though bear in mind that those carry the extra weight of PHP and MySQL with them. Still, if you've got the space, they're a pretty easy drop-in development environment for your machine.
Related
I was making a new path for pages on my site and was trying to figure out how to path to my stylesheet and images cleanly. Here's an element that shows my problem:
<link rel="stylesheet" href="/src/styles.css">
My local copy of my site is hosted here at "E:/Documents/WEBSITE", the local page I'm trying to link the stylesheet from is "file:///E:/Documents/WEBSITE/things/weapons.html", and the stylesheet is at "E:/Documents/WEBSITE/src/styles.css". I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet. When I upload a version of the site that has the same path, it works correctly.
I have the local site open on Firefox and I am using VSC to code. When I follow the href path in VSC, it brings me to the correct stylesheet.
I've looked over the code and made sure it would(and does) work otherwise. Like I said, it works when on the live site.
I've placed dummy "src" folders with "styles.css" in them on my base E drive, my Documents folder, and even in the "things" folder itself. If the href were pulling from any one of these, there would be an obvious change to the local site, but none of them are pulled from with that path.
When I upload a version of the site that has the same path, it works correctly. The same happens with some elements that I tried this with the src on. It simply will not work locally. The only other thing I can possibly think of is that it has a problem with the "file://" at the beginning, but I can't imagine how I would troubleshoot or avoid that. I get no errors logged.
I really can't include a reproducible example of code, but what I've done that works locally and on a live site:
<link rel="stylesheet" href="../src/styles.css">
and to reiterate, this doesn't work locally, but it works on a live site:
<link rel="stylesheet" href="/src/styles.css">
And just to clarify at the end here, the path is working when the site is live, but not locally. Not the other way around.
href="/src/styles.css" is an absolute path, not a relative one.
From file:///E:/Documents/WEBSITE/things/weapons.html it maps to something like file:///E:/src/styles.css (I think Windows file paths preserve the drive, but I'm not certain).
The browser has no way of knowing that you want file:///E:/Documents/WEBSITE/ to be the root directory of the site. The root is determined by stripping all the path information off the URL, not just parts of the path.
Absolute paths are, generally, not suitable for links used on a local file system.
Use an HTTP server. There are many free ones you can use for testing. VS Code has an extension called Live Server that makes it easy to run one.
This is a really basic one, I'm afraid, but it's driving me crazy.
I'm making a website using NetBeans. I have my index.html in the Site Root folder that NetBeans gives you, and when I test it with the Chrome plugin, it comes up successfully.
However, if I load CSS by absolute path, <link rel="stylesheet" type="text/css" href="/layout.css" />, it doesn't load properly, because NetBeans runs the local server within a folder with the same name as the project.
What I mean is, instead of NetBeans loading the website from http://localhost:8383/index.html, it instead loads it from http://localhost:8383/ProjectName/index.html and breaks all the paths.
The "site root" setting is set to public_html, which contains index.html directly.
This is the annoying kind of problem to which there is probably a really easy solution that I'm missing. Any help is very much appreciated!
Have you tried using a relative URL to the CSS file?
Like:
<link rel="stylesheet" type="text/css" href="layout.css" />
Note! This solution is working for one Neatbean project (site) at a time so it is not ideal but maybe good enough for many others. If someone have a solution that works for multiple projects I'm very interested in that solution as well.
Set your server configuration to serve documents from your Netbean project folder, in XAMPP it looks like this.
Set your Netbean project URL to "http://localhost/"
Now links starting with "/" will lead to your root as expected but if you switch project you will also need to do step 1 again.
Apache Netbeans 12.1.
Right click on project - > Properties - > Run. Set Web Root to /
Benefits: paths relative to the root are properly working.
Disadvantages: impossible to work on several projects simultaneously.
I'm building a website locally using Apache, MySQL and PHP. I have different subfolders and I'm trying to give one absolute reference to my css file from my main header.php includes file.
Inside of header.php I have:
<link href="/Users/nicolauria/Sites/sd/css/style.css" type="text/css" rel="stylesheet" />
The css file does not load correctly. Developer tools gives me this message "The requested URL /sd/css/style.css was not found on this server."
Any help is greatly appreciated!
Nico
You're loading this via HTTP? Then you're bound to use only "http-space" paths, which means you can NOT include the site's document root in urls. e.g.
your site's files are physically on the server in /home/sites/example.com/html, which is defined as the document root of the site. When you visit the site and request a file, e.g. http://example.com/foo/bar.html, the web browser will send over:
GET /foo/bar.html
and the webserver will tack on the document root, producing
/home/sites/example.com/html/foo.bar.html
But note that this path applies ONLY within the webserver itself. It will never be accesssible to you in this form. You can only specify directories/files within the site's document root. That means if you requested something like example.com/home/sites/example.com/other/file.html, you'd force the server to produce /home/sites/example.com/html/home/sites/example.com/other/file.html, etc...
If you want to provide an absolute URI then you must:
Include the scheme (file://)
Accept that many browsers will refuse to load file: data onto a page loaded via http:/https: for security reasons
Accept that users on other computers won't have access to your filesystem
It is far, far better to host all the resources you need on the webserver.
In Which location your header.php file is located? I mean If you have your header.php file in sd folder than use your code like this <link type="text/css" rel="stylesheet" href="css/style.css" />
Maybe this link will help you alot
http://www.htmlhelp.com/reference/css/style-html.html
I have a huge problem: Everytime I want to include a file in any kind of web project it does not work because for some reason all paths I put into the (for example) html file as a link or script tag don't load because it seams like the relative paths are not working. If I open the html as a file in chrome, it's actually looking for the file in the root directory of the drive and not in the folder of the html. The same error appears if I try to use any kind of local webserver (real hosted server works). I also downloaded any kind of demo projects and installed a few yeoman generators and the all got the same problem: Chrome says that it cannot find the file or it's just an empty file.
That's the reason why I think the problem has to do with my own pc. Any ideas what could cause this issue?
If your URLs for includes start with /, they will go to the absolute path. When testing locally from your filesystem, this is the root drive (such as C:\). If you want relative path, drop the /.
Also, check for the following tag in your HTML: <base href...> See http://w3schools.com/tags/tag_base.asp. Make sure it's not set to / if you're testing locally.
This <base> tag helps shorten potentially lengthy relative paths. For example:
<script src="resources/production/script.js"></script>
If you add <base href="resources/production/"> to the <head> element, you can shorten your script tag to src="script.js"
Beware ALL relative paths will have their root at resources/production/ if you define it in your <base> tag
My goal is to have a page, served by a web site, containing a to a stylesheet, that is available not on the web site, and not on a different web site, but on a local drive.
Something like;
<!DOCTYPE html>
<html>
<head>
<link href="/styles/something.css" rel="stylesheet" />
<link href="file:///C:/custom.css" rel="stylesheet" />
</head>
My initial research shows that browsers don't seem to support this, but I'm willing to be proved wrong, or discover some sneaky way of doing it. (I tried the above, that doesn't work.)
[I know, I know, you wanna know "why". This is for the site designer - it would allow him to edit the css locally while designing and see the effect on the "semi-live" site. ie the round-trip for edits would be very fast, and I wouldn't need to give him access to the actual site. By extension, for teaching purposes, it would allow multiple people to simultaneously practice their CSS skills locally]
Obviously any edits made to the local file will only be visible on that local computer - that's the whole idea. If you had 10 students each would see the same site with a different css file.
Well, if you can setup Apache on your machine, this is easily done.
This is assuming the question is this
I want to be able to have a site in a
central location (live) and allow users
accessing that site to be able to make
changes to the site by editing a local
file. These changes will only be
visible to the person making the
change and the rest will just see
whatever CSS is on their local copy.
So this means that you have to serve a local file from multiple computers and each person viewing the site may have a different looking copy. If I'm right, read on.
Setup a local environment (maybe with WAMP?) on all the machines you want to be able to allow local edits. The important thing is that everyone must have the same hostname defined (either localhost, or something else - don't forget to add it to your hosts file). Place the CSS file inside your webroot and add a link to your live site pointing to that link.
<link href="http://www.mysite.com/base.css" rel="stylesheet" />
<link href="http://localhost/custom.css" rel="stylesheet" />
And voila! Local editing.
Caveats
Everyone needs to have their files placed in the same local URL otherwise it won't work
You need to setup a local environment (very easy)
Just press Shift+F7 on Firefox (or Tools->Web Developer->Style Editor). In the window that opens you can import an entire file or you can also edit the styles loaded.
Obviously, you can't. But why not try it and find out if this didn't work?
If the purpose of your needs is only for testing, i'll advice you install web developer extension where you can add local CSS to a website - for testing only.
Just for the purpose of answering the question, yes he could serve a CSS file to your website, but he would have to have a server installed on his computer and a public access to his server IP.
Then in the href of the stylesheet you would write something like <link href="190.181.169.118/styles.css" rel="stylesheet" />.
Of course this is not the recommended solution, i would advise you to use some sort of browser extension / plug in for that.
Yes you can!! Just need Firefox as a browser and you also need add on WEB DEVELOPER installed on it...
It allows to disable the inline CSS and add user CSS...
Download the add on WEBDEVELOPER
Once installed...after you restart firefox you will get a menu on the firefox window in which click on the CSS menu which will allow you options to disable and add user CSS
You will have to disable the inline CSS to see the CSS applied by the user to full effect