I started coding my website in one folder and everything works fine. The icons display without a problem. Then I needed to move the code to a different folder and I copy-pasted the exact same files with the exact same code. The icons no longer display in the folder I need. How can I fix this issue?
Related
This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.
I am building a site from a jekyll theme. I was able to completely customize the whole site except the yellow icons in the picture. These weren't found in the site files. Nowhere. Inspecting that element just shows a div class. I need to remove these but I can't because I can't find them anywhere.
These icons are actually font. To remove them you will have to remove specific classes from the element. In this case for example if you want to remove Laptop icon, you would remove fa-laptop class from the i element.
You can read more about it on the following link Font awesome - Get started
Can you search for a file called font-awesome.min.css in your project root directory? These icons should be a reference from that file. You can modify the mappings to point to something else.
I have a weird issue. I have a website project that I am currently working and I am am using node sass. While in the IDE, I am using VS Code, everything is fine and the styles are there. If I open the html file outside of the VS Code the css disappears for some reason. The css gets compiled fine and the .css file is there. The link tag points to it just fine, but no styles and no images either. Have I missed something in the setup of my project that would cause these issues when opening the html file externally?
I'm currently working on an assignment for school right now, and I'm trying to get an image to show up from another file.
Right now, I'm working on a page in my HTML folder, I want to get an image of a bird from my photos folder.
I typed all of the code correctly, I can't get the image to show. Both the HTML folder and the photos folder are in my Gallery project document/folder.
Here's some of the code I've already tried.
img src="/photos/bird.jpg"
img src="photos/bird.jpg"
img src="bird.jpg"
img src="gallery/photos/bird.jpg"
Again I have tried just about everything and it still won't show. I re-sized my images in Photoshop and I wonder if that messed something up. Any help would be great, thank you.
(PS. Yes, I am including the brackets, and all of the small details, i just didnt include it for the sake of time.)
EDIT: Not sure how much this really matters, but the photos folder is one level below my HTML folder. Also, my teacher wants me to keep my photos in certain folders, so I can NOT put the image in my html folder.
You have to show us the full directory path for the html and the photo for an answer.
Heres an example though:
html: project/html/index.html
photo: project/photos/examplePhoto.jpg
If you want to include the listed photo on your index page the source in the image tag would be: src="../photos/examplePhoto.jpg".
The "../" is to go back one directory, placing you in the project folder in this situation. Look up "relative pathing" to gain a better understanding.
I have a website, I moved the site to a new pc, loaded it up into dreamweaver, however the links for images in the css are still pointing to the old location, I have tried to change them but them will always revert back tot he old location. I tried uploading the site then downloading the style.css to see if that could kick it, but i will not.
When I open up the style.css I can see the old location, (yes I have always used the properties to add the location of header images.
As a last resort I manually changed the style.css, however I will not work for me.
Any ideas?
It looks like your paths are absolute instead of relative. Absolute path won't work if you relocate your image or HTML files into different folders or change your folder structure. The browser won't be able to find the image file.