0

Preciso de fazer uma time line, para isso estou a utilizar uma barra de progresso.

inserir a descrição da imagem aqui

Mas estou com 1 problema, os riscos vermelhos, correspondem a dividir as horas, mas nao batem certo, como podemos ver no ultimo risco vermelho sai de dentro da barra, e as horas nao batem certo tambem.

Na imagem podemos vereficar que o risco vermelho que divide as 2h e as 3h nao esta corretamente possicionado.

Alguem sabe alguma maneira que eu possa fazer as divisórias das horas e que bata certo?

Cada hora vale 10% ou seja 1h - 10%; 2- 20% e assim sucessivamente.

<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>  

1 Resposta 1

3

Como você não colocou o código do texto das horas, a solução apenas para acertar a barra é usando box-sizing: border-box; nas divs, pois assim a borda ficará dentro do elemento e não fazendo com que ele tenha mais 2px de largura além do tamanho do 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>

4
  • 1
    vlw demais, muito obrigado, imensamente grato
    – Ricardo
    21/11/2019 às 16:59
  • pode me so explicar o funcionamento do *{position:relative }
    – Ricardo
    21/11/2019 às 17:06
  • Cara, um elemento com position: absolute precisa estar dentro de um elemento com position: relative para que você possa posicioná-lo dentro desse elemento, senão ele será posicionado em relação ao primeiro elemento pai que tiver o relative, ou se não encontrar, ao body.
    – Sam
    21/11/2019 às 19:03
  • 1
    entendi, muito obrigado!
    – Ricardo
    22/11/2019 às 9:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .