developing a tri-step program to assist the user

Question

developing a tri-step program to assist the user

Is there a way to create responsive circles with equal width and height, center the horizontal line, and also center the numbers in the middle of the circle?

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.Progress_Bar {
  display: flex;
  justify-content: center;
  border: 3px solid royalblue;
  align-items: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  text-align: center;
}

.HR_line {
  border: 2px solid grey;
  flex-grow: 0.1;
  margin: 0;
}

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>

html css ejs

Answer 1

Answer №1

If you want to move titles outside of the flex flow, here's how:

.Circle_Text_Container {
  position: relative; /* Establishes context for absolute positioning in child elements */
}

.Circle_Text_Container > p {
  position: absolute; /* Positioned relative to the last element with position set to relative */
  top: 100%; /* Distance from the top */
}

This ensures that the flex size matches the height of the circle.

To center text within circles, you can utilize flex properties like this:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

By the way, there are various methods for centering content inside a div, to the point where it's almost become a meme. If you're curious, check out this StackOverflow Question addressing this common issue.

The final result will look something like this:

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.Progress_Bar {
  display: flex;
  justify-content: center;
  border: 3px solid royalblue;
  align-items: center;
}

.Circle_Text_Container {
  position: relative; /* Establishes context for absolute positioning in child elements */
}

.Circle_Text_Container > p {
  position: absolute; /* Positioned relative to the last element with position set to relative */
  top: 100%; /* Distance from the top */
  left: 0;
  right: 0;
  text-align: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

.HR_line {
  border: 2px solid grey;
  flex-grow: 0.1;
  margin: 0;
}

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>

To adjust how far the text extends beyond the labels before and after the circle, you can modify the left and right properties on Circle_Text_Container > p.

Answer 2

If you want to move titles outside of the flex flow, here's how:

.Circle_Text_Container {
  position: relative; /* Establishes context for absolute positioning in child elements */
}

.Circle_Text_Container > p {
  position: absolute; /* Positioned relative to the last element with position set to relative */
  top: 100%; /* Distance from the top */
}

This ensures that the flex size matches the height of the circle.

To center text within circles, you can utilize flex properties like this:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

By the way, there are various methods for centering content inside a div, to the point where it's almost become a meme. If you're curious, check out this StackOverflow Question addressing this common issue.

The final result will look something like this:

.DCQ_Container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.Progress_Bar {
  display: flex;
  justify-content: center;
  border: 3px solid royalblue;
  align-items: center;
}

.Circle_Text_Container {
  position: relative; /* Establishes context for absolute positioning in child elements */
}

.Circle_Text_Container > p {
  position: absolute; /* Positioned relative to the last element with position set to relative */
  top: 100%; /* Distance from the top */
  left: 0;
  right: 0;
  text-align: center;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: whitesmoke;
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

.HR_line {
  border: 2px solid grey;
  flex-grow: 0.1;
  margin: 0;
}

<div class="DCQ_Container">
  <h1 class="Steps_Head"> DCQ Step 1 / 3 </h1>
  <div class="Progress_Bar">
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>1</p>
      </div>
      <p>User Name</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>2</p>
      </div>
      <p>Location</p>
    </div>
    <hr class="HR_line" />
    <div class="Circle_Text_Container">
      <div class="circle">
        <p>3</p>
      </div>
      <p>Buisnesss</p>
    </div>
  </div>
</div>

To adjust how far the text extends beyond the labels before and after the circle, you can modify the left and right properties on Circle_Text_Container > p.

developing a tri-step program to assist the user

Answer №1

Similar questions

Selenium Webdriver faced challenges in identifying dynamically created scripts using CSS selectors

Activate jquery code during interaction

Checking the validity of user input statements

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

Tips for preserving dynamically generated HTML through Javascript during page reload

The checkbox is failing to display as checked even after its value has been dynamically set to true

What causes divs to be interspersed among other divs when Float is enabled?

Build a bootstrap table with rounded corners

Error: Trying to access the parent node of an undefined property

What steps can I take to ensure that the full tingle modal, which includes an image, is visible when the

Developing a system mode called "night mode"

.mouseleave() triggers when exiting a designated boundary area

When attempting to retrieve the value of my select element, I encounter difficulty due to a hidden field that only becomes visible when a certain option is selected

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

section containing image on the left side and title and text on the right side

Adapt to screen size changes by transforming a single row into two separate rows

Introduction to Flask with GAE (blank Firefox tab)

Modify button text when hovered over

Setting up multiple classes in my unique situation

Tips for Embedding React into a Specific ID using Hooks on an HTML Document