Estou criando um alerta de horário funcionando com scroll para tablets e celulares, me baseando no projeto Spinning Wheel, encontrado em https://github.com/mcfedr/Spinning-Wheel/blob/master/index.html
O problema, é que em meu projeto, o alerta deve aparecer no meio da tela, e no projeto original, vários elementos estão sobre várias regras CSS diferentes (divs como #sw-wrapper ,#sw-slots , #sw-frame, etc). Até consigo colocar algumas DIVs no meio da tela, mas elas ficam todas desalinhadas. E até chegam a perder a funcionalidade do scroll. Também já tentei colocar todos os elementos dentro duma div, mas não funcionou.
Existe algum conceito de CSS que eu não tenha assimilado? Existe alguma forma inteligente de solucionar isso?
Algumas modificações que fiz do código para tentar isso
No CSS do body coloquei (para tentar levar todas as DIVs)
alarme
{
position: fixed;
top: 50%;
}
nas DIVs tentei usar um
{ position: absolute;
bottom: 50%;
}
No javascript, aonde encontro:
div.innerHTML = '<div id="sw-header"><div id="sw-cancel">....</div>
Tentei forçar uma DIV minha com:
div.innerHTML = '<div id="alarme"><div id="sw-header"><div id="sw-cancel">....</div>