Ways to ensure all tabs on the Nav bar are evenly distributed across the width of the screen

Question

Ways to ensure all tabs on the Nav bar are evenly distributed across the width of the screen

Hello! I am in the process of creating my first website, and it's going to be a D&D character randomizer. Currently, I'm working on the Nav-bar section and I have four bars that I want to fit across the screen equally, regardless of the screen size. If anyone has expertise in this area, I would greatly appreciate your advice on what modifications should be made to my existing code. I've shared all the CSS and HTML required to replicate the issue. Thank you in advance!

/* Menu CSS */
#Menu {
    font-size: 25px; /* Font size set to 25 px */
   }
   
   /* Background CSS for the Menu */
   #Menu ul {
     list-style-type: none; /* Bullets removed */
     overflow: hidden; /* Scrollbar disabled */
     background-color: rgb(77, 39, 21); /* Menu background color */
     margin-bottom: 0px; /* 0 pixels bottom margin */
     margin-top: 0px; /* 0 pixels top margin */
     padding: 0;
   }
   
   /* Edges of the Menu CSS*/
   #Menu li {
     float: left; /* Floats Menu items to the Left */
     border-right: 1px solid rgb(104, 99, 99); /* 1px left border line separating blocks */
     border-left: 1px solid rgb(104, 99, 99); /* 1px right border line separating blocks */
   
   }
   
   /* Tab styling for Menu CSS */
   #Menu li a {
     display: block; /* Block level display */
     color: rgb(187, 180, 180); /* Text color */
     text-align: center; /* Aligns text in the middle of the block */ 
     padding: 16px 177px; /* Padding between blocks */
     text-decoration: none; /* No underline for links */
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

html css

Answer 1

Answer №1

You'll find the solution you need in this code snippet.

Utilizing Flexbox, a powerful layout tool that can be explored further at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The key modifications include adding display: flex to the ul element and assigning flex: 1 to the li elements.

flex: 1 shorthand for flex-grow: 1, ensures equal distribution of remaining space among children within the container.

Incorporating Flexbox eliminates the necessity of using float and excessive horizontal padding on the a elements.

/* CSS for the Menu */
#Menu {
    font-size: 25px; /* Set Font size to 25 px */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
     list-style-type: none; /* No Bullets */
     overflow: hidden; /* Disable Scroll Wheel */
     background-color: rgb(77, 39, 21); /* Background color of Menu */
     margin-bottom: 0; /* Bottom Margin set to 0 */
     margin-top: 0; /* Top Margin set to 0 */
     padding: 0;
     display: flex; /* Apply flexbox layout to the list */
   }
   
   /* CSS for Menu Edges*/
   #Menu li {
     border-right: 1px solid rgb(104, 99, 99); /* 1px left border line separating blocks */
     border-left: 1px solid rgb(104, 99, 99); /* 1px right border line separating blocks */
     flex: 1; /* Float is not required with Flexbox */
   
   }
   
   /* CSS for Menu Tabs */
   #Menu li a {
     display: block; /* Block-level display */
     color: rgb(187, 180, 180); /* Text color */
     text-align: center; /* Center align text */ 
     padding: 16px; /* Reduced horizontal padding */
     text-decoration: none; /* Remove underlines from links */
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Answer 2

You'll find the solution you need in this code snippet.

Utilizing Flexbox, a powerful layout tool that can be explored further at: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The key modifications include adding display: flex to the ul element and assigning flex: 1 to the li elements.

flex: 1 shorthand for flex-grow: 1, ensures equal distribution of remaining space among children within the container.

Incorporating Flexbox eliminates the necessity of using float and excessive horizontal padding on the a elements.

/* CSS for the Menu */
#Menu {
    font-size: 25px; /* Set Font size to 25 px */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
     list-style-type: none; /* No Bullets */
     overflow: hidden; /* Disable Scroll Wheel */
     background-color: rgb(77, 39, 21); /* Background color of Menu */
     margin-bottom: 0; /* Bottom Margin set to 0 */
     margin-top: 0; /* Top Margin set to 0 */
     padding: 0;
     display: flex; /* Apply flexbox layout to the list */
   }
   
   /* CSS for Menu Edges*/
   #Menu li {
     border-right: 1px solid rgb(104, 99, 99); /* 1px left border line separating blocks */
     border-left: 1px solid rgb(104, 99, 99); /* 1px right border line separating blocks */
     flex: 1; /* Float is not required with Flexbox */
   
   }
   
   /* CSS for Menu Tabs */
   #Menu li a {
     display: block; /* Block-level display */
     color: rgb(187, 180, 180); /* Text color */
     text-align: center; /* Center align text */ 
     padding: 16px; /* Reduced horizontal padding */
     text-decoration: none; /* Remove underlines from links */
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Answer 3

Answer №2

Below is the modified code along with some comments to help you understand the changes made and improvements suggested.

If you consider using CSS Grid, it may greatly reduce the redundancy in your code.

Check out the cleaned-up version of HTML/CSS Style:

*{
    margin:0;  
    padding:0;
    box-sizing:border-box;
   }

#Menu {
    width:100%;
   }
   
#Menu ul {
    font-size: 100%; 
    list-style-type: none; 
   }
    
#Menu li {
     display: inline-block; 
     width: calc(100%/4); 
     text-align: center;
     padding: 16px 0px;
     float: left; 
     border-right: 1px solid rgb(104, 99, 99); 
     background-color: rgb(77, 39, 21); 
   }    
    
