CSS3:Fazendo A Sobreposição De Div

Question

Estou tentando criar este efeito utilizando o HTML em UIWebView controle do iOS.O objetivo é criar o efeito de barra de progresso na listagem.Até então eu tentei este mas como você vê, adicionando um preenchimento na diV torna tudo confuso.Como posso conseguir efeito semelhante?Eu não tenho nenhum problema de usar tabela, mas parece que seria mais difícil.

Obrigado

Answer 1

No código que você forneceu, você tem essa div:

<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'>&nbsp;</div>

Basta adicionar o "top:0px;" a ele para que ele se torne

<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'>&nbsp;</div>

E ele vai olhar correto.

Editar:E, em seguida, dar o LI elementos position: relative para fazê-lo funcionar com vários elementos.Ver http://jsfiddle.net/tFn78/9

Outra versão que é um pouco mais limpa: http://jsfiddle.net/v7zNn/ e ajusta a variável altura do título.

Answer 2

Porque não usar divs aninhadas e dar interior Div percentagem de largura.

<div><div class="inner"></div></div>

E o CSS:

div {
    background-color: blue;
    height: 30px;
}
.inner {
    width: 50%;
    background-color: skyblue;
}

Desde divs são a nível de bloqueio do elemento que tem 100% de largura por padrão, então você não precisa especificar explicitamente para o exterior div se isso é o suficiente.

Outra possibilidade seria a utilização de um gradiente do plano de fundo e apenas mover alterar o background-position.