CSS and img dont read on Github - css

I'm trying to upload one project on github but CSS and img wont read.
I have tried to upload it 2 times, and checked that files names is written with small letters and are the same in the name of the file and the same in the html code but it still wont work.
Site was build using bootstrap, it is first time for me using BS so i'm not sure if it is because of that.
I am attaching link to a site and link to my repositorie on github. are you able to see what problem is?
Link to a site:
https://veljko-premovic.github.io/Tindog/
Link to repositorie:
https://github.com/Veljko-Premovic/Tindog
thank you in advance
Veljko

You are serving your images from a folder called images, but there is not such a folder.
The same with CSS, you are serving your styles.css from a “css” folder that is non-existent in your Github repo.
Either create those folders and add the images and CSS in them, or in every “src=“, remove the folder name.

Your paths are wrong, they all point to images/something.png but the images are in the same root folder as index.html so it should just be
<src img="something.png">
same for the css

Related

Icons not showing?

Icons not showing , So I've this problem.
I'm using some weather icons provided by erikflowers on github.
They are working and showing up fine when I've opened my app through the live server extension in Visual Studio Code. However, when I open my index.html manually from the folder, they are showing up as blank squares.
Anyone have any clue why this might be?
Thanks in advance
EDIT:
Directory:
<link rel="stylesheet" href="./weather-icons-wind.css">
<link rel="stylesheet" href="./weather-icons.css">
I did try changing to ./ no help
It says it can't find the files but they are there
Your pathing is wrong. As u wrote by urself in a comment -
"To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type ""<i class="wi wi-night-sleet""> "
You dont have a CSS directory.
Also look at your console error.
The route is wrong.. your Project Name is missing.
"../JavaScript/Projects/fonts/weather..", where is your Folder "Weather API"?
I would suggest to create a CSS folder (your styles.css stays in the project root), with your icon stylesheet files in it. That should fix your problems.
How are you accessing those icons? CDN? Or do you have them stored locally in some separate folder? Also, share your index.html and folder structure.
For example, you have them in a folder called icons, say a file called cloud.png. Then there are 2 ways to access them in your HTML file:
Using icons/cloud.png
Using ./icons/cloud.png
Both of these approaches work in Live Server, but sometimes we have to use the 2nd one when opening index.html directly or when hosting on Github Pages.
So try both of them and see which one works for you.

Can't find Wordpress Footer image url

I've been teaching myself Wordpress theme development and have a custom made theme on my website(made by another dev a while ago). I want to be able to download the footer background image but I can't seem to find the correct url for it. In the Style.css file the footer background image is declared as
background: url(images/layout/bg-footer-boards.jpg)
But mysite.com/images/layout/bg-footer-boards.jpg, mysite.com/wp-content/images/layout/bg-footer-boards.jpg, and mysite.com/themes/mytheme/wp-content/images/layout/bg-footer-boards.jpg all give me 404's. I think this is just something with the file path that I'm missing but any help would be much appreciated!
Css url() is relative to the file rather than the webroot.
So images/layout/bg-footer-boards.jpg
refers to a folder called images/ located in the same folder as your .css file.

The Images URL's doesn't show in my Home Page

Am using This bootstrap CSS design it works fine but the images doesn't appear. I took from its github repository the css file and the index.html.
i didn't make any changes, and am using it with my meteor project. I already added twbs:bootstrap package. Are there any packages i need to add to my meteor project?
why the images doesn't appear with me?
Those images does not appear because you just copied the index the css, you are missing the rest of the assets (where images are stored). But for your own images, you shouldn't have any problem to add them.

Rails: Stylesheet/view issue? Nothing is showing on the screen although there is source code when viewed in browser

I have a rails app with many partials for one view, each partial is a section in the view (one paged website).
I have put all my assets in the correct places etc.
below is a screenshot of how the actual page should look (outside of rails) (header, then section one which you can see, and there are sections below etc).
However this is how it is showing when done in rails
No images are shown for some reason, nor any content.
When I do not include the style sheet, all the content (writing) shows fine. When I include the stylesheet, everything disappears, its all white. However there are content there because I am able to scroll up/down.
Below is a screenshot of the structure of my files
I basically have all my images inside the image folder, but there are subfolders inside the image folders.
so:
assets (folder)
images (folder)
section_1 (folder)
image.png (file)
in my css, because my css files are inside the stylesheets folder, I call my urls as follows:
background-image:url("../images/section_1/image.png");
As for my views, it is basically one view which renders out each section (partial).
Try background-image:url("section_1/image.png");
This works in my rails project. However, I'm using compass, so it might be different.
I know what the problem is. But I still have one more problem.
The solution.
When calling an image from anywhere, even if you have a sub directory like I have, you simply call the url as follows:
background-image:url("assets/header/header_bg.png")
So you basically leave out the images folder for some reason.
The problem I still have is a routing issue.
In my assets folder I have a folder named fonts.
Inside this folder I have a number of folders, with different fonts in each folder (.eof,.ttf.svg) the usual font files.
When I type in the exact url of where these files are stored I get a routing error.
I also have a file called fonts.css in my stylesheet folder.
In the url if i put localhost:3000/assets/fonts which is the folder of the fonts I get a routing error.
Is there anyway in the routes file can I route the application correctly?
Both for the images and for the fonts?

my links to my external .css fail in aptana but work on the live web server; how can i fix this?

my problem i think is simply to do with my .css paths.
for example my file structure is as so:
(root folder) mysite:
-index.htm
-styles.css
within my index.htm code, i link to my style sheets with the following code:
/styles.css
Now, changing the pathway is not a solution, i need to keep it as above with the "/" to point it to the root first. As the webstie works perfectly online this way.
Is there anyway i can get the site to display my styles locally, some kind of setting?
I have messed for hours reading through the forums here, and playing with setting the root.
i just dont get why once i set the correct root it messes up the path to the style sheets. I am starting to think it is impossible to link a .css file with "/" in Aptana.
any help would be appreciated.
If you remove the / from "/styles.css" then index.html will load it correctly both locally and on your website.
You also might want to look into the html base tag:
http://www.w3schools.com/tags/tag_base.asp
This would allow your pages to always point to the css file that is live on the website.
You say that "changing the pathway is not a solution", please explain? A live example would be good too.

Resources