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

Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

Create a Bootstrap div containing a button that adjusts to different screen sizes on the

unable to retrieve data using ajax

A checkbox placed within an anchor tag

Adding an id to a ul tag using JavaScript

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

CSS designed for small-screen laptops is also being utilized on iPads running Safari

Utilize Bootstrap-Vue to ensure that an element expands to occupy the available space

Coding with Angular 4 in JavaScript

Which slider was featured in the unity3d.com/5 website?

Block entry to HTML files unless the user has logged in utilizing PHP sessions

What are some ways in which I can utilize the Ember Handlebars helper?

Access specific data from a jQuery event

Issue with readonly is preventing the ability to alter the font color of the input

Is there an easy method to verify if the local storage is devoid of any data?

Tips for extracting title and image from someone else's blog posts to share on your own website

Ways to execute a function when clicking on a date using HTML 5 datepicker input type

Can WebGL be configured to render offscreen without its canvas being directly connected to the DOM?

Padding-left in InfoBox

What is the best way to horizontally align an inline div using CSS?