Guide on assigning a dynamic margin-left value to a sibling div element that has absolute positioning in CSS

I'm facing some difficulty with the .half-circle:nth-child class in my CSS. I am attempting to set a varying margin-left value for each absolutely positioned <div> within the same class, but I am unable to achieve the desired result.

.header-paymentback-panel{
position: relative; 
float: left;
width: 225px;
height: 150px;
background: #f5f5f5;
border: 2px solid #eaeaea;
border-radius: 5px;
display: inline-block;
}

.half-circle {
position: absolute;
bottom: -2px;
float: left;
width: 45px;
height: 30px;
background-color: #fff;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border: 2px solid #eaeaea;
border-bottom: 0;
}

.half-circle:nth-child(n) {
 margin-left: /* (20px * item index) */
}

HTML:

<div class="header-paymentback-panel">

<div class="half-circle"></div>
<div class="half-circle"></div>
<div class="half-circle"></div>

</div>

I would greatly appreciate any assistance on this matter.

htmlcsscss-positionmargin

Answer №1

To create a visually appealing design, you can employ various background techniques, such as using a radial-gradient to form the circular patterns and a linear-gradient for the borders. Take a look at the demonstration provided below:

div {
  width: 225px;
  height: 150px;
  background: radial-gradient(circle at bottom, #fff 20px, #eaeaea 21px, transparent 23px) bottom left / 33.33% 25px repeat-x, /* circles repeating horizontally */
              linear-gradient(#eaeaea, #eaeaea) left / 2px 100% no-repeat, /* left border */
              linear-gradient(#eaeaea, #eaeaea) right / 2px 100% no-repeat,  /* right border */
              linear-gradient(#eaeaea, #eaeaea) bottom / 100% 2px no-repeat,  /* bottom border */
              linear-gradient(#eaeaea, #eaeaea) top / 100% 2px no-repeat,  /* top border */
             #f5f5f5 /* this color fills other areas */;
  border-radius: 5px;

}
<div></div>

Answer №2

To incorporate a parent for the .half-circle components.

For instance, create a .half-circle-container and apply position: absolute;

Subsequently, introduce the .half-circle elements with display: inline-block;

Following that, adjust the margin-left for .half-circle as necessary. Refer to the code snippet below:

.header-paymentback-panel {
  position: relative;
  float: left;
  width: 225px;
  height: 150px;
  background: #f5f5f5;
  border: 2px solid #eaeaea;
  border-radius: 5px;
  display: inline-block;
}

.half-circle-container {
  position: absolute;
  bottom: -2px;
  left: 0;
}

.half-circle {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 30px;
  background-color: #fff;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border: 2px solid #eaeaea;
  border-bottom: 0;
  margin-left: 20px; //Customize this value
}
<div class="header-paymentback-panel">
  <div class="half-circle-container">
    <div class="half-circle"></div>
    <div class="half-circle"></div>
    <div class="half-circle"></div>
  </div>
</div>

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

What is the method to add gutters in Material UI grid without including margins?

I've been struggling for ages to make my responsive layout work properly! Whenever I add spacing to the Grid container with class=spotlight, things get misaligned. How can I add spacing to the gutters (the space between Grid items within the spotlight ...

cssreactjsmaterial-ui

Display only the content that is within the container and visible

Within this demonstration, there are 2 divs present - one containing the text t, and the other containing the text s. Both of these divs are enclosed within the .items container. As it stands currently, both divs are visible. However, my goal is to modify ...

htmlcss

What steps should I take to resolve this animation issue?

My objective with this card animation is for the cards to expand in size when hovered over. Unfortunately, the current issue is that when one card is hovered over, all the other cards also expand, which is not the intended behavior. I am seeking a solution ...

htmlcssbootstrap-5

The CSS3 Animation-fill-mode: An Essential Property

I am working on a cool effect where text slides into the window and remains in place after the animation is complete. Surprisingly, I have managed to get the animation to work on one part of the text, but for some reason, the second part is not cooperating ...

htmlcssanimationcss-transitions

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

The click interactions of SVG elements are altered when switching between <img> and <object> elements

I currently have 4 SVG buttons featured in the main menu of my personal website. https://i.stack.imgur.com/gA7En.png /----------------------------------------------------------------------------------------------------------------------------------/ Upo ...

htmlcsssvggraphicsclick

Having difficulty adding a Dropdown Menu in a Pop-up Box

I am trying to incorporate a select menu inside of a popover, but every time I attempt to do so, the popover content block remains blank. The popover is associated with a side menu item called "Date History". Below is the code snippet I am using to constr ...

javascripthtmlbootstrap-4

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

javascriptjqueryhtmlcss

Angular 10: Unexpected Behavior with Observables

When I initially call addPost(), the observable behaves as expected with a 5-second delay. However, when I call it a second time, the data updates in the HTML without any delay. On the other hand, the same observable with deletePost() functions perfectly. ...

htmlangulartypescript

The impact of Jquery datatable version 1.10 on the dropdown component of Bootstrap version 5.1

On my website, I am utilizing Bootstrap v5.1 and Datatable v1.10 in my project. However, this version of Datatable is causing issues with the Bootstrap dropdown functionality. The dropdown menu is not opening as expected. Strangely, no errors are being gen ...

htmltwitter-bootstrapdatatablesbootstrap-5datatables-1.10

Exploring MaterialUI withStyles to customize disabled switches with a CSS override

As I work on my project using React and MaterialUI, I've encountered a problem with customizing inputs. Despite trying various selectors, I can't seem to change the black color of this particular input. It would be helpful to have a clearer way o ...

cssreactjsmaterial-uimaterial-designreact-with-styles

Combining choices with a PHP dropdown menu

Here's my PHP code: echo '<option' . if(isset($_SESSION['hoopSelect'])){ echo 'selected="'$_SESSION['hoopSelect'])'"';} . 'value='. $row_list['username'] . '>' . ...

javascriptphphtmlpostgresqlsession-variables

The submit button functions solely as a hyperlink to an anchor

Check out this code I have: <form enctype="multipart/form-data" id="search_form" name="search_form" action="thisfile.php#anchorname" method="get"> <!-- Numerous search fields are here --> <input name="search" type="submit" value="Search" ...

phphtmlcross-browser

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

javascripthtmlangularreactjs

Concealing the side navigation menu with HTML and CSS

Hey there, I'm trying to make my navbar automatically hide when the mouse is moved. I found an example that I want to use here. Despite reading some online documentation, I just can't seem to figure out how to do it. Here's a snippet of my c ...

htmlcssweb-applicationscss-transitions

Establishing the size of the <img> alternative for <source> within <picture> to enhance SEO and optimize page loading speed

In the following code snippet, I am aiming to achieve the following: Allowing the browser to choose between WEBP <source> and JPEG in<img> (as a fallback). Displaying the image at 754px width for viewport widths greater than 1058px. For small ...

htmlcssresponsive-designresponsive-imagessrcset

Validating Forms using JQuery

I am currently working on a jQuery AJAX code to validate specific fields in an HTML form before submission. If any errors occur during validation, I want the error message to be displayed in a div with the ID "response." However, the code doesn't seem ...

jqueryhtmlajax

Modifying Stroke color in HTML5 Canvas

I am attempting to create a unique visual effect by drawing a circle resembling a clock using canvas 2d context. The idea is to initially draw the circle in black starting at point p1, and then when I complete a full circle tour it should erase as the colo ...

javascripthtmlcanvasgraphics

JQuery is not able to render Hindi content properly

I am attempting to showcase some Hindi words using JQuery because these are essential contents that need to be displayed on every page of the website. Please note that this is a static website built with HTML and JQuery/JavaScript. Below is my JS file: in ...

javascriptjqueryhtml

Is it possible to retrieve the value of a span in a PHP contact form instead of an input?

I am in the process of setting up a contact form, and I have some valuable information saved within certain spans. Specifically, it's related to an ecommerce shopping basket. As the built-in checkout system is proving to be subpar, we are opting for a ...

phphtmlcontact-form