I'm dealing with a situation where I have an h6 nested inside a div.
<div class="cylinder" data-v-5147e140="">
<div data-v-5147e140="">
<h6 class="quantite" data-v-5147e140="">27.61 T</h6>
</div>
<div class="water" data-v-5147e140=""></div>
</div>
The code snippet above results in this output:
However, the text on the left side of the div is somewhat unclear. Any suggestions on how to achieve a clearer text presentation similar to that on the right side?
Snippet of HTML and CSS code:
<div class="cylinder" data-v-5147e140="">
<div class="quantite-parent" data-v-5147e140="">
<h6 class="quantite" data-v-5147e140="">27.61 T</h6>
</div>
<div class="water" data-v-5147e140=""></div>
</div>
CSS:
.quantite-parent {
position: relative;
z-index: 1;
}
To ensure child elements can be positioned 'absolute' inside the main container, it is necessary to create a new stacking context as explained in the MDN article on the stacking context.
Once this is done, the text content elements (designated by the class .content in the example) can be placed above the .water element by setting their z-index higher than 0 (which is the default for HTML).
The MDN guide on inset is utilized to expand the child elements to fill the parent container .cylinder.
Refer to the commented snippet below:
.cylinder {
position: relative; /* establishing a new stacking context */
/* Ensures 'absolute' child elements are contained within this element */
/* Aesthetic details */
height: 200px; width: 100px; background-color: Gainsboro;
}
.content {
inset: 0; /* expands to fit parent container */
position: absolute; /* positioning relative to parent */
z-index: 1; /* displayed above .water */
/* Utilizing CSS Grid for vertical/horizontal centering of text */
display: grid; place-items: center;
}
.water {
inset: 40% 0 0 0; /* percentage from top, fills up from bottom */
/* Adjust the '40%' according to your needs. Any valid unit will suffice */
position: absolute; /* aligns within parent container */
/* Default z-index value is 0 */
/* Aesthetic details */
background-color: Orange; opacity: .6;
}
<div class="cylinder" data-v-5147e140="">
<div class="content" data-v-5147e140="">
<h6 class="quantite" data-v-5147e140="">27.61 T</h6>
</div>
<div class="water" data-v-5147e140=""></div>
</div>Below is the HTML code that I am working with: <section class="first-content-top"> <img src="images/img-diner.png" /> <h1>Menu</h1> </section> <section class="first-content-middle"> <article class="m ...
I am looking to add a timer to my HTML page using JavaScript. The timer should get the selected date and time from an input field <input type="date" /> and control it. If the time difference between the current time and the selected time is less than ...
Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...
I am facing an issue with this code as the phrase "lorem ipsum" is not positioned in the center of its parent div: <div style="width: 500px; height: 500px; background-color: #f0f0f0"> <div style="display: inline-block; width: 100px; height: 1 ...
I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play. After reading several similar discussions, I understand that you can manipulate elements with JavaScript once the ...
I'm experiencing an issue with the styling of my input box. When the user starts typing, a div containing a list of possible clubs is displayed. Currently, I am having trouble with the .clubLink:hover class and its background color. CSS: <style& ...
I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org Here's the code I've been working on: p::before{ content: "hello "; color: white; font-size: 60px; background: salmon; margin-bottom: 20px ...
I tried placing the bootstrap folder in the root folder and loading the styles in the header section of view files like this. Unfortunately, it didn't work as expected. Can someone please assist me in solving this issue? <link href="<?php e ...
I want to remove the shadow that appears on the navbar when it overlaps with the sidebar. https://i.sstatic.net/eHh0u.png Currently, I am using Material-UI's AppBar component for my NavBar. export default function NavBar() { return ( <div&g ...
If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...
I've been experimenting with different methods to align elements on the same line, such as using bootstrap and flexbox. However, I haven't been able to achieve the desired result. The goal is for the elements to stay on the same line even when th ...
Looking for a CSS trick to create a video background that spans the full width of the browser and auto resizes with the browser size. It's essential that it plays on Safari, so please specify the supported video file types. ...
Is there a way to extract the value from the following HTML element using Webdriver-IO for automated testing? <div class="metric-value ng-binding" ng-style="{'font-size': vis.params.fontSize+'pt'}" style="font-size: 60 ...
Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...
Having an issue with a clip path in my CSS. When I apply the clip path to my CSS fill, the image isn't showing up... I'm using Chrome. Any ideas on how to fix this? I found this helpful generator https://example.com .card .content .picture img { ...
I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...
HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...
I'm working on a simple webgrid that has 3 columns: View columns: grid.Columns( grid.Column("Applicant Name", format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId }, null), style: "AppN ...
Currently, I am attempting to target the final element of a child that lacks a specific class. You can view my progress on this JSFiddle. <aside class="col2"> <div class="infobox teal"></div> <div class="infobox mediumbrown"&g ...
On my screen, I have 3 buttons with varying sizes determined by their padding. As the text wraps within each button, they adjust in height accordingly. However, the issue arises when the buttons end up being different heights. Instead of setting a specific ...