Placing markers on a straight path

Question

Placing markers on a straight path

Struggling to create a CSS component where the first and last points don't align properly with the ends of the line.

This component should be able to handle any number of points (between 1 and 4) without relying on flexbox.

I have a React component generating HTML like this:

<div class="row">
  <div class="col first" style="width:33%">
    <div class="marker complete"></div>
    <label>Feedback</label>
  </div>
  <div class="col" style="width:33%">
    <div class="marker partial"></div>
    <label>Observation</label>
  </div>
  <div class="col last" style="width:33%">
    <div class="marker review"></div>
    <label>Documentation</label>
  </div>
</div>

The JavaScript calculates column sizes before rendering, and I'm currently centering content in each column in my Codepen demo.

To position the end items, I've used the `first` and `last` classes for relative positioning, but when the screen size changes, the line edges start showing behind the points. Any suggestions for a better layout approach?

html css

Answer 1

Answer №1

To create a horizontal bar between circles, one approach could be to define the row as display: table-row, and then utilize a pseudo element for the bar. However, a challenge arises as CSS and HTML alone cannot determine the precise position of the first and last circle within the container. Consequently, achieving a full-width effect becomes difficult.

Alternatively, you can use the labels as anchor points for the pseudo elements since they always span the entire column width, providing clear reference points.

The proposed solution, available at this link, is compatible with IE9 and relies on using calc and after. (If preferred, transform: translate can replace calc.)

The concept involves utilizing a table row that dynamically adjusts its size and leveraging the labels to construct the progress bar.

label:after {
  content: "";
  height: .5em;
  background: #e2e2e2;
  width: 100%;
  position: absolute;
  top: calc((100% - 1.5em) / 2); /* Adjusted for text and bar height */
  left: 0;
  z-index: -1;
}

.first label:after, .last label:after {
  width: 50%;
}

.first label:after {
  left: auto; 
  right: 0;
}

.single label:after {content: none;}

Answer 2

To create a horizontal bar between circles, one approach could be to define the row as display: table-row, and then utilize a pseudo element for the bar. However, a challenge arises as CSS and HTML alone cannot determine the precise position of the first and last circle within the container. Consequently, achieving a full-width effect becomes difficult.

Alternatively, you can use the labels as anchor points for the pseudo elements since they always span the entire column width, providing clear reference points.

The proposed solution, available at this link, is compatible with IE9 and relies on using calc and after. (If preferred, transform: translate can replace calc.)

The concept involves utilizing a table row that dynamically adjusts its size and leveraging the labels to construct the progress bar.

label:after {
  content: "";
  height: .5em;
  background: #e2e2e2;
  width: 100%;
  position: absolute;
  top: calc((100% - 1.5em) / 2); /* Adjusted for text and bar height */
  left: 0;
  z-index: -1;
}

.first label:after, .last label:after {
  width: 50%;
}

.first label:after {
  left: auto; 
  right: 0;
}

.single label:after {content: none;}

Answer 3

Answer №2

Here is the solution you've been searching for.

<div class="row">
  <div class="col" style="width:33%">
    <div class="marker marker1 complete"></div>
    <label>Feedback</label>
  </div>
<div class="col2" style="width:33%">
    <div class="marker marker2 partial"></div>
    <label>Observation</label>
</div>
<div class="col3" style="width:33%">
   <div class="marker marker3 review"></div>
     <label>Documentation</label>
   </div>
</div>

Check out the code here

*If JavaScript is allowed, conditions can be added based on number and word length to adjust marker indentations.

I utilized display blocks, margins, and secondary marker classes for each block.

Answer 4

Here is the solution you've been searching for.

<div class="row">
  <div class="col" style="width:33%">
    <div class="marker marker1 complete"></div>
    <label>Feedback</label>
  </div>
<div class="col2" style="width:33%">
    <div class="marker marker2 partial"></div>
    <label>Observation</label>
</div>
<div class="col3" style="width:33%">
   <div class="marker marker3 review"></div>
     <label>Documentation</label>
   </div>
</div>

Check out the code here

*If JavaScript is allowed, conditions can be added based on number and word length to adjust marker indentations.

I utilized display blocks, margins, and secondary marker classes for each block.

Answer 5

Answer №3

