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.
Related
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've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name
I'm taking a course on CSS3 and HTML5, and I ran into some trouble: my CSS folder isn't located in the correct spot... or something. I have no clue what's going on, but after a few hours of messing around, I went into the inspect element tool, and noticed some files aren't loading, so that's why my CSS isn't working! I attached an image, can you tell me what it means?
Also, where should my CSS file be? I'm using bootstrap and sublime text.
Thanks in advance.
Well, nvm on that image. It says I need 10 credits...
It says in inspect element:
Failed to load resource: net :: ERR_FILE_NOT_FOUND
CSS files can be called from a path relative to the document calling them. For instance, given you have a folder directory that looks like this:
/(your root directory)
-css
-bootstrap
app.css
-img
-js
index.html
-pages
pageone.html
...your css link in your index should look like this:
<link rel="stylesheet" href="css/bootstrap/app.css" />
whereas the link for pageone.html would look like this:
<link rel="stylesheet" href="../css/bootstrap/app.css" />
the ../ tells the server to look in a directory directly above the calling file for the path described in the link
With Bootstrap, are you using straight CSS, LESS, or SCSS? If you're using a pre-compiler, check your pre-compiler's settings file to ensure your compiled css files end up in the proper directory.
In sublime text for getting directory path please install a package called Auto File Name if you have a package control already installed in your sublime if not, the google package control and install in your sublime editor , auto file name lets you go well in your directory path and call your files.
I have encountered the same problem before. the external stylesheets is not recongnized !!
Failed to load resource: net::ERR_FILE_NOT_FOUND
If your HTML is in the root and your CSS folder is also in the root then your links are incorrect. You shouldn't have a slash / in front of the file name.
try:
<link rel="stylesheet" href="css/style.css" type="text/css">
see this
I am very new to CSS.
I am putting the following line in the header of my html, but CSS doesn't load:
<link type="text/css" rel="stylesheet" href="static/main.css" />
Basically my HTML doesn't see the CSS file. I am probably missing a very obvious point. My CSS file is in the "static" folder of my project and my HTML file is in the "templates" folder.
While writing this, I realized that I might be directing to the wrong path, but changing it to "../static/main.css" didn't help either.
Should I use SRC instead of HREF, when using this locally? Or is it something completely different?
Thank you for your help!
UPDATED:
The project tree is as follows:
|____.gitignore
|____app.yaml
|____appblog.py
|____appblog.pyc
|____README.md
|____static
| |____main.css
|____templates
| |____front.html
| |____newpost.html
I am linking to main.css from inside my front.html
You are giving the wrong route to the CSS file. It is currently looking for the file in templates/static/main.css, which doesn't exist. You need to add ../ to back out of the templates directory, and then head to the static directory.
Example:
<link rel="stylesheet" type="text/css" href="../static/main.css">
If the directory structure is in your root directory, you could also link relative to root by adding /. This will start in the root directory, and then look for the static directory.
Example:
<link rel="stylesheet" type="text/css" href="/static/main.css">
Also, make sure you are adding that in the head of the document.
The answer was somewhere else:
I am using Google App Engine for the app development and I should've included the following under -handlers:
- url: /static
static_dir: static
Thank you for all your helps.
Chrome browser: Open developer tool (F12) and look at right top of the panel, or click "Console" tab, if the develper tool console return Not found error with your main.css file then check your css path. You can try to locate html file and css file in one directory and then change link tag to
Can you show me how did you open the html file? direct click on the html or browse through webserver project?
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.