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.
Related
I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means
Yes, I know that this question has already been asked multiple times, and I've applied every solution that I could find, but I still have this issue:
If you visit my Jekyll site (yasath.github.io), the homepage and the tags page in the navbar render the CSS perfectly and look beautiful. However, when I click on a post (like this one), the CSS completely fails to render and I end up with an old-looking white background, Times New Roman text page!
My config.yml file has the right URLs (as far as I know!), and when I view the source of both pages with Chrome's developer tools, they both import the same CSS file correctly.
Hopefully, someone can give me advice specific to my site! This is the GitHub repo for the site, and again, here is the actual site.
The links to your stylesheets in your <head> section are written as relative links. You have, for example:
<link rel="stylesheet" href="assets/css/app.min.css">
When a URL starts with a directory name like "assets", the browser looks for that directory relative to the URL it's displaying right now. So when you're at yasath.github.io, it goes to yasath.github.io/assets/css/app.min.css... but when you're at https://yasath.github.io/2017/09/04/hello-jekyll.html, it looks for a stylesheet at https://yasath.github.io/2017/09/04/hello-jekyll.html/assets/css/app.min.css, which of course doesn't exist.
You want to start your URL with a /. That tells the browser to look relative not to the page it's displaying, but to the root of the website. So in your head template use:
<link rel="stylesheet" href="/assets/css/app.min.css">
...and similarly with all your other stylesheet URLs.
I'm working on a simple static page where I've (about,contact etc.).
The problem is that index.html page has different width and height(body) comparing to others pages. But I set one size for all pages and it works on them - except index.html
First thought - I messed with CSS and tried to find class or id which could change the css of my index.html - NOPE.
Then i just copied whole content from about.html and paste it to index.html and again the size was wrong.
Finally i change the name of index.html on home.html and after that the width and height was CORRECT.
So the problem was not in content of html but in filename.
I searched through whole my work directory if some css has not affecting "index.html" name , but without effect.
Any tip where I can fix this problem?
[I'm using boostrap]
Can't exactly say without any code, but i had experienced a similar issue before, so it might help.
It might be a browser issue. Try to see the index.html in different web browsers. If you ever used the Zoom option in your browser while on index.html, it will automatically display your index.html with the last time Zoom preferences, so the page will appear different from what it should look according to the CSS.
Try cleaning cache and then try opening the index.html
that's all that could be told without any code. Please upload the code if you still face the problem.
I've developed a custom HTML homepage for my prestashop site, but it seems I do not know how to incorporate it, I've tried looking into the prestashop forums, but all it shows are for .tpl files, is there a way for me to link them to the homepage?
Can I just link it as an html page or do I really need to put it inside a tpl page for it to work?
Create your .html file (say 'test.html).
In test file you need to
add these lines of code before your html code
<?php
include(dirname(__FILE__).'/config/config.inc.php');
Tools::displayFileAsDeprecated();
include(dirname(__FILE__).'/header.php');?>
Also add these lines after your html code
<?php include(dirname(__FILE__).'/footer.php');?>
Place the test.html file in the public_html folder.
Now you need to add the page to link with your site.
If it is home page you need to add it to index.php otherwise you can just add the url (http://mysite/test.html) to menu bar or footer links, where ever you want to put it.
I have placed my php page link in the footer information part using anchor tag as shown in the image
In prestashop you can find "Home Editorial" module, in this module you can put your html obviously the module need to be transplant in displayHome position.
I have made my first website and in the preview in Safari and Chrome from Dreamweaver it works fine. But after uploading my files with Filezilla to 000webhost and typing in the URL, only the index page loads, links to other pages on the site don't work, images are broken and the css isn't applied.
I'm think it is because I haven't named the files correctly in the code, but I have no idea what to call them in order to get it right.
The file you upload to is public_html. So I've tried http://www.webaddress/public_html/Pages/entertainment.html but it didn't change anything.
Thanks for any help!
Without code examples it's very difficult to answer this, but it's probably just that your URL format is incorrect.
For example, if you've got example.com/example/example.html and that page contains a CSS file with a location of /css/style.css, the web browser will look for example.com/css/style.css because the slash at the beginning of the URL tells it to go to the root.
In this case, your CSS file is probably actually in example.com/example/css/style.css. Remove the beginning slash so the location is css/style.css and the web browser will look for the file using the current page's location as it's starting point.