External CSS file not loading in HTML file
Question
I'm trying to use loading animation using jQuery. I've tried different paths for css file like
<link href="css/animation.css" type="text/css" rel="stylesheet">
<link href="../css/animation.css" type="text/css" rel="stylesheet">
but still CSS file is not getting loaded in the html file. When I kept the CSS file in the same folder as the html file then it worked correctly.
My folder structure ...
index.html
<html>
<head>
<title>Loading Animation using jQuery</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.js"></script>
<link href="css/animation.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="loader">
</div>
<h2>Hi There</h2>
<script>
$(window).load(function(){
$("#loader").delay(10000).hide(0).fadeOut("slow");
});
</script>
</body>
</html>
animation.css
#loader{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
}
The js files are being loaded correctly but the css file is not..Can't understand where I'm going wrong..
7 answers
solution1
2 ACCPTED 2015-12-09 07:15:12
There should not be any problem with loading your CSS file,
since the folder CSS is in the same directory level as your HTML file.
But the image thats being used in the CSS file is one level up from your CSS file.
Try changing
background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
to
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
solution2
0 2015-12-09 07:09:00
Open your project in editor, go to the folder where your css file is there. Drag and drop your css file on to the code. It will automatically generate the path for you. Hope this will help.
solution3
0 2015-12-09 07:11:05
Open your developer tools, in the network tab - select the CSS option. Should should see something like the image below.
In your case it should be 404, you can copy the full link that is request by the browser and debugging and fixing then will be easier for you that way.
solution4
0 2015-12-09 07:12:45
i saw ur folder structure as per your structure following is right link of your external css link.
and also check animation.css is available in css folder
solution5
0 2015-12-09 07:17:51
if you are running this application in chrome browser. Just press clt+shift+j OR F12 to see the error. Like the attached image you can see the error on console tab, just fix that
solution6
0 2015-12-09 07:18:59
You can give reference to your CSS file using below code
<link href="css/animation.css" type="text/css" rel="stylesheet">
But you have to modify your CSS file
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
solution7
0 2015-12-09 07:20:16
You need to determine first whether the CSS file is actually not loaded by checking the network tab as Yasser stated .
- If the CSS is not loaded, then you need to check if the CSS file animation.css actually exist in your CSS folder.
- If the CSS is loaded, then, take help of developer tools to understand what CSS is being applied. If there is a trouble in that, please share the same.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.