Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

joao

Divs

Por , em Desenvolvimento frontend

Recommended Posts

joao    0

joao
Postado

Olá pessoal.Eu tenho 3 divs, que chamo elas via JavaScript para aparecer quando clicar (onclick).O Layout do sistema, esta centralizado, sendo assim, qualquer resolução vai estar centralizado, em 800x600, 1024x768, etc. Existe uma forma de definir que as divs fiquem sempre no meio do layout, em qualquer resolução. O ID de cada div:

<style>#clientes { position:absolute; left:246px; top:272px; width:227px; height:174px; z-index:10; overflow: hidden; visibility: hidden;  border: 4px solid #ECECEC; background-image: url(../imagens/fundoclientes.gif); background-repeat: repeat-y;}#recentes { position:absolute; left:476px; top:272px; width:270px; height:174px;  z-index:10; overflow: hidden; visibility: hidden; border: 4px solid #ECECEC; background-image: url(../imagens/fundorecentes.gif); background-repeat: repeat-y;}#financeiro { position:absolute;  left:738px; top:272px; width:270px; height:174px; z-index:10; overflow: hidden; visibility: hidden; border: 4px solid #ECECEC; background-image: url(../imagens/fundofinanceiro.gif); background-repeat: repeat-y;}</style>

Eu defini em pixel, para e minha resolução é 1280x1024, e fico certo, abri em 800x600 e 1024x700 deu barra de rolagem na horizontal, por causa da div.

Compartilhar este post

Link para o post
Compartilhar em outros sites

dmarcosm    0

dmarcosm
Postado

E ai cara. Tudo bem?!

 

Olha. De acordo com os meus conhecimentos, não será possível você centralizar a div com CSS porquê você está usando posicionamento absoluto (...

position:absolute; ...). E, pelo menos que eu saiba, não há uma forma de você pegar a resolução da tela do usuário via CSS.

Portanto, acho que a solução seria você usar JavaScript. Na função que você chama no evento onClick para mostrar a div, você irá definir a posição Left da div. Ex.:

 

<html>
<head>
<title>Página de Teste</title>
<style>
#divTeste {
position:absolute;
width:227px;
height:174px;
z-index:10;
overflow: hidden;
visibility: hidden;
border: 4px solid #ECECEC;
background-image: url(../imagens/fundoclientes.gif);
background-repeat: repeat-y;
}
</style>
<script>
function mostraDiv() {
obj = document.getElementById("divTeste");
obj.style.left = (screen.width - obj.offsetWidth) / 2;
obj.style.visibility = "visible";
}
</script>
</head>
<body>
<a href="#" onClick="mostraDiv();">Mostrar</a><br>
<div id="divTeste">
  Aqui está o div.
</div>
</body>
</html>

 

Espero ter ajudado. Abraço. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito