Any idea why github pages stoped loading css and images in subfolders, it works fine on the root of the site.
When i checked the source code of the page, i see this
"href="css/bootstrap-3.3.6/css/bootstrap.min.css">"
instead of
"href="/css/bootstrap-3.3.6/css/bootstrap.min.css">".
In my config file I have a line
baseurl : /
--> crowd42.github.io
Thanks
It should work the way it is baseurl : "/" if when loading assets you use that variable:
<link rel="stylesheet" href="{{site.baseurl}}css/main.css">
As it seems that you aren't using base urls, you can try forcing the root path with a slash at the beginning:
<link rel="stylesheet" href="/css/main.css">
Or including the absolute path:
<link rel="stylesheet" href="{{'css/main.css'|absolute_url}}">
with baseurl: "".
Related
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
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 import my stylesheet with this line on the html
<link href="styles.css" rel="stylesheet" type="text/css" />
it works fine when I drag-n-drop the file into the browser but when I load trough AppEngine it doesnt take the css file or the pictures that are located in a child file
Can you show your app.yaml and your folder structure? Is that Python, Java, PHP, Go?
If its python, you should use a folder for your static files, add a handler for this folder in your app.yaml file:
handlers:
- url: /static
static_dir: static
And then link it as:
<link href="/static/styles.css" rel="stylesheet" type="text/css" />
For more info take a look at https://developers.google.com/appengine/docs/python/gettingstartedpython27/staticfiles
I am having this issue here:
http://arflux-rpg.com/game/index.php
On line 5:
<link type="text/css" rel="stylesheet" href="/src/style.css">
The stylesheet exists (and is populated in correct syntax), I am linking correctly, and yet the styles fail to apply.
EDIT: Removed clickability of link as it's generating Google malware warning.
You actually mean to link to
<link type="text/css" rel="stylesheet" href="src/style.css">
Starting your url with / will treat it like an absolute path from your domain, without the slash it treats it as a relative path from the current directory.
Replace
<link type="text/css" rel="stylesheet" href="/src/style.css">
with
<link type="text/css" rel="stylesheet" href="../src/style.css"/>
Hope it helps
Your stylesheet may exist, but not under that path. Try to access it directly at http://arflux-rpg.com/style.css - you'll get a 404 Page Not Found error.
Check your path - you're specifying an absolute path with the leading /, so make sure the stylesheet is actually located in the "src" directory directly under your document root directory.