Currently, I am in the process of working on a project that involves the use of bootstrap. As part of this project, I am configuring a navigation bar. Here is the code snippet for one item in my navigation bar:
<li class="active"><a href="/aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
However, upon loading the index.html file, instead of directing to 'C:/Users/.../about.html', it redirects to 'file:///C:/aboutus.html'. This results in a 404 error.
To resolve this issue, I made the following change to the code:
<li class="active"><a href="../project/aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
After making this adjustment, the link now points to the correct location, allowing me to access the page successfully.
Can you explain why this modification was necessary?
Edit: Just to clarify, I am running the project locally, and the same issue occurs with every file within the file system. The file structure is as follows:
../project/aboutus.html
../project/index.html
../project/css/ (contains standard bootstrap files)
../project/fonts/ (contains standard bootstrap files)
../project/js/ (contains standard bootstrap files)
Edit2: Adding just a single dot before the relative path also resolves the issue. For example:
<li class="active"><a href="./aboutus.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>