In localhost, my HTML connects to my CSS file and can read my images but not on GitHub pages.
Why? Am I referencing it wrong for GitHub pages?
<link rel="stylesheet" type="text/css" href="/css/loan_sharks_page.css">
<img src="/assets/img/LS_icon.png" width="300" height="300" />
I have also tried:
<link rel="stylesheet" type="text/css" href="./css/loan_sharks_page.css">
<img src="./assets/img/LS_icon.png" width="300" height="300" />
And I have tried:
<link rel="stylesheet" type="text/css" href="css/loan_sharks_page.css">
<img src="assets/img/LS_icon.png" width="300" height="300" />
Each time I pushed to GitHub, I waited an hour cause I know GitHub pages sometimes takes a while. All of these work on localhost but not on Github pages.
I think the problem is, that you can't upload a folder for images. Therefore your source for the image won't work. I put all images and HTML file at same hierarchy level and it worked fine for me.
for example,
type in your GitHub page URL on the browser followed by /index.html that should work.
If not check your href on your Html file & make sure it is correct.
Just remove the / before the path and make sure that you have the same folder and file name. It should be working without any problem.
<link rel="stylesheet" href="css/loan_sharks_page.css">
My page uses this code in the layout:
<link rel="stylesheet" href="/assets/css/main.css">
Next to the index.md (meaning the same folder level) file which includes the layout I have such folder structure:
assets/css/main.css
The slash (/) in front let the page search from the base folder.
My background image (also set in the css file) uses the slash, too (/assets/images/my_background_image.jpg).
My config.yml file defines baseurl: "" - this could also be an issue with your site.
See https://github.com/cadamini/cadamini.github.io
Find some more options to solve the issue in this SO post:
GitHub pages and relative paths
Related
I have a site published with GitHub pages:
https://safelyswift.github.io/Swizzle/
I want to use docs/css/style.css in my index.html file. I have tried using the full url, GitHub raw url, and shortened url but none of them work.
ie: I have tried many variations on this line:
<link rel="stylesheet" href="https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css">
<link rel="stylesheet" href="/Swizzle/docs/css/style.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/SafelySwift/Swizzle/master/docs/css/style.css">
but none work.
Getting error:
Did not parse stylesheet at 'https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css' because non CSS MIME types are not allowed in strict mode.
in Safari debug console.
Try: <link rel="stylesheet" href="css/style.css">
You should link to css/style.css, which is short of https://safelyswift.github.io/Swizzle/css/style.css because the root directory of your GitHub Page is /docs.
The reason "https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css" not work is because this link actually goes to the GitHub code preview page. It's not a valid CSS file but an HTML page with lots of GitHub functions(preview, commit log, history, etc.) But "https://safelyswift.github.io/Swizzle/css/style.css" is served by GitHub Page, so this link contains only pure CSS file which is valid.
To see the difference between these files. Just navigate these link with your browser, and right-click your page to see the source code. You can see what your browser sees there.
I have an index.html file and index.css. The directory structure is:
img of directory structure
I am linking the css to html with : link rel="stylesheet" type="text.css" href="css/index.css"
I am using tomcat v8.5 to host. When I run my project on server I see this in the window within eclipse:
browser displayed within eclipse
However when I open up chrome/firefox and search, it is only pulling the index.html and the css is not being displayed :(
I read that files have to be specified with "relative path", however, the folder containing index.css is in the same directory(WebContent) as the index.html. So what is the issue with href="css/index.css" ? Can someone please help me with the path issue?
Thanks so much for your time !
There is a slight mistake in the link tag. Replace type="text.css" with type="text/css":
<link rel="stylesheet" type="text/css" href="css/index.css">
I have a HTML file and a CSS file located in different directories in my PC.
in the head tag I use a link tag to reference my css file
<link href="C:\Users\UserName\Desktop\Web_testing\BGsample SS.css"
type="text/css" rel="stylesheet" />
this doesn't work
try using the file:/// protocol.
href='file:///C:\Users\UserName\Desktop\Web_testing\BGsample SS.css'
If that doesn't work (and you say it doesnt), then my guess is that it won't work at all due to it being prevented by security features in the browser.
It depends on where you are loading the main HTML content from, but if the main HTML is loaded from the internet then I can understand why the browser might object to loading the CSS from the client machine's local file system.
One final thing to try: You might try setting up a web server on your machine, putting the mystyles.css file into the web folder, and loading it into the page using:
href='http://localhost/mystyles.css'
I can't really suggest much else, I don't think.
Check your paths, Best practices is to always use a relative paths. Ex
If your stylesheet is called style.css the link should be:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have the css file in a subdirectoy (and the subdirectory is called styledirectory) the link becomes:
<link rel="stylesheet" type="text/css" href="styledirectory/style.css" />
If the css file is in the parent directory of the html file the links becomes:
<link rel="stylesheet" type="text/css" href="../style.css" />
.. goes up 1 directory, if you need two you could do: ../../
Sample Folder structure
Assuming structure is like that then,
<link rel="stylesheet" type="text/css" href="styles/BGsampleSS.css" />
Name files without spaces too.
You should be using '../' to move back in your path, and then into the directory with the CSS file.
Please always follow the CSS External Style Sheet way. In your case the CSS file cannot be located. Try adding \ before SS.css
<link rel="stylesheet" type="text/css" href="C:\Users\UserName\Desktop\Web_testing\BGsample\SS.css">
I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.
I usually read a lot and find solutions in here, but this time it seems I can't get this to work.
I have basic knowledge of html/css/js so this problem might have a banal solution which I can't see.
My website has roughly this structure at its root:
index.html
/css/style.css
/js/jquery.min.js
/folder/page.html
In my page.html head I have:
<script src="/js/jquery.min.js"></script>
<noscript>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</noscript>
(This is a simplified version, I have other css and js files)
The problem is that this way of pointing to a folder works with js but doesn't with css. If I take a look to the console errors, I see that the css file was mistakenly believed to be in /folder/css/style.css
I also tried using "../" and the same thing happens: works with the js but not with the css folder.
Is the <noscript> tag interfering somehow?
Thanks for your help!
Edit:
I SOLVED IT! There was a js overriding it all, telling which css to load according to the window size, so I corrected the paths in the js with "../" and now they all point to the root folder correctly! Thanks for somehow putting me on the right track! ;)
This should work:
<noscript>
<link rel="stylesheet" href="../css/style.css" type="text/css" />
</noscript>
Keep in mind that it will work only when you have javascript disabled. More info about noscript tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript