Centralizar DIV

Oczy · Julho 20, 2012

Ola Pessoal...

Ja tentei de todo jeito que eu conheco e nao consigo fazer este codigo funcionar no IE! ate em tablet funciona menos no IE :ermm: Por favor se alguém souber como fazer este código funcionar no IE ou tiver um que funcione em todos que faca a mesma coisa da um help.

Abracos a todos.

Segue o codigo:

<html>
<head>
<title>Debug - Div Centralizada</title>

<style type="text/css">
<!--
#dvPesquisa{
position:absolute;
border: 0px solid #4b87c6;
visibility: hidden;
width:80%; 
height:80%;
left:50%;
top:50%;
margin:-40% -40%;
background:#FFF;
}

#BG {
position:absolute;
width:100%;
height:100%;
left: 0px;
top: 0px;
visibility: hidden;
background-color: #000000;
opacity: 0.5;
opacity:0.5;
filter:alpha(opacity=50);
}
-->
</style>

<script language="javascript">

function AbrePesquisa(){
document.getElementById('dvPesquisa').style.visibility = 'visible';
document.getElementById('BG').style.visibility = 'visible';
}

function FechaPesquisa(){
document.getElementById('dvPesquisa').style.visibility = 'hidden';
document.getElementById('BG').style.visibility = 'hidden';
}

</script>

</head>

<body>

<div id="BG"></div><!--BG-->
   <div id="dvPesquisa"><a href="javascript:FechaPesquisa()">Fechar div</a></div><!--dvPesquisa-->

   <a href="#" onClick="AbrePesquisa()">Abre div </a>

</body>
</html>

Wanderson Valerio · Julho 20, 2012

#dvPesquisa{
       position:relative;
       border: 0px solid #4b87c6;
       visibility: hidden;
       width:80%; 
       height:80%;
       left:50%;
       top:50%;
       margin:-40% -40%;
       background:#FFF;
}

crf_h0m3r · Julho 20, 2012

@Wanderson Valerio

Acho que seria bom explicar o que você fez ou indicar algum tutorial que o OP ache a resposta, porque entregar de mão beijada eu não concordo. Tem que estimular o usuário a pensar na sua maneira de solucionar o problema, se não ele fica refém do fórum. É a minha opinião. ^_^

Wanderson Valerio · Julho 20, 2012

@Wanderson Valerio

Acho que seria bom explicar o que você fez ou indicar algum tutorial que o OP ache a resposta, porque entregar de mão beijada eu não concordo. Tem que estimular o usuário a pensar na sua maneira de solucionar o problema, se não ele fica refém do fórum. É a minha opinião. ^_^

Caro amigo, a única coisa que eu fiz, foi alterar um valor de uma declaração, nada de mais, se o usuário não entender, cabe a ele perguntar para o autor da resposta o que significa. Desculpe se estiver sendo ignorante com você.

Marcos Xavier · Julho 20, 2012

Fiz rapidinho aqui e funfou no IE8

<style type="text/css">
#dvPesquisa{
       position:relative;
       border: 0px solid #4b87c6;
       visibility: hidden;
       width:80%; 
       height:80%;
       left:10%;
top:10%;
       margin:0 auto;
       background:#FFF;
}
#BG {
       position:relative;
       width:100%;
       height:100%;
       left: 0px;
       top: 0px;
       visibility: hidden;
       background-color: #000000;
       opacity: 0.5;
       opacity:0.5;
       filter:alpha(opacity=50);
}
</style>

Nom html alterei(acho que comvém você fazer assim):

<a href="#" onClick="AbrePesquisa()">Abre div </a>
<div id="BG">
  <div id="dvPesquisa">
    <a href="javascript:FechaPesquisa()">Fechar div</a>
  </div><!--dvPesquisa-->
</div><!--BG-->

Ocorre que no firefox(por exemplo) a dvPesquisa fica muito pra direita então sugiro

deixar o css assim(sem o left:10%):