#Menu li:nth-child(1){ 
     border-left: 5px solid red; 
   }
   
#Menu a {
     color: rgb(187, 180, 180); 
     text-decoration: none;
     font-size: 100%;
   }

<!--end snippet-->

<!-- begin snippet: js hide: false console: true babel: false -->

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Cleaned-up version of HTML/CSS with comments:

*{
margin:0;   /* zero-out MARGINS and PADDING */
padding:0;
box-sizing:border-box; /* helps keep dimensions of any block elements when they resize */
}

#Menu {
    /* don't target the Menu as a whole
    unless you want ALL the children to 
    have the same traits you intend for 
    your menu items (e.g. if you want menu
    items to be 25px) */
    
    width:100%; /* assuming you want it to expand the entire width of the window*/
    
 /* width:800px; <------ use this method if you want a FIXED size */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
    font-size: 100%; /* Font size of 25 px */
    list-style-type: none; 
    }
   
   /* CSS for Menu Edges*/
   #Menu li {
     display: inline-block; /*INLINE-BLOCK */
     width: calc(100%/4); /* 100% width DIVIDED by No. of Elements */
     text-align: center;
     float: left; /* Menu is floated to the Left */
     border-right: 1px solid rgb(104, 99, 99); /* right border of other menu items. */
     background-color: rgb(77, 39, 21); 
     padding: 16px 0px; /* the padding is added to each element */
    }
    
#Menu li:nth-child(1){ /* left border of FIRST menu item. */
     border-left: 5px solid red;
    }
   
#Menu a {
     color: rgb(187, 180, 180);
     text-decoration: none;
     font-size: 100%;
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Answer 4

Below is the modified code along with some comments to help you understand the changes made and improvements suggested.

If you consider using CSS Grid, it may greatly reduce the redundancy in your code.

Check out the cleaned-up version of HTML/CSS Style:

*{
    margin:0;  
    padding:0;
    box-sizing:border-box;
   }

#Menu {
    width:100%;
   }
   
#Menu ul {
    font-size: 100%; 
    list-style-type: none; 
   }
    
#Menu li {
     display: inline-block; 
     width: calc(100%/4); 
     text-align: center;
     padding: 16px 0px;
     float: left; 
     border-right: 1px solid rgb(104, 99, 99); 
     background-color: rgb(77, 39, 21); 
   }    
    
#Menu li:nth-child(1){ 
     border-left: 5px solid red; 
   }
   
#Menu a {
     color: rgb(187, 180, 180); 
     text-decoration: none;
     font-size: 100%;
   }

<!--end snippet-->

<!-- begin snippet: js hide: false console: true babel: false -->

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Cleaned-up version of HTML/CSS with comments:

*{
margin:0;   /* zero-out MARGINS and PADDING */
padding:0;
box-sizing:border-box; /* helps keep dimensions of any block elements when they resize */
}

#Menu {
    /* don't target the Menu as a whole
    unless you want ALL the children to 
    have the same traits you intend for 
    your menu items (e.g. if you want menu
    items to be 25px) */
    
    width:100%; /* assuming you want it to expand the entire width of the window*/
    
 /* width:800px; <------ use this method if you want a FIXED size */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
    font-size: 100%; /* Font size of 25 px */
    list-style-type: none; 
    }
   
   /* CSS for Menu Edges*/
   #Menu li {
     display: inline-block; /*INLINE-BLOCK */
     width: calc(100%/4); /* 100% width DIVIDED by No. of Elements */
     text-align: center;
     float: left; /* Menu is floated to the Left */
     border-right: 1px solid rgb(104, 99, 99); /* right border of other menu items. */
     background-color: rgb(77, 39, 21); 
     padding: 16px 0px; /* the padding is added to each element */
    }
    
#Menu li:nth-child(1){ /* left border of FIRST menu item. */
     border-left: 5px solid red;
    }
   
#Menu a {
     color: rgb(187, 180, 180);
     text-decoration: none;
     font-size: 100%;
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Ways to ensure all tabs on the Nav bar are evenly distributed across the width of the screen

Answer №1

Answer №2

Similar questions

What are some ways to customize the appearance of React Semantic components?

Bootstrap requires Visual Studio Code live-server plugin to function properly

tips for passing value to the date field using proctractor

The background video on the website is having trouble resizing properly to fit the screen dimensions

Is there a way to effectively overwrite CSS styles when utilizing @extend with another class in SCSS?

Maintaining text color while adding a color overlay to a Bootstrap Jumbotron

Creating a table with a static first column and vertical text positioned to the left of the fixed column

What is the best way to calculate the time elapsed between two consecutive double clicks using jQuery?

Is there a way to overlap shapes (transform) using ::before and ::after in CSS? I'm facing an issue where Edge is not showing the shape on top

Connecting the search results page with the specific details page

Attempting to adjust table size in MPDF to fill the available height

Modifying the default actions of Material UI components: A step-by-step guide

Tips for correctly cloning a table row:

The width of an HTML input and button elements do not match

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

Using Rails and HAML to incorporate looping HTML5 video tags

Conceal the div by clicking outside of it

Slide the next section over the current section using full-page JavaScript

What could be causing my divs to overlap?

Need Some Help Reversing the Direction of This CSS Mount Animation?