When previewing my pages with a live server everything works fine.
but when I tried to open my index file from local it didn't show CSS or anything.
and when click on navigation that links to another page it shown "File not found"
first of all, please provide code with your question. Second of all, I had this once happening to me, I fixed it by changing (this is an example) /CSS/style.css to ./CSS/style.css
So you basically put a dot in front of it. Please let me know if this helps.
Related
I'm working on an assignment for a class where our teacher has given us a webpage built out with html and css. We are eventually supposed to create some animations with gsap, but first need to make our own edits to the webpage itself. I am using vscode and when I edit any of the html, the changes show up in my index.html, but not in the browser. Any idea why this is?
try to right click your browser and check in the sources to make sure it really saved your changes.
Try to use live server on VS Code and then whenever you save it will show up on the page.
-> https://techstacker.com/local-live-server-vscode/
Make sure you save the file and reload the page in the browser
I am working on Jet and now have to insert a image in the page. It should be very easy but now I am just not able to make this image shown in the page.
To ensure that there is no path error, I put the image and the html file in the same folder: src/js/views.
Below is the html code snippet:
<img src="xxx.png" style="width:89.25pt;height:18.75pt;" alt="xxx logo">
But the page just shows a broken icon but not this image.
Could you please help me out? Thanks in advance!
Two possible solutions:
Go to your browser's Dev Tools -> Network, and search for your image's request to server (If you cannot find it reload the page while keeping the Dev Tools open.) Does the URL path to the image look correct to you? If not, correct it.
If it still isn't working try using <image> tag instead. This worked for me.
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I try to view an htm page locally (on my laptop) in IE 10 and none of the images appear. However, if I go to the image url itself, it shows fine. For example, if I go to the URL "C:\Users\Angie\Desktop\pdb\ROTE - Main Menu.htm", images like this:
<IMG SRC="graphics/LogoSm2.gif" STYLE="Margin-top: 0pt; margin-bottom: 0pt" width="71" height="67">
do not show, but if I go directly to the image, "C:\Users\Angie\Desktop\pdb\graphics\LogoSm2.gif", it shows.
Can anyone help please?
Edit: RESOLVED. FIGURED IT OUT! It was a stupid oversight on my part. The file had a .htm extension from where I copied it, but I had to change it to .html to view locally. :-P It works with the original relative links. Thanks everyone who tried to help.
You're using a relative path, which means the server checks from the directory it is in. You could traverse all the way to the file, but that's not really recommended. Add the image into your web-app/images directory and grab it that way.
This site may help regarding some resource resolution, although it's a little unclear from your question which server/language you're using.
Try changing it to
src="/graphics/LogoSm2.gif"
Ok I have checked all the other posts that are similar to this but none of them are truely the same.
I have a like button on my website. The page is created dynamically via a perameter passed to the page called "page"
find here;
http://dev.crosbylakeside.co.uk/watersports/index.php?page=watersports
Now on the home page of this section the like button works great. However it does not work on any other section at all!!
The strange thing is its essentially the same page. If you check my source code header info its always right. The facebook og data is also dynamic to simulate page changes and is working fine.
If you go to the dev bugs page and put in the url of my site it all checks out ok.
I have tried everything but I cant seem to get it to go.
Please help thanks
Looks like was a caching issue