Using HTML relative paths within a navigation menu can cause a 404 error

I am currently working on my navigation menu, which consists of 6 files connected to folders on my server within the main public_html directory. To style my menu, I have utilized the <nav> tag and linked it to an external CSS stylesheet.

Below is the HTML code for my menu:

<center>
    <nav>
        <ul id="mainMenu">
            <li><a href="public_html/Dome1/art.html">Art Dome</a></li>
            <li><a href="public_html/Dome2/music.html">Music Dome</a></li>
            <li><a href="public_html/Dome3/code.html">Dome Unknown</a></li>
            <li><a href="https://www.google.com/maps/search/scrap+metal+near+me/@41.4745193,-81.7553814,14z/data=!3m1!4b1">Hunger Dome</a></li>
            <li><a href="https://www.wikipedia.org/wiki/special:Random">Education Dome</a></li>
            <li><a href="public_html/Dome6/yesno.html">Yes or No Dome</a></li>
            <!--yesno dome has green circle with yellow text saying "yes"-->
            <li><a href="public_html/Dome7/dontgo.html">Do Not Go Into This Dome!</a></li>
            <!--do not dome: red circle with text saying: you have entered into the wrong dome. Go back.-->
            <li><a href="public_html/Contact Dome/contact.html">Contact</a></li>
        </ul>
    </nav>
</center>

Although the current structure looks a bit disjointed, I am interested in incorporating relative paths such as Dome1/art.html. Any suggestions on how to achieve this seamlessly?

htmlcsspathrelative-url

Answer №1

Initially, it's important to note that the <center></center> tag is no longer considered valid HTML. Instead, it is recommended to create a CSS class for centering content as it is more compatible with modern HTML standards. Additionally, when defining paths, it is advisable not to include the public_html folder. I have revised your navigation bar below:

.text-center {
  text-align: center;
}
    <nav class="text-center">
      <ul id="mainMenu">
        <li><a href="dome1/art.html">Art Dome</a></li>
        <li><a href="dome2/music.html">Music Dome</a></li>
        <li><a href="dome3/code.html">Dome Unknown</a></li>
        <li><a href="https://www.google.com/maps/search/scrap+metal+near+me/@41.4745193,-81.7553814,14z/data=!3m1!4b1">Hunger Dome</a></li>
        <li><a href="https://www.wikipedia.org/wiki/special:Random">Education Dome</a></li>
        <li><a href="dome6/yesno.html">Yes or No Dome</a></li>
        <!--yesno dome has green circle with yellow text saying "yes"-->
        <li><a href="dome7/dontgo.html">Do Not Go Into This Dome!</a></li>
        <!--do not dome: red circle with text saying: you have entered into the wrong dome. Go back.-->
        <li><a href="contact-dome/contact.html">Contact</a></li>
      </ul>
    </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is using Pushstate less effective than Hashbangs for caching purposes?

One of the benefits of using HTML5 Pushstate over hashbangs is that Google now encourages its use. The main disadvantage of Pushstate is that it is not supported by non-modern browsers. However, there seems to be a drawback when it comes to caching as well ...

ajaxhtmlbrowser-cachepushstatehashbang

Tips for creating Java code that generates visually appealing colored HTML from JSON data include:1. Use libraries like Gson or Jackson

On certain pages dedicated to our API, such as for sales, we want to showcase JSON examples. We are looking for a nicely formatted display with color-coded spans. While the option of using the JavaScript code prettifier from this archived and unmaintaine ...

javahtmljson

Is it possible to incorporate HTML templates into other HTML templates?

Imagine a scenario where we have a web application that allows users to schedule appointments. Each appointment follows a standard block-like display template, which is quite simple: <div class="appt"> <div class="title">Encounter strange ...

phphtmltemplatesdry

Gather all the div elements within a table using Java WebDriver

Code in HTML format <table id="tblRenewalAgent" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <div class="form-row"> <div id="trStatus" style=""> <div id="trFees" class="form-row" style=""> <div ...

javahtmlseleniumselenium-webdriver

Crafting a Cubic Masterpiece with Pure CSS Gradient Magic

