Question 235751 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Give numbers with vertical line to list items in responsive way (HTMl & CSS)

I want to create a list using HTML & CSS shown as below:

Expected Output:
Expected Output Image
But getting below output.

Actual Output:
Actual Output Image
As you see, the line is collapsing on text and numbers. I want text besides of vertical line. And line should be on backward of number element.
Also, the output is not responsive.
Please help me to create responsive code for the expected output shown in above image with html & css.

.info-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.number{
    background-color: #0097b2;
    line-height: 25px;
    padding:6px;
    border-radius: 100%;
}
.info-timeline ul li span.timeline-circle {
  position: relative;
  border: 2px solid #38b6ff;
  border-radius: 25px;
  width: auto;
  line-height: 25px;
  text-align: center;
  margin-top: 50px;
  background-color: #38b6ff;
  z-index: 2;
    color: white;
  display: inline-block;
}

.info-timeline ul li:not(:first-of-type) span.timeline-circle::before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}

.info-timeline ul li a {
  color: #000;
}
<div class="info-timeline">
  <ul>
    <li>
            <span class="timeline-circle">
                <span class="number">
                    1
                </span>
        31/12/2016 11:28 AM (John Doe):
        </span>
            <span>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley   of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the   release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </span>
        </li>
    <li>
      <span class="timeline-circle">
        <span class="number">
          2
        </span> 31/12/2016 11:28 AM (Maria Harry Potter): 
      </span>
      <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
      </span>
    </li>
    <li>
      <span class="timeline-circle">
        <span class="number">
          3
        </span> 31/12/2016 11:28 AM (John Faf Doe):
      </span>
      <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.         </span>
    </li>
    <li>
      <span class="timeline-circle">
        <span class="number">
          4
        </span> 31/12/2016 11:28 AM (John Doe):
      </span>
      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
      </span>
    </li>
  </ul>
</div>
Tags:

2

Answers


  1. 0
    • Simplify your HTML markup. Remove unnecessary tags.
    • Use CSS counter to customise the LI’s numbered bullets
    • Use CSS rem units instead of px as often as you can
    • Use border-left on the LI to trace the line, and remove border from the last LI element
    • Use negative margin to unpull the bullets to overlay the border.

    Here’s a slight remake of your example:

    /*QuickReset*/ * { margin: 0; box-sizing: border-box; }

.timeline {
  list-style: none;
  counter-reset: timeline;
  padding: 1rem;
  
  & li {
    padding: 0 0 1rem 1rem;
    border-left: 2px solid #000;
    
    &:last-child {
      border: none;
    }
  }
}

.timeline-circle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-right: 1rem;
  border-radius: 3rem;
  background-color: #38b6ff;
  color: #fff;
  margin-left: -1.8rem;
  
  &::before {
    counter-increment: timeline;
    content: counter(timeline);
    display: inline-flex;
    align-items: center;
    background-color: #0097b2;
    border-radius: 3rem;
    height: 1.4rem;
    padding: 0 0.5rem;
  }
}
    <ul class="timeline">
  <li>
    <span class="timeline-circle">31/12/2016 11:28 AM (John Doe):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </li>
  <li>
    <span class="timeline-circle">31/12/2016 11:28 AM (Maria Harry Potter):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
  </li>
  <li>
    <span class="timeline-circle"> 31/12/2016 11:28 AM (John Faf Doe):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type.
  </li>
  <li>
    <span class="timeline-circle">31/12/2016 11:28 AM (John Doe):</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type.
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    Try this:

    <style>
    .info-timeline ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .info-timeline ul li {
        overflow-y: hidden;
    }
    .info-timeline ul li span.dateBlock {
        background-color: #38b6ff;
        color: white;
        border: 2px solid #38b6ff;
        border-radius: 25px;
        line-height: 25px;
        text-align: center;
        float: left;
        display: inline-block;
    }
    .info-timeline ul li span.circle {
        display: block;
        width: 25px;
        height: 25px;
        background-color: #0097b2;
        color: white;
        line-height: 25px;
        text-align: center;
        border-radius: 100%;
        float: left;
        position: relative;
    }
    .info-timeline ul li span.date {
        display: inline-block;
        padding: 0 5px;
    }
    .info-timeline ul li span.circle::before {
        content: '';
        display: block;
        width: 1px;
        height: 1000px;
        background-color: #999;
        position: absolute;
        left: 12px;
        top: 25px;
    }
    .info-timeline ul li:last-child span.circle::before {
        content: none;
    }
    .info-timeline ul li span.block p {
        margin-top: 0;
        line-height: 30px;
        padding-left: 32px;
        text-indent: 10px;
    }
</style>

<div class="info-timeline">
    <ul>
        <li>
            <span class="block">
                <span class="dateBlock">
                    <span class="circle">1</span>
                    <span class="date">31/12/2016 11:28 AM (John Doe):</span>
                </span>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                    unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
                    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
                    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
            </span>
        </li>
        <li>
            <span class="block">
                <span class="dateBlock">
                    <span class="circle">2</span>
                    <span class="date">31/12/2016 11:28 AM (Maria Harry Potter):</span>
                </span>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
            </span>
        </li>
        <li>
            <span class="block">
                <span class="dateBlock">
                    <span class="circle">3</span>
                    <span class="date">31/12/2016 11:28 AM (John Faf Doe):</span>
                </span>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                    unknown printer took a galley of type.
                </p>
            </span>
        </li>
    </ul>
</div>

    The result should be like this:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search