<style type="text/css">
#dvPesquisa{
       position:relative;
       border: 0px solid #4b87c6;
       visibility: hidden;
       width:80%; 
       height:80%;
top:10%;
       margin:0 auto;
       background:#FFF;
}
....

E para o IE você coloca um hack CSS.

<!--[if  IE]>
<style>
#dvPesquisa{
left:10%;
}
</style>
<![endif]-->

Ah claro ia me esqucendo. Você pode usar Jquery.Seria mais simples.

crf_h0m3r · Julho 20, 2012

@Wanderson Valerio

Não não, relaxe, tomo isso como uma resposta normal, assim como a minha opinião foi sem querer ofender. Mas é que você alterou e colocou o código lá sem nem dizer que alterou nem nada. Enfim, fica a minha opinião aí e eu entendi seu ponto de vista, vamos encerrar pra não alongar o tópico com isso. Abraços! :grin:

Wanderson Valerio · Julho 20, 2012

@Wanderson Valerio

Não não, relaxe, tomo isso como uma resposta normal, assim como a minha opinião foi sem querer ofender. Mas é que você alterou e colocou o código lá sem nem dizer que alterou nem nada. Enfim, fica a minha opinião aí e eu entendi seu ponto de vista, vamos encerrar pra não alongar o tópico com isso. Abraços! :grin:

Por mim, tá tudo na paz. Abraços!

Oczy · Julho 23, 2012

Caramba! Nunca pensei que fosse dar tanto trabalho. Wanderson Valerio, Corn flakes, nao deu certo rapazeada. Percebi que no meu codigo inicial se eu trocar os valores em porcentagem por valores exatos em pixels ele funciona bem no IE e nos outros continuam funcionando tambem. Porem nao gostaria de deixar com valor fixo pois em smartphones e tablets da tilt! pois a resolucao deles sao bem menores... se faco um retangulo de 800x600px por exemplo vou ter problemas. Tinha arruma um jeito de ser com porcentagem.

Caso nao tenha alternativa, quero agradecer o empenho de todos ai para me ajudar.

Abracao a todos

André do Vale · Julho 23, 2012

Pra que margem negativa? Coloca o left e top em 10%.

Oczy · Julho 23, 2012

Pra que margem negativa? Coloca o left e top em 10%.

Ola André, é negativo para que fique centralizada na tela. pega meu primeiro codigo e rode no google chrome que você vai entender... quero que ele funcione no IE.

Abraçao

André do Vale · Julho 23, 2012

Ola André, é negativo para que fique centralizada na tela. pega meu primeiro codigo e rode no google chrome que você vai entender... quero que ele funcione no IE.

Abraçao

Então, Oczy. Esta técnica é viável quando você tem um elemento que é fixo em PX, por exemplo, e a tela pode ficar mudando de tamanho.

Porém, no seu caso, o tamanho do elemento é de acordo com a tela. Não há necessidade de colocar 50% para esquerda e topo, e depois reajustar com margem negativa. Basta apenas declarar topo e esquerda para 10%, ok? :thumbsup:

Willian Makoto · Julho 24, 2012

o André Campos disse tudo...

é simples, defina uma margen para a esquerda e para o topo em 10%.

Como o conteúdo é de 80% x 80%, se você definir a { margin: 10% 0 0 10%; } ele ficará com 10% de margin em todos os lados, independente do tamanho dos monitores...

segue a modificação:

#dvPesquisa{
       position:absolute;
       border: 0px solid #4b87c6;
       visibility: hidden;
       width:80%; 
       height:80%;
       left:10%;
       top:10%;
       background:#FFF;
}

Oczy · Agosto 2, 2012

Valeu pessoal, desculpa a demora é que minha conta sumiu aqui no forum disse que nao existia mais.... me cadastrei de novo no forum e Puf tudo voltou como antes... rs.

Obrigado pela atenção

Abração a todos

Arquivado

Centralizar DIV

Recommended Posts

Oczy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wanderson Valerio 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oczy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oczy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oczy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante