What is the best way to evenly distribute the elements of my navigation bar using percentage values?

Hello, this is my first attempt at creating a website and I am currently working on designing a navigation bar with evenly spaced list items and dropdown boxes. While I have successfully implemented the dropdown boxes, I am struggling to evenly distribute the items across the navigation bar. Any assistance or guidance would be highly appreciated. CSS:

body {
background-image: url('paper.png');
background-repeat: repeat;
z-index: -1;
}

h1 {
    font-size: 32px;
    text-decoration: none;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 19px;
}

h4 {
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #E24000;
    padding: 0px 0px 0px 1%;
    text-shadow: 0.5px 0.5px 1px #333333;
    font-weight: normal;
}

h5 {
    font-size: 13px;
}

h6 {
    font-size: 11px;
}

p {
    font-size: 11px;
    font-family: Tahoma, Geneva, sans-serif;
    padding: 0px 0px 0px 1%;
}

#logo {
    padding-top: 5%;
    padding-bottom: 2.5%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 18%;
    width: 18%;
}

#top_image {
background-image: url('family.jpg');
background-size: 100%;
background-repeat: no-repeat;
}

#nav {
    background-color: #A1C6E5;
}

#nav_wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1% 1% 1% 1%;
    font-size: 20px;
    font-family: Tahoma, Geneva, sans-serif;
    text-align: justify;
    text-shadow: 1px 1px 2px #333333;
    background-color: #A1C6E5;
}

#nav ul{
    list-style-type: none;
    height: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    margin: 0px;
    position: relative;
    display: block;
    text-align: center;
}


#nav ul li{
    display: inline-block;
    text-align: center;
}

#nav ul li:hover{

}

#nav ul li a,visited{
    color: #FFFFFF;
    display: block;
    padding: 5%;
    text-decoration: none;
}

#nav ul li a:hover {
    color: #E24000;
    text-decoration: none;
}

#nav ul li:hover ul{
    display: block;
}

#nav ul ul{
    display: none;
    position: absolute;
    background-color: #A1C6E5;
}

#nav ul ul li{
    display: block;
}

#nav ul ul li a,visited{
    color #CCC;
}

#nav ul ul li a:hover{
    color: #E24000;;
}

HTML:

<!DOCTYPE html>

<html>

<head>
    <title>Vitalita</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
        <header id="top_image">
            <a href="Home.html"><img id="logo" src="logo.png" alt="Vitalita"></a></br>
        </header>

        <nav id="nav">

        <nav id="nav_wrapper">

            <ul>
                <li><a href="About.html">About</a>
                    <ul>
                        <li><a href="Contactus.html">Contact Us</a></li>
                        <li><a href="Feedbackform.html">Feedback</a></li>
                        <li><a href="Helpdesk.html">Helpdesk and FAQ</a></li>
                        <li><a href="Privacy.html">Privacy Policy</a></li>
                    </ul>
                </li>
                <li><a href="Health.html">Health</a></li>
                <li><a href="Media.html">Media</a></li>
                <li><a href="Tools.html">Tools</a></li>
                <li><a href="Forum.html">Forum</a></li>
                <li><a href="Account.html">Account</a></li>
            </ul>

        </nav>

        </nav>
        </br>
        <section>
            <article>
                <header>
                    <br><h4>Featured article: Best time of the day to exercise</h4><br>
                </header>
                        <p> The best time of day to exercise is long disputed. In the morning? You'll be worn out for the rest of the day. Before a meal? You won't have enough energy to push yourself. After eating? The food will weigh you down! Before bed? The endorphins will keep you up. We'll take to through the pros and cons of each time.</p>
            </article>
        </section>
            <aside>
                    <br><h4>Tip of the day!</h4><br>
                        <p>Clouds don't block all UV rays. Wear sunscreen, even in bad weather!</p>
            </aside>
        <section>
            <header>
                    <br><h4>About us</h4><br>
            </header>
                        <p>We are a group of uni students dedicated to making the world a healthier place, starting with our own friends. We try our best to make Vitalita a fun, supportive environment that fosters healthy lifestyles, and is a source for reputable information on obesity. We hope you enjoy yourself here.</p>
        </section>
        <section>
            <header>
                <br><h4>Contact Us</h4><br>
            </header>
                    <p>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceb8a7baafa2a7baaf8ea9a3afa7a2e0ada1a3">[email protected]</a><br>School of IT<br>The University of Sydney<br>Australia<br>Or by this online form!</p>
        </section>
        <footer>
            <p>Copyright Vitalita 2014</p>
        </footer>
