I have my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part
Related
PROBLEM SOLVED BY DELETING ALL THE FILES ON THE SERVER AND UPLOADING AGAIN MY WEBSITE!
Screenshot of the console error
Hi,
my website looks fine when I open it offline on my browser but after having uploaded it on the server when I go to the web address it only shows the text and images without any formatting and CSS.
I don't know what to do to fix this :\ What could be the problem?
If it can be of help here is the current folder structure of my website:
"public_html" >
css, img, js, mail, scss, vendor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>website title</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency-edit.min.css" rel="stylesheet" type="text/css">
<link href="css/adjustment.css" rel="stylesheet" type="text/css">
</head>
And here some scripts that are at the end of the "body".
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
Thank you
In your case, it can be:
Uncorrect relative location (your css and other files are not found by code, check paths of included files)
Files are not uploaded to server (try to upload them again)
I bet if you put a slash / in front of all of your local paths, things will magically work for you.
Explanation:
vendor/ looks in the current folder for the "vendor" folder.
/vendor/ looks in the root of the site.
../vendor/ looks in the parent of my current folder.
./vendor/ looks "here". (Side note: This is more useful within the server itself when files are referenced by other files in another location for server-side processing.)
If I take css script from this example W3Schools and I put it into 2 external css file (font.css and menu.css) and then I called them in html, the arrow from Dropdown menu disappear.
The content from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css is in font.css and the entire content of tag <style> is in menu.css.
I can't include web link because I don't have access to internet where I want to create this.
The code ended like this:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="font.css" >
<link rel="stylesheet" type="text/css" href="menu.css" >
</head>
<body>
<!–– Rest of the code...-->
</body>
</html>
its not enough to copy content of https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css to your css file! since there is some linked fonts and images that directed by "Relational Path"
in this case you have to use External CSS URL replaceing with your local css file
means;
replace
<link rel="stylesheet" type="text/css" href="font.css" >
with
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
or if you want to use offline , you have to download FontAwesome toolkit from
https://fontawesome.com/download
and use it in your source code
there is sample files in downloaded archive file...
I have this html file called register.html.
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Rancho" rel="stylesheet">
<!-- Custom css Style -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="hello">Hello</h1>
</body>
</html>
The css file is in the same folder as the html file.
This is the style.css file.
.hello {
font-size: 100px;
}
When I run the code it says that the resource style.css can not be loaded.
When I open the raw file using safari it work but when I use the flask server it doesn't work.
Whats wrong with my code?
style.css most probably is being resolved by the browser to something like http://your-server.com/style.css (implying you are viewing it from index.html from the root of your server), so if your file is not in the same directory or the web server is not configured to serve such files, the browser won't load it.
May be it's a path error. style.css are not available on that specific path.You can check complete error by inspect element on your browser console or in application logs too.
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I am trying to use a bootswatch Bootstrap template that you can find here: http://www.bootstrapcdn.com/#bootswatch_tab (The template is Amelia).
Do I only add this to my index.html document:
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">
or do I need to add these two as well to make it work:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
I figured I just needed the first piece of code but I need it to connect to my style.css document.
For Bootstrap, you need only these by default :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Depending on the theme, which you want to use, you will have to go through the source code to check what other external files have been used for layout(css) and visible effects(.js) for it
go through src and you'll find a url for amelia :
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">