.row {
  display: table;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.col {
  display: table-cell;
  width: 33%;
  text-align: center;
}
.marker {
  width: 30px;
  height: 30px;
  background-color: lightgray;
  border-radius: 30px;
  margin: 0 auto;
}
.complete {
  background-color: blue;
}
.partial {
  background-color: blue;
  box-sizing: border-box;
  border: 8px solid lightgray;
}
.review {
  background-color: lightblue;
}
.col:not(:last-child) > .marker:after {
  content: '';
  display: inline-block;
  width: 67%;
  height: 0;
  border: 3px solid lightgray;
  position: absolute;
  left: 16.5%;
  top: 12.5px;
  z-index: -10;
}
/* ------------------------------------------- */

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
}
.point {
  height: 30px;
  background-color: lightgray;
  border-radius: 30px;
  flex: 0 0 30px;
  position: relative;
}
.line {
  height: 0;
  border: 3px solid lightgray;
  flex: 1 0;
}
.blue {
  background-color: blue;
}
lightblue {
  background-color: lightblue;
}
.border {
  background-color: lightgray;
  background-image: radial-gradient(at center center, blue 0, blue 8px, transparent 8px, transparent 100%);
}
.point label {
  position: absolute;
  left: -50%;
  top: 100%;
  text-align: center;
}

<h1>Non flex</h1>
<div class="row">
  <div class="col first">
    <div class="marker complete"></div>
    <label>Feedback</label>
  </div>
  <div class="col">
    <div class="marker partial"></div>
    <label>Observation</label>
  </div>
  <div class="col last">
    <div class="marker review"></div>
    <label>Documentation</label>
  </div>
</div>
<h1>Flex</h1>
<div class="wrapper">
  <div class="point blue">
    <label>Feedback</label>
  </div>
  <div class="line"></div>
  <div class="point blue border">
    <label>Observation</label>
  </div>
  <div class="line"></div>
  <div class="point lightblue">
    <label>Documentation</label>
  </div>
</div>

Answer 6

.row {
  display: table;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.col {
  display: table-cell;
  width: 33%;
  text-align: center;
}
.marker {
  width: 30px;
  height: 30px;
  background-color: lightgray;
  border-radius: 30px;
  margin: 0 auto;
}
.complete {
  background-color: blue;
}
.partial {
  background-color: blue;
  box-sizing: border-box;
  border: 8px solid lightgray;
}
.review {
  background-color: lightblue;
}
.col:not(:last-child) > .marker:after {
  content: '';
  display: inline-block;
  width: 67%;
  height: 0;
  border: 3px solid lightgray;
  position: absolute;
  left: 16.5%;
  top: 12.5px;
  z-index: -10;
}
/* ------------------------------------------- */

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
}
.point {
  height: 30px;
  background-color: lightgray;
  border-radius: 30px;
  flex: 0 0 30px;
  position: relative;
}
.line {
  height: 0;
  border: 3px solid lightgray;
  flex: 1 0;
}
.blue {
  background-color: blue;
}
lightblue {
  background-color: lightblue;
}
.border {
  background-color: lightgray;
  background-image: radial-gradient(at center center, blue 0, blue 8px, transparent 8px, transparent 100%);
}
.point label {
  position: absolute;
  left: -50%;
  top: 100%;
  text-align: center;
}

<h1>Non flex</h1>
<div class="row">
  <div class="col first">
    <div class="marker complete"></div>
    <label>Feedback</label>
  </div>
  <div class="col">
    <div class="marker partial"></div>
    <label>Observation</label>
  </div>
  <div class="col last">
    <div class="marker review"></div>
    <label>Documentation</label>
  </div>
</div>
<h1>Flex</h1>
<div class="wrapper">
  <div class="point blue">
    <label>Feedback</label>
  </div>
  <div class="line"></div>
  <div class="point blue border">
    <label>Observation</label>
  </div>
  <div class="line"></div>
  <div class="point lightblue">
    <label>Documentation</label>
  </div>
</div>

Placing markers on a straight path

Answer №1

Answer №2

Answer №3

Similar questions

Conceal portion in HTML until revealed

Take the information entered in an HTML form, add it to a JSON object, and save it in a MYSQL

Silhouette as the backdrop image

Tips for adjusting content that is 900px wide to fit properly on a mobile screen while maintaining its original width

Ways to incorporate a smooth transition between the opened and closed fab functionality

What is the best way to adjust the dimensions of an element so that it only fills the size of the initial window or

Adjust dropdown options based on cursor placement within textarea

Applying a variety of elements to a single function

Is it possible to establish a CSS minimum width that is relative to a different element?

Express Form Validation: Ensuring Data Accuracy

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

Best Practices for Implementing the 960 CSS Clear Class

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

Is there a way to change TTF files into OTF format?

What is the process of video buffering in HTML5?

Minify and group options available for asset managers specifically designed for traditional HTML websites

The Bootstrap dropdown feature is acting up when included in the header PHP file

Having trouble displaying an image using output buffering in PHP and HTML, only to end up with a broken image

Styling a dynamically-injected div using an AJAX request (xhrGet)

Particular arrangement of a table