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.
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.
First of all, I'm using Chrome browser for development.
I have placed the files in the following order:
In Markup, I placed its reference like this:
<link href="App_Data/css/bootstrap.min.css" rel="stylesheet" />
This is the original path: root/App_Data/css/bootstrap.min.css.
The file is available at the path, but still, the browser can't find the file with an error shown in the picture below:
I am confused. Why is it not able to find the file from the correct path? :S
What mistake am I making? (My previous question was also about the path. I tried following my last question's guide, but that also is not resolving this issue. Please look into it and tell me the possible issues. Thank you).
App_Data is not typically used to publish web content, and is not published by default.
I'm sure App_Data is a special folder in MVC, consider moving the files in to a "content" folder or something (as is the standard).
Also try prefixes like "./" or "/" or "../" as depending on the url of the current page you may want to have a different path for these resources or always generate one that's relative from the root of the site.
I've just found a solution with the help of someone who commented here but deleted the comment. He was correct! I couldn't see his nickname. I'd prefer him to answer, i'll Tick his answer.
APP_data folder in asp.net doesn't let browser load Css and JS files as this folder is standard for Class files e.g. ( abc.cs ) .
I just moved all of these files in a new folder i created with the name Content and moved all css and js files in it, referenced it in Html and it worked like a charm.
Try relative path as below, it might help you-
<link href="../css/bootstrap.min.css" rel="stylesheet" />
You have to start with the root of your application.App_Data is just a folder in Microsoft Visual Studio context.Once you publish your app it will not be the same.
For your question, this would be the solution:
<link href="/css/bootstrap.min.css" rel="stylesheet" />
This will resolve the path from the app root.
I'm just getting started with Octopress; pretty green on web development, and I'm having the following issue:
When I run rake generate to make my octopress page, it mostly generates everything fine but it's not giving a good reference to the .css file. Here is the link it generates:
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
This leaves my index.html page with bare html formatting. But if I change the link to read:
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
it works. All I did was take out the forward slash.
My question is this: what do I need to change for rake generate to put the proper reference in the html file?
A slash in front will point to the root directory of the project.
Whereas without slash, it will point to the current directory of the HTML file
So if in your case, project structure is:
Project/something/index.html
Any link with "/stylesheets/" will point to a folder in the Project directory. ie it will look for "Project/stylesheets"
Whereas a link with "stylesheets/" will point to a folder in the something directory, which is the current directory of the project.
You need to edit your Rakefile.
I wrote an article about Rake commands in Octopress here:
http://www.tomordonez.com/blog/2013/03/12/rake-commands-in-octopress-on-github/
Inside your main Octopress directory there should be a file called "Rakefile"
Open this file and look for this line:
desc "Generate jekyll site
task :generate do
In here there is a line that says:
system "compass compile -css-dir #{source_dir}/stylesheets"
The source_dir is assigned toward the top of the Rakefile where it says ## Misc Configs ##.
It should say:
source_dir = "source"
I gave you almost all the solution. Put these together and try it out to see if you can make it work :)
Since you're new, I'll give you some ideas as to how this can work
--
Assets
Firstly, when you make use of the asset piepline in Rails, it does a lot of the work for you. Specifically, the stylesheet feature is very well documented:
<%= stylesheet_link_tag "screen" %>
If your page has hard-coded references to your stylesheets, it's going to cause all sorts of compatibility issues down the line (with production etc).
I know this is not an answer to your question directly, but you need to ensure your HTML files are making use of the Rails helper methods - these create dynamic paths, which your app will automatically follow
--
Generate
As for your generator, I've got no experience with octopress
If the gem is not written by you, I would not worry about the generator too much. Having written my own gems & other software, it's very difficult to create a system which works for every single system
If you have the ability to change the path yourself (after generation), I'd do that, and raise an issue with the author on Github
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
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.