</body>

<html>

I do have other pages as well, but I assume they may not be relevant to the current query.

Thank you sincerely to anyone who can offer their assistance.

Cheers,

Joshua

Answer №1

For those not concerned about ancient browser support, the solution lies in utilizing css3 flexbox:

#nav ul {
  display: flex;
  justify-content:space-around;
  list-style-type: none;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  margin: 0px;
  position: relative;
  text-align: center;
}

See Demo Here

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

Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...

What is the best way to obtain the height and width of the browser frame, similar to the example provided?

Lately, I've noticed a new technique being used more frequently on websites, but I can't seem to find information on what it's called. The layout consists of a first section that fills the entire width and height of the frame, yet allows use ...

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

Exploring audio analysis across different platforms using the power of the Web Audio API

Currently, I am in the process of developing an audio visualizer application using the web audio api and the three.js library. Utilizing the html5 element has been effective in extracting audio from local mp3 files or streaming mp3 files through the crea ...

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...

Tips for validating a dynamically created form with Bootstrap tabs using jQuery

For my project, I am dynamically creating an HTML form using jQuery. The page consists of five tabs, each with separate previous and next buttons. These tabs are designed using Bootstrap. Can someone please suggest the easiest way to validate this page? Fo ...

What is the best way to achieve a horizontally compact layout in Bootstrap by centering the content?

I am looking to center my content on the page and maintain a close proximity between items within a div. However, with Bootstrap 5, when I resize the page wider, additional space is added which pushes the items apart. Is there a way to keep them compacted ...

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

Combining AngularJS and FusionCharts in my web application has led to a unique issue. The upcoming release of AngularJS v1.3.0 will require the presence of a <base> tag in the HTML head to resolve all relative links, regardless of the app's loca ...

Preventing a Click Event on Child Element from Triggering the Parent's Click Event in jQuery

Can you help me figure out how to prevent a button from executing the onclick function of its parent div in this example? <div onclick="$('#extra-info').slideToggle();" class="card card-body item"> <div class="ro ...

Is there a way to properly center this text vertically within the row?

The kids are like puzzle pieces. I've experimented with different classes like justify-content-center, align-items-center, and text-center, but no luck. All I want is for the text to be perfectly centered both vertically and horizontally within the ...

Are the buttons appearing within a pop-up display?

I am having an issue with my Javascript popup buttons. Whenever the popup appears, the buttons that come after the one clicked appear on top of the popup container, and the previous buttons appear behind it. How can I ensure that the popup container displa ...

Troubleshooting HTML navigation bar white space problem

I am encountering a white space issue with my HTML nav bar for the first time. I have managed to fix the space on the sides (left and right), but there is still some space at the top of the nav bar. Can someone please assist me in resolving this issue? To ...

The malfunctioning buttons are a result of embedding PHP code within a JavaScript if-query

I am experiencing an issue where my buttons are not functioning properly, preventing me from clicking on them. All variables have been correctly assigned values. Can someone assist me in resolving this? Thank you. ?> <script> ...

What are the steps to integrate <br> in a JavaScript code?

I have recently started learning about web development and I'm facing a challenge with this implementation. var obj = [[{ name: "John", age: 30, city: "New York"}, { name: "Ken", age: 35, city: "New Orleans"}]]; ...

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

I recently made the switch from using a camera.js slider on my website to a Flexslider. The reason for this change was that I couldn't make the camera.js slider clickable, and I wanted to eliminate the 'Click here' button. However, now that ...

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. https://i.sstatic.net/FXXSE.png I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn&ap ...

Images are not appearing correctly on Chrome browsers when using Windows operating system

img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly. Queries What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties. Is there a straightforward s ...

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...

Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this: Selected (active) option in sidebar The goal is to have the image cover the left side of the backgr ...

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...