Basically I'm going to be working on PHP for my website but I put it all in the htdocs. Now it won't load any of the files including the JavaScript.
This is the css link
<link rel="stylesheet" href="file:///C:/xampp/htdocs/Website/CSS/Home.css" type="text/css">
Use Relative path: usually absolute path possibility to break or not show output
<link rel="stylesheet" href="CSS/Home.css" type="text/css">
Related
The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag
I have a ASP.NET MVC project which uses JQuery Datatables to show a table.
The problem: the css stylesheet isn't applied when links to local css file. I've tried the following:
<link rel="stylesheet" type="text/css" href="~/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="Content/datatables.min.css" />
But this one (at the same place of my HTML) is working:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
Even current sorting column highlight from this css doesn't work!
Of course, the CSS file exists in my project's Content folder, and its contents is totally the same, because I even try to copy the file from https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css and put it in project's Content folder.
So, the question is why doesn't the first HTML link snippet work?
Maybe, a bug in the MVC (it's up to date)?
jQuery DataTables distribution includes CSS, JS and image files (in the images folder).
Use Download builder, select Download tab and download all required files.
Also you should not use ~ in your URL. Most likely that is the reason why CSS is not applied. Use absolute URL /Content/datatables.min.css or relative URL Content/datatables.min.css instead.
my css is not working correctly on my github page. This is my repo. This is my website. I created this portfolio website without Github pages and it works correctly. I am very new to github , so there is a good chance I'm missing something. I usually localize all my css/jscript but for simplicity reasons I changed all my css/javascript to the html link.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
</head>
I had the same problem with my HTML file and my CSS file. I fixed it like this:
I had a repo with the index.html and a folder call "style" with the style.css file in it.
Deploy my index.html with the link tag within the head tag like this:
<link rel="stylesheet" href="./style/style.css" type="text/css">
Pay attention to the href attribute: "./style/style.css".
Andy.-
Like #TarasYaremkiv mentioned remove your './css/bootstrap-3.3.7/' folder.
The reason why it's happening is because Jekyll engine is looking for the includes present in the file 'bootstrap-3.3.7/docs/components.html'
For example: this file {% include components/glyphicons.html %} is not present in the components directory of your bootstrap folder. Hence the error.
You can avoid these kind of error's by downloading only the necessary compiled files or use cdn links
Change
<link rel="stylesheet" type="text/css" href="css\main.css">
to
<link rel="stylesheet" type="text/css" href="/css/main.css">
original post - External CSS not working with Github Pages
I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
Doing a website for a client and I merely changed the name of the css file in the folder and in the references on each page. And suddenly all my styling is gone. I've checked multiple times for spelling errors and it's all correct and I do believe I have referenced it correctly as it was working previously under a different name. My Question is How can the changing of the css file suddenly stop it working if it's still referenced correctly? Could it be that bootstrap is overriding it somehow?
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script><!--Reference Bootstraop.min before plugins.js but after jquery.js. We alterbootstrap javascript with plugins.js -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</head>
Here is the <head> for my index html file.
The problem only occurred when I changed the file names but I can't leave it as "TestLayout" when it is a completed project. Any help is appreciated and I can supply what I can to help find the solution. Thanks in advance.
First off, a small tip: Load your custom CSS-file AFTER the bootstrap.css file. This way you can ensure that your styles are easily overriding the defaults of Bootstrap, so you don't have to bash in !important in order to change something.
And for your question, have you accidentally removed css/ from the beginning of your style.css? Since all the other CSS styles you have linked are under the CSS-folder.
Double check that, otherwise it should work, the name is valid.
If the path to your CSS file is still correct (and you haven't inadvertently removed the folder from the file path as per ProDexorite's answer) then you might need to completely refresh your browser.
You can do this with CTRL+F5 or to be completely sure you can empty your browser cache, although I usually find this isn't necessary.
ProDexorite is also correct regarding the CSS files - it's called Cascading Style Script which means any styles in the files you load last will overwrite the files loaded before. Therefore any custom CSS (main.css and style.css for example) should be loaded AFTER the Bootstrap or any other library css files. This just means you need to reference them in the right order in your page that's all.