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
Related
I just started using html and css and I have to do something with it but I am getting the error Unable to open 'style.css'. I don't know what the problem is since the path that I used is the same as the file path.
Make sure the CSS file and the HTML file are in the same folder.
based on your image it should be
href="mywebs\site\style.css"
if you want to link site/style.css to mywebs/smth.html you should go one folder back.
<link href="../site/style.css">
or put the site folder inside mywebs, because based on the picture the site folder is not inside mywebs folder.
Sometimes the file may missed directory. You can close and open the code editor and it will work. Also, make sure your html and css file is in same directory. If you css file is in a different directory then use the following code:
<link type="text/css" href=".../style.css"/>
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 have made a .css file for a html i'm using in a dynamic web project. The css implementation clearly works because if i run the tomcat server from the html i can clearly see the css effect but if i run it from the main project it opens the same html page but without the css effect. How am i supposed to fix this? Do i have to write something into the web.xml file ?
This is the link tag in the html file
<link rel="stylesheet" type="text/css" href="style.css"/>
Am i supposed to add something else ?
it depends on location of css file. Your path will if css is in same folder as html/jsp file. If it is in sub folder in webcontent folder then use href="foldername/filename" if its in root folder then href="../foldername/filename"
I am attempting to use Bootstrap; I am downloading example pages to build off of from the Bootstrap website. When I launch them, however, they look quite crummy in my Chrome browser.
For example, when I load the narrow-jumbotron page, the jumbotron spans the entire screen... What am I doing wrong? I have the css, js, and font folders inside the folder that I've saved the narrow-jumbotron.html page in.
Any help would be much appreciated.
Please check the source url or path of the css and other files. Possibly this is creating problem.
Firstly ensure that you have downloaded bootstrap.min.css and jumbotron-narrow.css.
Place them in the folder you are having the html file.
After that find the following 2 statements in your html file.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
Replace them with these lines:
<link href="bootstrap.min.css" rel="stylesheet">
<link href="jumbotron-narrow.css" rel="stylesheet">
It looks like it's probably is a path issue. When you download the original bootstrap framework, you'll have a /css and a /js directory. How your new html files get access to those places depends on where you put those directories. I'm going to assume you have some bootstrap test area. Let's just call this your main bootstrap area or core file area, whatever.
After you set that up, you probably went back for the other download which has the /examples directory buried within it. The files in there are set up to deal with being a few directory levels down. When you went into the /examples directory folder, did you copy over the whole /examples branch? Or just one set of the example files?
Let's try this just as one example just to try to get things working. Then once you get it working if you want to mess with directory / folder organization and file paths, that's fine.
Go find the examples/theme directory, wherever you put it. In this /theme directory rename index.html to theme.html
Take the theme.html and theme.css out of your /examples/theme directory and put them in the root directory of wherever you have your bootstrap's root index.html file. Now your file paths to CSS files and such should be set to match what the index.html file is doing.
Go into the theme.html file and look for the lines with the ../../dist/css/ as suggested earlier.
But make them look like this... "css/bootstrap-theme.min.css"
This should now have these files getting called from the correct places. This alone should work for you.
There's still one issue though. You'll see in the theme.html file a link to "../../assets/js/ie-emulation-modes-warning.js"
You could just ignore this, but to really have things all in order, you need to get that path right. So, go find your original download of the examples and get the whole /assets folder and sub-folders copied into wherever you have your bootstrap root; that is /assets should be at the same level as /css and /js.
Once again then, fix the link to look like this "assets/js/ie-emulation-modes-warning.js"
This will hopefully get you going and give you a clear and obvious sense of how the file paths work. If you like going forward, put things into better directory / folder structures and re-do the paths. Remember if you wanted to on a real web server, (local or remote), you can always use virtual paths from the root so you don't have to keep track of the levels everyplace for such files.
In any case, I did just test this and ideally it will work for you as well.
Just place bootstrap.min.css and bootstrap.min.js in the same folder as carousel folder for example.
Then fix the path of the js file to this:
<script src="bootstrap.min.js"></script>
And fix the path of the css file to this:
<link href="bootstrap.min.css" rel="stylesheet">
Try to delete "integrity" part
Instead of this:
<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Make:
<link href="css/bootstrap.min.css" rel="stylesheet">
As integrity attribute checks whether code was changed.
That might help.
As of 2022 and the BootStrap version v5.2 the way to fix it is to copy paste the bootstrap.min.css file you get when you download the ready-to-use compiled code to the example folder you want it in and then change these lines from
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
TO
<link href="bootstrap.min.css" rel="stylesheet">
This must do the trick
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?