Experimenting with various techniques involving linear gradients, I have achieved layers of multiple stripes but have encountered a block when it comes to the top face. My goal is to use gradients, whether linear or radial, to create a series of repeatin ...

htmlcssgraphics3d

Adding a stylish underline to text using HTML and CSS

Looking for some assistance with my Html and CSS website project. I am currently facing a challenge trying to place a border below the text as shown in the provided image. Below is the snippet of my Html code: <div class="Sectionheading"> ...

htmlcss

Ways to implement a CSS transition effect on a sidebar menu?

I successfully implemented a sidebar menu and now I am looking to enhance its appearance by adding transitions for a more polished look. Below is a snippet of my current code: $('.menu-toggle').on('click', function() { $('bo ...

cssbootstrap-4

Opening a file in Python without specifying the full path

I'm looking to read data from a file without specifying the full path. How can I achieve this? Here is my current code: import json file1= 'C:\\Users\\klaus\\OneDrive\\Desktop\\Script\\ ...

pythonjsonpathfilepath

Creating a div background that is transparent within a Bootstrap modal

Here is the HTML (Bootstrap) code I have: <div modal="showModal" close="cancel()"> <div class="modal-header text-center"> <h2>Members who shortlisted you </h2> </div> <div class="modal-body"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Meta tags are causing issues with HTML5 validation on the website

Striving to enhance the HTML validity of my website, I encountered several errors in the meta tags that are marked as invalid. Unfortunately, I am unsure how to modify them to rectify these errors. <meta http-equiv="X-UA-Compatible" content="IE=edge,ch ...

htmlmeta

Optimal-minimal behavior with a versatile CSS grid system

Currently, the use of grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); Results in this behavior: If there are more items than can fit in a row (based on the minimum), new rows are created. If there are fewer items than the row could accommodat ...

htmlcsscss-grid

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

htmlcssflexbox

Retrieving a selection of unexpected articles from Wikipedia

Hey there! I'm currently developing a website that pulls random articles from Wikipedia and showcases them. However, I'm struggling to figure out how to actually retrieve these articles. The documentation has been no help so far. Does anyone hav ...

phphtmlwikipedia

How to verify the parent nodes in a jstree

I have implemented a two state jstree. However, I am encountering an issue where it is not possible to select any other node in relation to a node. My goal is that when I click on a specific node, all of its parent nodes should also be checked. Any assist ...

javascriptjqueryhtmlcssjstree

Utilize JavaScript to save user-selected CSS styles by setting a cookie in jQuery

I am currently using a jQuery styleswitcher to change the stylesheet upon click. Despite trying various solutions, I have been unable to find a resolution to this issue. Could someone please assist me in setting a cookie for this functionality? Markup: ...

javascriptjqueryhtmlcsscookies

What is the process for assigning the value returned from an Angular HTTP request to ng-bind?

I am trying to retrieve a value from an HTTP request in AngularJS and set it as the result in a variable that is bound to ng-bind. The goal is for the value returned from the HTTP request to be displayed when text is typed into an input field. Below is th ...

javascripthtmljsonangularjshttp

Tips on implementing CSS post jQuery-induced modifications

I am currently working on dynamically adding elements to an HTML page while also implementing the bootstrap 3.2 css. Below is the jquery function that I am using: $( document ).ready(function() { $(".refresh-btn").click(function (){ $("<d ...

jquerycsstwitter-bootstrap-3

Replace FormControl.disabled by using a CSS or HTML attribute

I have a customized angular date picker where I want to restrict user input by disabling the input field and only allowing selection from the date picker. However, using the "disabled" attribute on the input element is not an option due to conflicts with t ...

htmlcssangulartypescriptangular-material

The navigation menu refuses to remain fixed at the forefront of the screen

Creating a Navigation Menu in Java Script: $(function() { var nav = $('#nav'); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var sho ...

javascripthtmlcss

The oversized monitor is cut off halfway due to postcss-pxtorem

When designing a screen with dimensions of 3840 x 2160, the initial draft was created with 1920 x 1080. I utilized postcss-pxtorem with a "rootValue" set to 192 for responsive scaling. The zoom is normal and functional on screens below 1920 pixels wide. ...

cssvue.js