html - How to display horizontal timeline using css

Question

I am creating a horizontal timeline using CSS. I tried below code but I am not getting my expected output. I think there is some issue with position or odd even css.Also, I am getting the horizontal scroll in my code.

Please check my code and assist me where I added the wrong css.

Would you help me out with this issue?

My expected output is

.i_timeliner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.i_timeliner li {
  float: left;
  width: 20%;
  position: relative;
  display: inline-block;
  list-style-type: none;
  height: 3px;
  background: #fff;
}

.i_timeliner li:before {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 3px solid #000;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #000;
  letter-spacing: 0px;
}

.i_timeliner li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  top: 25px;
  left: 0%;
  z-index: -1;
}

.i_timeliner_box {
  border: 1px solid #ccc;
  margin: 20px;
  min-height: 140px;
  box-sizing: border-box;
  padding: 0 25px;
}

.i_timeliner ul li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.i_timeliner ul li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.i_timeliner ul li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.i_timeliner ul li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.i_timeliner ul li:nth-child(even) div {
  top: calc(100% + 16px);
}

.i_timeliner ul li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

<div class="i_timeliner">
  <ul>

    <li>
      <div class="i_timeliner_box">
        <h2>1</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>2</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>3</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>4</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>5</h2>
        <p></p>
      </div>
    </li>
  </ul>

</div>

Answer 1

I recommend using SCSS or LESS in complex cases like this one, for an easier read of your CSS. I've written this CSS using SCSS ( https://jsfiddle.net/e61oqsdz/ ) then i compiled it on some online site to CSS.

SCSS version with explanation:

$li-height: 50px; // set li height here
$marginRight: 5%; // set margin right - the same unit must be used on $li-width so the width 
                  // will be $marginRight smaller(if using % so 100% can be achieved).

$li-width: 20% - $marginRight;

.i_timeliner{
  width: 100%;
  position:relative;
  display: inline-block;

  ul{
    width: inherit;
    margin:0;
    padding:0;
    list-style:none;
    height: auto;
    font-size:0; // remove the invisible spaces between the `li` elements 

    li{

      position: relative;
      display: inline-block;
      vertical-align:top;
      box-shadow: 0px 0px 1px 2px #000 inset; // add shadow instead of border
      // borders will stack with your width, and even when your elements have 
      // a total of 100% will get pushed on the next row 
      // if you have border on any one of them
      width: $li-width;
      height: $li-height;
      margin-right: $marginRight;

      .i_timeliner_box{
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        font-size: 0.8rem;

        *{margin:0;}

      }

      &:nth-child(2n){ // here i'm pushing the even numbers from top
        margin-top: $li-height * 1.5; // 1.5 ratio means 'one height + half-of-height' 
        // so we can have the vertical space between blocks
      }

      &:last-child{
        // this is your delimiter, it's an empty li, with overwritten properties
        position: absolute;
        left:0;
        top: $li-height * 1.25; // 1.25 - is the ratio for position to middle. Since we 
        // already have a ratio of 1.5 for even elements, the 0.5 is the space gap, splitting 
        // in half the space gap is 0.25, right where our delimiter should be, 
        // adding a $li-height to it, we get 1.25
        background: red;
        box-shadow: none;
        border:0;
        height: 2px;
        width: 100%;
        margin: 0;
        font-size:0;

      }


    }

  }

}

.i_timeliner {
  width: 100%;
  position: relative;
  display: inline-block;
}

.i_timeliner ul {
  width: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
  height: auto;
  font-size: 0;
}

.i_timeliner ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-shadow: 0px 0px 1px 2px #000 inset;
  width: 15%;
  height: 50px;
  margin-right: 5%;
}

.i_timeliner ul li .i_timeliner_box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}

.i_timeliner ul li .i_timeliner_box * {
  margin: 0;
}

.i_timeliner ul li:nth-child(2n) {
  margin-top: 75px;
}

.i_timeliner ul li:last-child {
  position: absolute;
  left: 0;
  top: 62.5px;
  background: red;
  box-shadow: none;
  border: 0;
  height: 2px;
  width: 100%;
  margin: 0;
  font-size: 0;
}

<div class="i_timeliner">
  <ul>

    <li>
      <div class="i_timeliner_box">
        <h2>1</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>2</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>3</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>4</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>5</h2>
        <p></p>
      </div>
    </li>
    <li></li>
  </ul>

</div>