Ir para conteúdo

POWERED BY:

Arquivado

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

marvi

[Resolvido] CSS na resolução automática

Por , em Desenvolvimento frontend

Recommended Posts

marvi    0

marvi
Postado

Olá pessoal,

 

Eu tenho um codigo que mantem um pop-up na frente do site, mas quando mudo de resolução o pop-up fica na posição errada, cortado... como fazer esse css se ajustar a resolução automáticamente?

 

#pop_up {
  width:30%;
  position: absolute;
  top: 20%; 
  left: 45%;
  height: 600px; 
  width: 700px; 
  margin-top: -100px; 
  margin-left: -300px; 
  \* background: #FF0000; */
  z-index: 1000; 
  overflow: auto;
}


<div id="pop_up"><a href="javascript:void(0)" onclick="document.getElementById('pop_up').style.display ='none';">Fechar</a>

<img border="0" src="figuras/pop.jpg" width="684" height="535"></p>

</div>

Desde já, agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Se você quer exatamente no centro, deve atentar para os valores:

#pop_up {
  position: absolute;
  top: 50%; 
  left: 50%;
  height: 600px; 
  width: 700px; 
  margin-top: -300px; /* metade da altura */ 
  margin-left: -350px; /* metade da largura */
  /* background: #FF0000; */
  z-index: 1000; 
  overflow: auto;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

Tente usar JavaScript para mudar o arquivo CSS de acordo com a resolução:

 

winWidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
if (winWidth >= 1024) 
{ 
document.write('<link rel="stylesheet" href="1024.css" type="text/css">'); 
} 
if (winWidth <= 800) 
{ 
document.write('<link rel="stylesheet" href="800.css" type="text/css">'); 
}

Coloque após a tag BODY. Fonte: http://www.webmasterworld.com/forum91/2071.htm

 

Flw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

Outro problema é que esse meu código não funciona no FireFox, só funciona no Internet Explorer

 

No firefox o banner fica por de trás do site que tem também css

 

Como resolver?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Testou o código CSS que eu coloquei?

Poste um link para analisarmos o motivo de estar por trás do conteudo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

A questão é essa, veja no Internet Explorer, lá mostra um pop-up para fechar, normal:

 

Imagem Postada

 

Já no FireFox ele fica atrás da página, da até para ver uma parte do banner pop up no topo...Por isso o motivo do erro:

 

Imagem Postada

 

Entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites

2Flex    1

2Flex
Postado

Olá,

 

Veja seu código:

<body bgcolor="#ABC377" >
<div id="pop_up"><a href="javascript:void(0)" onclick="document.getElementById('pop_up').style.display ='none';">


<font color="#FFFFFF">

<font face="Verdana" size="2"><b><span style="background-color: #CC3300">Fechar</span></b></font><font size="3"><span style="background-color: #000080">
</span></font></font>

</a>

<img border="0" src="figuras/pop.jpg" width="684" height="535"></p>

</div>
Talvez assim:

<body style="background-color: #ABC377;">
<div id="pop_up"><a href="javascript:void(0)" onclick="document.getElementById('pop_up').style.display ='none';">
<p>
<font style="color: #FFF; font-family: Verdana; font-size: 2px;"><b><span style="background-color: #CC3300">Fechar</span></b></font><font style="font-size: 3px;"><span style="background-color: #000080">
</span></font>
</a>

<img border="0px" src="figuras/pop.jpg" width="684px" height="535px" /></p>

</div>
Coloquei estilos inline para você perceber as diferenças, não sei que DOCTYPE está a utilizar, mas o Firefox é rígido, por isso opte por uma marcação rija.

 

Reparei também nisto:

</div>
<link rel="stylesheet" type="text/css" " href="textotopo.css" />
<div>
O link tem que ficar no <head>.

 

Cumprimentos

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

Pois é!

 

Já fiz isso tudo que vocês falaram mais esse tal de FireFox não ler certo!

 

Não tem uma maneira eficaz com CSS, outro exemplo de código?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Atenção com a sintaxe... comentário CSS é /**/ e não \**/

\* background: #FF0000; */

z-index: 1000;

overflow: auto;

 

}

Isso provavelmente está anulando as regras abaixo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

2Flex    1

2Flex
Postado

Olá,

 

Pois é o nosso Firefox é bastante rijo xP. Em termos de tags e isso tudo há que ter atenção, como lhe passei em cima, mas a observação do William também facilita. Veja bem a sua codificação amigo, no futuro pode ter problemas bem piores.

 

PS: Quando criar um site, siga pelo FF e não pelo IE, conselho de amigo.

 

Cumprimentos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marvi    0

marvi
Postado

William Bruno era isso mesmo! O problema foi o comentário do CSS que me passei, valeu!

 

2Flex, sim eu sei disso. Na verdade eu desenvolvi todo o site e testei no FIreFox, o qual roda normal, o único problema foi essa popu-up que na verdade foi o vacilo meu no comentário. Valeu!

 

Então, valeu a todos aí! Obrigado!

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