Adjust the height of the parent container using an unordered list

I have a menu in an unordered list and I am struggling to make each <li> the height of its parent. Despite knowing that this is a basic task, I can't seem to figure out where I am going wrong.

<div class="menu">
  <ul>
    <li class="current_page_item">
        <a href="#">Home</a>
     </li>
    <li class="page_item page-item-2">
       <a href="index.php/sample-page/">Sample Page</a>
    </li>
 </ul>
</div>

In addition, here is the CSS code I currently have:

.main-navigation ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
}

There are no CSS rules defined for the enclosing div element.

The HTML snippet mentioned above resides within a div tag with no explicit height set. It adapts its height based on the image it contains. You can view the actual website at:

My ultimate goal is to adjust the height of each <li> element so that I can apply a top border when the link is active.

htmlcss

Answer №1

By default, the height of a block element is based on the height of the block's content. For example:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

The #inner element will adjust its height to contain the paragraph and #outer will then adjust its height accordingly.

When specifying height or width as a percentage, it is in relation to the element's parent. In terms of width, all block elements are, unless otherwise specified, as wide as their parent extending back up to the <html> element; therefore, the width of a block element is not affected by its content and setting width: 50% results in a clear pixel amount.

However, the height of a block element depends on its content unless a specific height is provided. This creates a relationship between the parent and child elements regarding height, where setting height: 50% does not provide a definite value without breaking the feedback loop by assigning a specific height to the parent element.

Credit for this explanation goes to @muistooshort:

If you wish to vertically align the menu items by setting the height of each li, here's a workaround using flexbox:

body{
    margin: 0;
}
.main-navigation {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    margin-bottom: 4px;
}
#middleNavigation {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    display: flex;
}
.main-navigation a {
    font-size: 1.4rem;
    font-size: 14px;
    font-weight: normal;
    margin-left: 1em;
    text-decoration: none;
    padding: 0 0.8em;
    word-spacing: 4px;
    font-family: Arial;
    color: #000;
    border-top: 4px solid transparent;
    display: flex;
    align-items: center;
}
.main-navigation a:hover {
    border-top-color: #000;
}
<nav role="navigation" class="site-navigation main-navigation">
    <div id="middleNavigation">
        <img src="http://notthedroidyouarelookingfor.com/wp-content/themes/striker/images/NTDYALF-Logo.png" alt="" id="NTDYALFLogo">
      
        <a href="http://notthedroidyouarelookingfor.com/"><span>Home</span></a>

        <a href="http://notthedroidyouarelookingfor.com/index.php/sample-page/"><span>Sample Page</span></a>

    </div>
</nav>
    
<p>Hover the links to see the border</p>

Try out this JSFiddle demo to experiment further

Answer №2

To adjust the height, you may have to set it manually or use a script as CSS might not be able to achieve this.

Additionally, the 'div.menu' parent element does not automatically resize to fit the logo image due to the ul being floated left. In order to avoid any potential issues, it is recommended to also apply float:left to div.main.

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

Step-by-step guide to triggering the inactive dropdown function by selecting a different menu item

This issue seems to have cropped up recently, possibly due to multiple changes being made. The main problem is figuring out how to deactivate a dropdown menu when another menu item is clicked. As shown in the image below, it appears that two items are sele ...

javascriptjqueryhtmlbootstrap-4sidebar

Could we add a touch more to the favicon?

After searching far and wide on this site and Google, I have come up empty-handed in my quest to resolve my favicon dilemmas. Despite delving into various tutorials, the concept of favicons still eludes me. The idea that clearing the cache could be a sol ...

html

Unable to halt animation at the final frame

I'm attempting to implement a character jumping animation that should stop on the last frame, but it's not working as expected. I have tried using animation-fill-mode: forwards; but it didn't produce the desired outcome. Below is the c ...

cssanimationkeyframe

Searching for nested divs with the same class name in jQuery can be achieved by using the

Need assistance in locating all divs with a specific class name. Some divs may have nested divs with the parent div's class name. Take this scenario for example: <div class="myForm"> <div class ="myDiv"> <div class ="myDiv"> ...

javascriptjqueryhtml

What is the process for integrating require.js and jquery.min.js?

I am facing an issue with a specific piece of code: <script data-main="http://northapp.co/_a/js/main.min.js" src="http://northapp.co/_a/js/require.js"></script> Why am I unable to connect require.js with jquery.min.js? I have tried the follow ...

javascriptjqueryhtmlajaxrequirejs

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

I've been working on developing a chrome extension that autofills input forms in web pages. However, I encountered an error that says "cannot read properties of null." This issue arises when I try to add an event listener to a button in my code. The f ...

javascripthtmldomgoogle-chrome-extensionaddeventlistener

Issue with Google Maps: undesired change in map size

Welcome to my app! Check out the link to my app here: http://jsbin.com/axeWOwAN/1/edit If you prefer a full-screen view, click here: http://jsbin.com/axeWOwAN/1 I'm encountering an issue with the map on the second page of my app. The map works perf ...

javascriptjqueryhtmlcssgoogle-maps

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

htmlcss

What is the best way to retrieve the index of the chosen option from a select element in Angular when

My Angular application includes a simple <select> element using Material design: <mat-form-field> <mat-label>Type</mat-label> <mat-select placeholder="Type" formControlName="type" name="type" id="name"> <mat-option ...

htmlangularformsangular-material

Modify the NAME attribute when clicked using Jquery

I am attempting to modify the NAME attribute of a DIV with the text from a textbox using jQuery. Take a look at my code snippet: http://jsfiddle.net/e6kCH/ Can anyone help me troubleshoot this issue? ...

javascriptjqueryhtml

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

cssruby-on-railsrubyamazon-s3sass

Enhancing Your Website with Multiple Background Images in CSS3

Having trouble understanding how to position multiple background images with CSS3. I'm struggling to get them to display at the top, middle, and bottom of the page. Can you help me figure out how to make an image appear at different positions using a ...

htmlcss

Does Xamarin.Forms have a feature similar to html datalist that enables the selection of predefined values while also allowing for the input of free text?

We are currently developing a Xamarin forms application. One of the necessary features is a selection field where users can either choose from predefined options or enter their own text value, similar to using a text field. In HTML, this could be easily ...

androidhtmliosxamarin.formscontrols

Implementing a Slide animation in React

I am currently working on a carousel feature that includes two buttons, Next and Previous. When the user clicks on Next, I want the carousel to slide from left to right, and when they click on Previous, it should slide from right to left. One important not ...

cssreactjscss-animations

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container? I could add padding to the contain ...

htmlcss

What is the best way to retrieve the ID of the list item that has been clicked during a button event?

How can I use jQuery to get the ID of a selected list item when clicking a button in my HTML code? <ul id="nav"> <li><a href="#" rel="css/default.css" id="default" > <div class="r1"></div> </a>< ...

javascriptjqueryhtml

Attempting to position two buttons and a logo in the footer with the help of Bootstrap!

Currently working on a new website project utilizing Bootstrap-4 My goal is to position a logo to the left, a link button in the center, and another link button to the right within a footer div. So far, I've managed to achieve the layout, but the iss ...

htmlcssbootstrap-4

When will the search bar toggle and the logo appear sliding down?

.navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" in ...

htmlcssfrontendnavigationbootstrap-5

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

javascriptjqueryhtmlcssanimation

history.js - failure to save the first page in browsing history

I have implemented the history.js library to enable backward and forward browser navigation on an AJAX products page triggered by clicking on product categories. While I have managed to get this functionality working smoothly, I am facing a particular iss ...

javascriptjqueryhtml