I am struggling with getting a ul element with 2 li items inside to perfectly fit a parent div. I want the li items to take up 100% of the height of the div and 50% of the width each.
<div id='menu-wrapper'>
<ul id='menu-list'>
<li><a>Playlists</a></li>
<li><a>Playlists</a></li>
</ul>
</div>I have tried multiple solutions but have not been able to achieve the desired outcome of the 2 li items fitting perfectly within the div.
Give this a shot: Remove the padding on #menu-list since #menu-list li is floated to the right. Make use of a clearfix on #menu-list.
CSS
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#rightpart {
position: relative;
float: right;
width: 40%;
}
#menu-list::after{
content:"";
display:table;
clear:both;
}
#menu-wrapper {
background-color: #3a3d40;
width: 100%;
z-index: 1000;
}
#menu-list {
height: 100%;
list-style: none;
list-style-type: none;
font-weight: normal;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 0;
padding:0;
}
#menu-list li {
width: 50%;
height: 100%;
float: right;
}
#menu-list a {
display: block;
text-align: center;
text-decoration: none;
font-size: 12px;
color: #d4d4d4;
-webkit-transition:all 200ms ease-in;
-o-transition:all 200ms ease-in;
-moz-transition:all 200ms ease-in;
}
#menu-wrapper ul li.active a, #menu-wrapper ul li a:hover, #menu-wrapper ul li a.selected {
color: #86acc4;
background-color: red;
}
HTML
<div id='rightpart'>
<div id='menu-wrapper'>
<ul id='menu-list'>
<li><a>Playlists</a></li>
<li><a>Playlists</a></li>
</ul>
</div>
</div>
Embarking on my coding journey, I've completed courses in HTML, PHP, CSS, JavaScript, and MySQL. Now, I've decided to dive into hands-on learning by creating a Wordpress child theme. My current challenge is figuring out how to overlay two differ ...
` package Xcel; import java.io.FileInputStream; import java.io.IOException; import org.apache.poi.EncryptedDocumentException; import org.apache.poi.openxml4j.exceptions.InvalidFormatException; import org.apache.poi.ss.usermodel.Workbook; import org.apac ...
I am currently facing an issue with a div element called signup-box. I have applied an opacity value of 0.65 to it, but unfortunately, this is affecting everything within the div as well. This means that my white text is no longer visible as white and th ...
I am currently facing an issue with a series of background images that are supposed to fade in and out behind my content. These images are centered, wider than the content itself, and should not affect the width of the page. However, there is an unexpected ...
I have been working on implementing a raycaster function in my project that only activates when an entity is visible. To achieve this, I was advised to create a custom script for better control. I have set up all entities and their child entities to be in ...
I received a JSON response that contains values for week 1, week 2, week 3, and week 4 under the 'week' key, along with counts based on categories (meetingHash) and weeks. I attempted to merge this data using the .reduce method but without succes ...
Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button. <div class="nav">nav</div> <div class="wrapper"> <div id ...
Struggling with customizing my navigation menu in CSS, I'm seeking assistance. My goal is to have the second child element of the navigation menu on a new line instead of below the first child (refer to the image for clarification). An example of the ...
I am currently working on a popup feature in HTML <div id="term_flags" class="term_flags"> <div class="modal-users-content flagsContent"> <div class="modal-users-header"> <span class="close" ng-clic ...
Recently, I've been practicing my skills with Bootstrap, and I'm determined to understand all aspects of the code. However, one thing that's currently puzzling me is the navbar colors. When I apply the navbar-dark class, instead of displayin ...
Initially, I create an index page with frames named after popular websites such as NASA, Google, YouTube, etc. Then, on the search page, <input id="main_category_lan1" value="test" /> <a href="javascript:void(0)" onmouseover=" window.open ...
I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...
Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...
My DOM structure is generated by a JS framework and may appear like this: span:nth-child(odd) { background-color: lightblue; } span { display: block; } <div id="parent"> <div class="child"> <span>Some text to color in alte ...
When the number 6 is typed and entered into the game, the function correct() in the code snippet below determines what action to take. I would like to remove the DOM element gg (the equation 3+3=input) from the stage after typing 6 and pressing enter. How ...
I've been working on this issue for a while now but just can't seem to find a solution. The website appears to be zoomed in for some reason, and I'm struggling to identify the cause. Here is the meta tag I've been using: <meta name= ...
Check out this follow-up to a previously posted issue. Click here to view it I am currently facing an issue with the code below, where I am unable to make the second button inherit the default border and padding styles. Any assistance would be greatly app ...
I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...
What could be the reason for 'Maroon 5' moving down to a second line? Despite adding extra characters and testing with an integer, the issue persists. <ul id="soundsLike"> <li>Foo Fighters</li> <li>Maroon 5</ ...
I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...