I created a portfolio using github pages but the images and the css in the site won't load.
<link rel="stylesheet" href="../css/style.css">
<img src="../avatar/avatarmakercolor.png" class="avatar">
This how folders are organised
docs
index.html
avatar
avatarmakercolor.png
css
style.css
I have tried to change PNG to png and remove all the capital letters from my files but nothing has changed.
You are using the wrong path.
Change the link tag to this:
<link rel="stylesheet" href="../css/style.css">
And the image tag to this:
<img src="../images/image.png" class="avatar">
This is based on the info you provided about the folder structure. Change as needed
Related
I made a portfolio page in Codepen and i'm trying to publish it with Gihub Pages.
I'm not able to make my CSS work. This is the link I made for the stylesheet:
<link rel="stylesheet" type="text/css" href="css/style.css" />
And this is the link for the repository: https://github.com/IgnacioGR/IgnacioGR.github.io
I'm new in this so i'm sure I missed something.
Your "css" file has a error, the file extension is "ccs" not "css"
look
I have this in my index.html
<img src="img/splash.png" class="center"/>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
The styles and img folders are both in the 'web' folder.
The splash.png file is found, but for the css file I get this:
The stylesheet https://myapp-24b9f.web.app/forms/styles/styles.css was not loaded....
The url I'm loading is: https://myapp-24b9f.web.app/forms/somepage
Why is the image searched relatively to the 'web' folder, and the css file relatively to 'forms'?
I moved this to be the first line in the and it solved it:
<base href="/">
I am trying to create a custom logo for my website through a .png file, as soon as I type in the code and test run it through local host, the file does not display the logo image.
Renaming the .png file
Checking for spelling
Checking for capitalization
Tried adding a "-" inbetween ("holyland-logo.png")
Tried adding a color brown ("images/brown-holylandlogo.png")
<html>
<head>
<title>HolyLand Souveniers</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="top-nav-bar">
<div class="search-box">
<img src="images/holylandlogo.png" /> (This is causing the issue)
<input type="text" class="form-control">
<!--This is a search box -->
<span class="input-group-text"><i class="fa fa-search"></i></span>
<!--Search Icon -->
</body>
</html>
I expected the logo to appear on the top left of the website, but is it not doing anything, is it only giving me an X with no .png logo picture.My file pathing and folders as requested in the comments
If you don't put an / at the beginning of the image URL (relative path) the server expect to have the images folder next to your index point (index.html/php) but if you put one at the beginning (absolute path) it tries to go from the root of your Apache/nginx. Just to clarify.
In your case that means, you need to make sure the images' folder is next to your index.html or index.php.
Another tip: avoid spaces between the = in HTML and place your style after external styles in case you want to override parts of those.
But please give us more information about your environment, so we can help better:
Where is you site hosted (locally/provider)
Which is the URL you tried to access or file
Your folder structure
Your setup (OS, apache/nginx, PHP...)
According to your screenshot the HTML file and the PNG file are in the same folder, so your file path is wrong: In the img tag, instead of src="images/holylandlogo.png" just write src="holylandlogo.png" .
I've clicked on your public link and looked at my Chrome console logs:
Failed to load resource: the server responded with a status of 404 (Not Found)
for following resources:
style.css
holylandlogo.png
favicon.ico
https://apollo.waketech.edu/~smbannoura2/holylandlogo.png shows the image, so
<img src="holylandlogo.png">
should work for your html page.
For style.css and favicon.ico, check the file path as suggested in previous answers
I solved the problem by adding <img src="holylandlogo.png"> instead of what i originally had <img src="images/holylandlogo.png" /> since i had the logo in the same file. Thanks to a reply in the comment that Esdee stated. For more details you can read throughout the post on what other things i tried.
you need to put the images folder with the image in the source files of your website. Otherwise, use the original website link for the image
I have a private (not public) website. In this website I want to use Lightbox2 (image gallery), but when I run lightbox2, the links of my home page and my background picture don't work.
There is a style.css in my template, and there is also one in lightbox2. I think this is the problem, but I'm not sure. Can anyone help me please?
Simply load in your own stylesheet and the one lightbox uses in the header
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/my_style.css">
At the end of the page you must also load in the javascript that comes with lightbox:
<script src="js/lightbox-plus-jquery.js"></script>
Don't forget to set the right attribute for all your pictures:
<a href="./pic.jpeg" data-lightbox="lightbox">
<img src="./pic.jpeg" style="width:100%">
</a>
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>