You’re using relative paths as links which can cause errors for links when it can’t find the path correctly.
The links point to a filename with no path provided. This means that index.html is located in the same folder as the page where this link appears.
If both files are located in the root directory of the site www.example.com, the actual URL the user would be taken to is www.example.com/index.html.
Check the URL in the browser when testing and see if there is an altered location that may be causing issues.
If you are trying to open the site from your terminal, what directory are you in when you open? if you aren’t in the root where these files are located then it will definitely cause errors.
The structure from the root folder would look like this:
./index.html
./contact.html
./css/styles.css
If you were to have an index file in another folder like this:
./index.html
./contact.html
./about/index.html
./css/styles.css
You would have to correct the path for the stylesheet as relative paths use the current file location. So to get the styles on the about page you would have to modify the href to "../css/styles.css" which traverses up one folder to find the original location of the folder structure from the root.
404 not found error is page not found .So , you had not put in same folder there actually you can should them or else you take the mistake.
Making a website and I have two links, index and Contact. Clicking on either leads to a 404 not found page.
style.css is in a separate folder and index.html and contact.html are together in a separate folder. Been at it for ages but can’t figure out the mistake. However, when I open the index.html or contact.html separately from chrome, they seem to work fine and even display the changes. This doesn’t work when I open with the terminal. Any help is appreciated!
body {
background: rgb(158, 219, 158);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
#(index.html)
-----------------------
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/class">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<h1>Home</h1>
<p>
Trying to set up this website.
</p>
<p>
<em>when will this work?</em>
</p>
</body>
</html>
#(contact.html)
-----------------------
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/class">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<h1>Contact</h1>
</body>
</html>
I don’t see how is the issue related to the css styles. It looks like a server issue, where are you trying this?
Thank you for your help! So as of now I made a change where my contact.html and index.html are in the same folder. In that same folder is also the CSS folder which contains Style.css. I hope this is what you meant in your explanation. My href is thus currently “../css/style.css”, and for the individual pages its “../index.html” and “../contact.html”. The issue however still persists. If it helps, I’m using Flask in Python to run this. Still confused as to what is causing this error. Even though the home page gets displayed, the CSS doesn’t seem to show.
Your CSS file should be “css/styles.css” as the folder is located in the same place as the HTML files. However I’m not familiar with how Flask compiles for the development environment. You might try something as suggested in the Flask static files documentation:
