I have a base html file which I want all other pages to inherit certain charateristics from. But although my inherited pages eg. main.html can reference external links eg:
<link href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css" rel="stylesheet">
With no problem. But when I try to download the twitter bootstrap and store the file in the same directory as all the other html pages it cannot link to that file and it gives me a 404 error. My file structure is simple; a folder called templates with all the html, css and js files in this directory.
So i'm doing this:
<link href="bootstrap.css" rel="stylesheet" media="screen">
When I try to do this:
<link href="http://localhost/templates/bootstrap.css" rel="stylesheet" media="screen">
I get no 404 error, but from the view source on the web page, if I try to access that page I get an error saying:
Firefox can't establish a connection to the server at .
I'm really lost to why this 'simple' thing is not working.
Do you have a base tag inside your html? If so, it could be saying firefox a specific host where to find files, different than localhost.
Try use Firebug on Firefox or Chrome developer tools to see which URLs it's trying to retrieve.
Related
I want to put some Bootstrap code in website, I found some scripts, in file there are files with .map extension. I don't know how to upload them in HTML document. We connect CSS file from HTML file with following tag:
<link rel="stylesheet" type="text/css" href="/wp-content/themes/heatmap-adaptive.1.5.3/style.css"/>
and so, how can do some job with .map?
There are files with such names: bootstrap-theme.min.css.map
Those are source map files, they are used for debugging the CSS code after it has been minified. The browser reads them automatically if the source maps feature has been enabled in its dev tools and they are available in the same directory as the minified CSS file they point to.
So the answer is: you don't put them in the document.
I can't link my CSS or other files to my HTML. I always get the error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
And the strange thing is it works on the computer of my project partner. How is that possible? We have the same code.
This is the part of my code:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/register.js"></script>
<script src="/js/login.js"></script>
It's very difficult to know without seeing your directory structure. But it seems likely that removing the leading / from your file path will solve the issue. I'm willing to bet that you're unintentionally referencing an absolute path instead of a relative one.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/register.js"></script>
<script src="js/login.js"></script>
The leading slash tells that you want to link the files from a root. If you were viewing this page on e.g. http://www.example.com the files will be linked from http://www.example.com/css/bootstrap.min.css, even if your current page is http://www.example.com/folder/folder/page.html.
Since you're only using Windows without webserver, the root is C://. A solution would be to use relative paths instead of absolute paths.
For example:
<link href="css/bootstrap.min.css" rel="stylesheet">
In the previous example the file you link (with relative paths) will be in http://www.example.com/folder/folder/css/bootstrap.min.css if your current page is http://www.example.com/folder/folder/page.html.
Your URLs use absolute paths (i.e. they start with /) which makes them relative to the root of the website.
This is excellent when you want to write links that:
Work anywhere on the website, even if the HTML is shared between pages with different numbers of / in the path segments as your main navigation is likely to be
Work in both a development environment and a production environment
In this case it is failing because your development environment doesn't involve a web server.
You are loading the files into the browser directly from your local hard disk without going through an HTTP server. This makes the root of your website be the root of your hard disk (instead of the folder you are keeping the files in).
The solution: Install an HTTP server and tell your browser to fetch the files from http://localhost.
This will provide other benefits, such as being able to test Ajax code in your development environment.
I am testing an html webpage and it is failing to load a local jquery.json-2.4.0.js. I am testing the html page locally from chrome. When the page loaded I get a net::ERR_FILE_NOT_FOUND.
Why is it unable to load the file? This file has been moved from a different server (which it was working fine on), but the directory paths are the same (I double checked the path ).
Here is my line:
<script type='text/javascript' src='/webforms/ExperianEmailJsScripts/jquery/js/jquery.jsonp-2.4.0.js'></script>
Remove the first / in the path. Also you don't need type="text/javascript" anymore in HTML5.
This error means that file was not found. Either path is wrong or file is not present where you want it to be. Try to access it by entering source address in your browser to check if it really is there. Browse the directories on server to ensure the path is correct. You may even copy and paste the relative path to be certain it is alright.
I got the same error using:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900,900i" type="text/css" media="all">
But once I added https: in the beginning of the href the error disappeared.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900,900i" type="text/css" media="all">
Same thing happened to me. Eventually my solution was to navigate to the repository using terminal (on mac) and create a new js file with a slightly different name. It linked immediately so i copied contents of original file to new one. You also might want to lose the first / after src= and use "".
Sometime when you downloading a project from other people, they might have some special customization. So, in my case I downloaded this project https://github.com/thecodercoder/fem-easybank
And got these errors: Failed to load resource: net::ERR_FILE_NOT_FOUND
That happed because the creator was using the /dist folder customization.
https://youtu.be/aoQ6S1a32j8?t=309
SOLUTION: you open Notepad++ press: Ctrl + F for search
find all folders that starts with / as in the picture and replace with norma ones like:
/dist/ to dist
Instead of:
path.join(__dirname, '/dcp-electron/index.html')
you should add a dot at the start of the path, to indicate that the path is relative:
path.join(__dirname, './dcp-electron/index.html')
this can happen when you have the base tag, as explained in other answers
<base href="/">
I have created a mvc3 application which work fine locally. I work for a department where all websites sits under single url. when i deployed my website to test environment than page are coming up but all java script and content (images,css) folder path is not right.
I work for a department where all websites sits under single url eg https://abcd.test.hosts.network/application1 ,https://abcd.test.hosts.network/application2
When i check location of images it shows following path
http://abcd.test.hosts.network/Content/Images/Master/masterBannerLeft5.jpg
What should i do or how i should deploy my application to fix the problem of java script and content folder.
Are you using the following for referencing content files:
<link href="#Url.Content("~/content/css/normalize.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/content/js/jquery.js")"></script>
rather than:
<link href="/content/css/normalize.css" rel="stylesheet" type="text/css" />
See http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.content.aspx for the details, it basically resolves the path within your application.
I'm unable to reference external files (CSS/JavaScript) when they are located at a parent folder of the HTML file using PhoneGap Build.
The following example works fine:
<link rel="stylesheet" href="teste.css" />
But if the move the file to a parent level it doens't load it.
<link rel="stylesheet" href="../teste.css" />
or
<link rel="stylesheet" href="./../teste.css" />
just a guess but, so if you're using jQuery mobile, im assuming you're using the ajax as part of that. Now if that ajax is loading a page in to another page that is on the root of your app that means that technically that page no longer lives in a sub folder, thus the file should just reference the parent css as it would if it were on the root. Make sense?
so rather than
<link rel="stylesheet" href="../teste.css" />
just keep
<link rel="stylesheet" href="teste.css" />
I've debbuged the application using weinre and noticed that PhoneGap considered root as the folder where index.html was located
That being said, I've refactored the structure of my web application in order to index.html be located on the parent folder.