Position two div elements and an hr tag to create a step progress bar

Check out my progress bar design https://i.sstatic.net/u9SRM.png

  1. How can I center the 'created' and 'assigned' divs below the circle while ensuring the 'hr' line touches the circle, and it is responsive across different screen sizes?
  2. Any tips on how to create a perfect circle here?

Here's the HTML:

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div>

And the CSS:

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: 25px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

Thanks in advance for your help :)

htmlcssfrontendline

Answer №1

To improve the appearance of a circle, consider using padding instead 

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
 align-items:center
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
padding:15px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}
<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div>

Simply add align-items: center to your CSS and utilize padding over width and height

.progress {
   display: flex;
   align-items: center;
}

    .filledCircle {
      padding: 15px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
    }

Answer №2

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: calc(25px * 2);
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}
<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Developing</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Testing</div>

    </div> 
</div>

Answer №3

Solution:

My approach involved leveraging CSS grids to neatly organize the circle, line, and text elements within them while ensuring they are centered appropriately.

display: grid;
  grid-template-columns: [colstart]1fr  [two]1fr [three]2fr [four]1fr [five]1fr [colend];
  grid-template-rows: [rowstart]80% [rowcenter] auto[rowend];

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

issues with alignment between bootstrap div and canvas

I am currently working on a project with a canvas inside a div using three.js. My goal is to display a purple bar for user settings on the right side of the three.js window. However, I am encountering an issue where Bootstrap is not recognizing that I want ...

htmlcssangularbootstrap-4three.js

Trouble arising when implementing media queries alongside jQuery

When the screen size is 768px, I need to trigger the code below by clicking on the next button. However, an issue arises when trying to revert back to the original style after changing the screen size: $(document).ready(function() { alert(); $ ...

jquerycss

Adjust grid column sizes automatically when a smaller number is declared - tailwind

I am working with the tailwind grid system and have specified 6 columns for each row. However, if the number of elements is less than 6, I would like it to resize them to 3. <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 grid-flow-r ...

cssgridtailwind-css

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

javascriptcssunit-testingbrowsersyntax-error

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

javascripthtmlangularjsng-show

Unveiling the hidden secrets of HTML code through scraping

Looking to extract data from the cadastral records in Poland available at . Specifically, I am interested in retrieving information from the element tagged with id 'gfi_0'. The challenge is that this element is not immediately accessible; it only ...

pythonhtmlseleniumweb-scrapinghtml-table

Importing Data from Wordpress JSON Feed to Create a Table

Struggling with organizing my data into a table, as each row is currently generating a new table. Utilizing the JSON Content Importer with the following code: ...

phphtmljsonwordpress

Creating a dynamic dropdown menu based on a class value using JavaScript in PHP

There are two dropdown menus on my webpage that display information from my SQL table. The first dropdown contains different "Colors," and the second dropdown contains members associated with each color group. Each member is categorized into different optg ...

javascriptphpjqueryhtmldrop-down-menu

chaotic telerik editor arrangement

I have incorporated the Rad Editor into my ASP.NET page. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadEditor ID="reSummery" runat="server" > </telerik:RadEditor> Despite not referencing ...

javascriptasp.netcsstelerikstyles

Insert a new <tr> element into a dynamic table using PHP and jQuery without the need to refresh the page

I am attempting to dynamically insert a row into an existing table when a button is clicked. The rows in the table are created dynamically based on data retrieved from a PHP script. My approach involves making an ajax call to the insert_tr.php script, whi ...

javascriptphpjqueryhtmlajax

Designing websites and Creating Visual Content

I have been working in IT for quite some time now, but recently I have started to delve more into web development. My main focus is on HTML 5, CSS 3, JavaScript, jQuery, and responsive design. However, one aspect that I always struggle with is images. I am ...

htmlcssresponsive-designimage-sizeimage-editing

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

htmlcss

Resetting a component's color to its default state after being styled by a parent selector

The Bootstrap stylesheet contains the following code: pre code { color: inherit; } Even if I include an explicit pre code { color: red; }, the style from Bootstrap's stylesheet still takes priority. Why does this happen? [Edit: can ignore this ...

csstwitter-bootstrapbootstrap-4

Unable to access Vimeo video via embedded link - Link appears to be broken

I've embedded a responsive Vimeo video within a link, but the link is not functioning and does not show a cursor upon hovering. Any suggestions on what could be causing this issue? .container { position: relative; margin-bottom: 20px; max-width: ...

htmlcssvimeo-player

"Enhance your website with Ajax code that enables automatic refreshing of a PHP file, keeping its values up-to-date

Before diving in, I want to make it clear that my understanding of ajax is limited. I'm currently working on a small application where I have a load.php file that echoes 3 variables: $loadout[0]; $loadout[1]; $loadout[2]; The PHP file is functioning p ...

javascriptphpjqueryhtmlajax

I am having trouble showing the background image in the div

I created a 960 layout using 3 divs to easily organize child divs with images and text. However, I'm having trouble getting the background image of the first div to display. Can you help me figure out what I'm doing wrong? This is the concept f ...

csshtmlbackground-imagechildren

Can React JSX and non-JSX components be combined in a single project?

I'm currently faced with a question: If I have a parent component in JSX but need to include an HTML tag like <i class="fa fa-window-maximize" aria-hidden="true"></i>, which is not supported by React JSX (correct me if I'm wrong), can ...

javascripthtmlreactjsjsx

Arranging h1 tags within a container id

Seeking assistance with aligning specific classes in a certain way: "left" should align to the left part of #header, "links" should be centered, and "right" should align to the right of #header. Additionally, I want the icons to align vertically with the t ...

htmlcssalignment

Problem arises with table nth-child selector following the addition of grid-gap

Our current table looks like this: The first row has a background color and the second row is white - which is correct. Now I would like to align the attributes to the right. I added the following code to the table: .table-wrapper tbody { font-size: ...

javascripthtmlcss