Progress Bar with hours

Asked

Viewed 77 times

0

I need to make a time line, for that I’m using a progress bar.

inserir a descrição da imagem aqui

But I got a problem, the red scratches, they match the hours, but they don’t add up, as we can see at the last red scratch, it comes out of the bar, and the hours don’t add up either.

In the image we can see that the red risk that divides the 2h and the 3h is not correctly possible.

Does anyone know any way that I can make the time dividers and it checks out?

Each hour is worth 10% ie 1h - 10%; 2- 20% and so on.

<div style="height: 25px;" class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="<?=$timeline?>" aria-valuemin="0" aria-valuemax="100" style="width:<?=$timeline?>%"></div>

                    <div style="width: 10%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 20%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 30%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 40%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 50%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 60%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 70%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 80%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 90%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
                    <div style="width: 100%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
</div>
html css

1 answer

3


Since you have not put the code of the time text, the solution just to hit the bar is using box-sizing: border-box; on Divs, so the edge will stay inside the element and not make it more 2px wide than the size of the width:

.progress-bar{
   background: blue;
   height: 20px;
   display: inline-block;
}

*{
   position: relative;
}

/* INSIRA ESTE AQUI! */
.progress div{
   box-sizing: border-box;
}
<div style="height: 25px;" class="progress">
     <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>

     <div style="width: 10%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 20%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 30%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 40%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 50%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 60%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 70%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 80%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 90%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
     <div style="width: 100%; position: absolute; top: 0px; border-right: 2px solid #ff1100;">.</div>
</div>

  • 1

    vlw too much, thank you so much, immensely grateful

  • can only explain the functioning of *{position:relative }

  • Dude, an element with position: absolute needs to be inside an element with position: relative so that you can position it within that element, otherwise it will be positioned relative to the first parent element that has the relative, or if not, to body.

  • 1

    I got it, thank you very much!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.