Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advance for your help.

HTML:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header> Welcome to Toner Stock </header>
    <div id="mynav">
        <ul>
            <li><a href="home-page.html">Home</a></li>
            <li><a href="add-buyer.html">Add Buyer</a></li>
            <li><a href="add-manager.html">Add Manager</a></li>
            <li><a href="current-stock.html">Current Stock</a></li>
            <li><a href="transactions.html">Transactions</a></li>
        </ul>
    </div>
</body>
</html>

CSS:

header{
font-family: Impact, Haettenschweiler;
font-size: 45px;
text-align: center;
}

#mynav {
  float: left;
  margin: 0;
  padding: 0;
  width: 60px;
}

#mynav ul{

    display: inline-block;
   list-style-type: none;
   height:auto;
   text-align: center;
}

#mynav li{
    display:inline-block;
}

Answer №1

Enhance your navigation bar with these styling tips:

To remove the link underline, use text-decoration: none;

Ensure all items in the nav bar are listed in a row by removing the width property from #mynav

header {
  font-family: Impact, Haettenschweiler;
  font-size: 45px;
  text-align: center;
}

#mynav {
  float: left;
  margin: 0;
  padding: 0;
}

#mynav ul {
  display: inline-block;
  list-style-type: none;
  height: auto;
  text-align: center;
}

#mynav li {
  display: inline-block;
  padding: 5px;
}

#mynav li a {
  text-decoration: none;
}

#mynav li:hover {
  background: lightgray;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Title</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header> Welcome to Toner Stock </header>
  <div id="mynav">
    <ul>
      <li><a href="home-page.html">Home</a></li>
      <li><a href="add-buyer.html">Add Buyer</a></li>
      <li><a href="add-manager.html">Add Manager</a></li>
      <li><a href="current-stock.html">Current Stock</a></li>
      <li><a href="transactions.html">Transactions</a></li>
    </ul>
  </div>
</body>

</html>

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

Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...

What is the best way to create transparency within an icon's background without affecting the surrounding box?

Is there a way to set the background color of the icon inside the circle without affecting the transparent box around it? Currently, when I use background:white, it changes both the circle and the surrounding box. https://i.sstatic.net/mlV1I.png ...

Adjust parent div size automatically when child is resized - jQuery Resizable Plugin

I need some assistance with jQueryUI Resizable. How can I resize only the height of the parent div when the child div is resized and touches the bottom end of the parent div? Additionally, I want to ensure that the child div does not go outside the boundar ...

What is the precise width?

Here's a question for you: an HTML element has the following styles applied to it - width: 150px, padding: 3px, border: 4px, margin: 7px. What is the actual width of the element? I'm confused by this question because it specifies that the width ...

Are there any instances where CSS is overlooking certain HTML elements?

In the following HTML code snippet, the presence of the element with class ChildBar is optional: <div class="Parent"> <div class="ChildFoo"></div> <div class="ChildBar"></div> <!-- May ...

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

I'm currently working with the Form.IO JS library to develop a new form. Within this form, I need to include a DataGrid containing 11 components. To ensure all components fit inline, I have applied the CSS rule overflow: auto (overflow-x: auto; overfl ...

What is the best way to connect the state of a variable from one class to another in React?

How can I utilize the variable "restaurants" in Editar2.js? ---App.js--- const { restaurantes } = this.state; ---Editar2.js--- const ChooseRestaurant = (props) => { const options = props.restaurants.map((option) => { return(<opt ...

Can you specify the doctype used for XHTML5, which is the XML representation of HTML5?

Which doctype is recommended for XML serialization of HTML5? If I keep the file extension as .html, can I still indicate to the browser that the content is XHTML5? ...

Using JavaScript values retrieved from a database to dynamically adjust the options in the second dropdown menu based on the selection made in the

I am currently working on a feature that involves populating two dropdown menus with values from a database. The idea is that when an option is selected in the first dropdown, the second dropdown should dynamically display relevant values based on that s ...

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

I am having an issue with dynamically adding elements to the DOM and then trying to manipulate their behavior using jQuery's .on() function. However, for some reason, the DOM is not triggering the .on() event for these dynamically added elements. You ...

Adjust the height of column divs to equal the height of their parent container

Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...

Error message displaying "Invalid ID attribute in HTML 5 input"

On my website, I have a page with multiple items, each containing an HTML5 input field. Whenever a user changes the value of the input, it triggers an AJAX call to the server. The server then responds with JSON data, including an array of items that have ...

What is the process of extracting a URL and inputting it into a form to enhance

Can anyone help with extracting a specific value (TEXT) from a URL and automatically paste it into an input form field? For example, if the URL is domain.com/page?code=123abc, I need to grab the code (in this case, 123abc) and have it automatically popula ...

Struggling with aligning rows containing three divs each in Rails and bootstrap

Looking to display 3 article divs in each row on my website using bootstrap 3 grid system: <div class="container-fluid"> <h1>NEWS</h1> <div class="row"> <% @articles.each do |article| %> <div class="col- ...

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Currently, I am utilizing puppeteer to fetch certain elements from a webpage, specifically class items (divs). Although I understand that getElementsByClassName returns a list that needs to be looped through, the function always returns undefined for me, e ...

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

Trouble encountered in adjusting the alignment of labels

I'm struggling with aligning my links properly. https://i.sstatic.net/W5G4Z.png I want Yesterday This week This month to line up perfectly with the DateTime From and Last 2 days Last 7 days Last 30 days labels for DateTime To. This is how it appear ...

The spinner persists even after the fetch api call

The issue I'm facing with my song lyrics app is that the spinner does not disappear after fetching data from the API. It seems like JavaScript is unable to detect the presence of the spinner even though it exists when the remove function is called. I ...

Background image not displaying in new tab after Chrome extension installation

I have been developing a Chrome extension that alters the background image of a new tab. However, I have encountered an issue where the background image doesn't change the first time the extension is loaded. This problem has also occurred very occasi ...

What is the process of turning a picture from a menu file into a clickable link?

I have created a menu with some images included, and I want them to be clickable links. However, currently only the text on top of the images acts as a link when hovered over. I would like the entire image to be clickable, not just the text. I believe I ...