[Resolvido] Centralizado vertical e horinzontal apenas no safari

Martinsrj · Janeiro 27, 2011

Olá pessoal, boa tarde!

Não sei mais o que fazer na configuração do CSS. Estou desenvolvendo um site super simples e aparece perfeitamente no safari veja:

http://img710.imageshack.us/img710/5430/safari1024168.png

Porem no internet explorer veja como aparece:

http://img191.imageshack.us/img191/8174/internetexplorer1024168.png

A minha ideia é que todo o conteudo do site apareça centralizado tanto no internet explorer e também no safari, porem repito que no navegador Safari aparece perfeitamente.

Aqui segue o código do CSS:

http://pastebin.com/Mwq7uNcK

E aqui segue o código da index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xx</title>
<link rel="stylesheet" type="text/css" href="css/padrao.css" />

<!-- JavaScripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
       $('#slider1').s3Slider({
           timeOut: 4000 
       });
   });
</script>
</head>

<body>
<!--<div class="container">-->
<div class="geral"> 
<div class="topo">		
 <h1><a href="index.html"><div class="font16">xx</div></a></h1>
</div>

<div class="menu">		
	<ul class="MenuUl">
		<li class="font12 MenuLi"><a href="portugues_xx.html">português</a></li>
		<li class="font12 MenuLi">|</li>
		<li class="font12 MenuLi"><a href="english_xx.html">english</a></li>
	</ul>
</div>

<div id="slider1"> 
   	<ul id="slider1Content">
       	<li class="slider1Image"> <a href=""><img src="imagens/margem.jpg" width="552" height="552" border="0" title="Slideshow xx" /></a>
		<span class="right">© xx</span>
		</li>

           <li class="slider1Image"> <a href=""><img src="imagens/margem2.jpg" width="552" height="552" border="0" title="Slideshow xx" /></a>
		<span class="right">© xx</span>			
		</li>

           <li class="slider1Image"> <a href=""><img src="imagens/margem3.jpg" width="552" height="552" border="0" title="Slideshow xx" /></a>
		<span class="right">© xx</span>			
		</li>

           <li class="slider1Image"> <a href=""><img src="imagens/margem4.jpg" width="552" height="552" border="0" title="Slideshow xx" /></a>
		<span class="right">© xx</span>			
		</li>

		<div class="clear slider1Image"></div>
	</ul>
</div>
<div class="rodape">© xx </div>

</div>
<!--</div>-->

</body>
</html>

Desde já agradeço.

William Bruno · Janeiro 27, 2011

isso é por causa da 'area util' do browser.

defina um min-height para o container dessa .geral maior que o height da .geral

Martinsrj · Janeiro 27, 2011

Não sei se você reparou, mas o o container está comentato.

Abs.

isso é por causa da 'area util' do browser.

defina um min-height para o container dessa .geral maior que o height da .geral

William Bruno · Janeiro 27, 2011

usei a palavra container como um 'coringa', define no <body> então.. sem problemas.

só quis me referir ao 'elemento que contém o .geral'.

Martinsrj · Janeiro 27, 2011

Coloquei assim, mas o problema persiste.

body {
margin: 0px;
padding: 0px;
min-height:615px;
}

.geral{
width: 552px;
height: 607px;
min-height:607px;
position: absolute;
/*	top: 50%;
left: 50%;*/ 
top: 50%;
left: 50%;
margin-top: -303.5px;
margin-left: -276px;
/*border:1px solid #000000;*/

}

usei a palavra container como um 'coringa', define no <body> então.. sem problemas.

só quis me referir ao 'elemento que contém o .geral'.

Evandro Oliveira · Janeiro 27, 2011

Teste o IE em tela cheia.

Martinsrj · Janeiro 27, 2011

Na tela cheia (F11) funciona perfeitamente.

Porem preciso descubrir como fazer funcionar sem precionar o F11.

Teste o IE em tela cheia.

Uma observação. Se eu desativar a barra favoritos, barra de menu do IE funciona perfeitamente!

Evandro Oliveira · Janeiro 27, 2011

Na tela cheia (F11) funciona perfeitamente.

Porem preciso descubrir como fazer funcionar sem precionar o F11.

isso é por causa da 'area util' do browser.

defina um min-height para o container dessa .geral maior que o height da .geral

Descomente a div.container e adicione:

.container { min-height: 100%; }

William Bruno · Janeiro 27, 2011

o problema é um pouco mais complicado.

fiquei fazendo uns testes aqui.. se a área útil do navegador for de sei lá, uns 300px de altura (monitor pequeno, ou navegador em resize mesmo), a div entra e se esconde lá pra cima.

apenas com css, não consegui pensar em como resolver isso.

Com javascript dá pra 'medir' se a div tá estrapolando oque deveria ou não.

Martinsrj · Janeiro 27, 2011

Evandro,

Mesmo habilitando a DIV container .container { min-height: 100%; }

continua o mesmo erro.

William,

Se com javascript caso você consiga não deixa de mencionar aqui no forum.

Abraços

o problema é um pouco mais complicado.

fiquei fazendo uns testes aqui.. se a área útil do navegador for de sei lá, uns 300px de altura (monitor pequeno, ou navegador em resize mesmo), a div entra e se esconde lá pra cima.

apenas com css, não consegui pensar em como resolver isso.

Com javascript dá pra 'medir' se a div tá estrapolando oque deveria ou não.

William Bruno · Janeiro 27, 2011

é algo assim cara:

<html>
<head>
<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
window.onload = function(){
calcMarginTop();
}
window.onresize = function(){
calcMarginTop();
}
function calcMarginTop()
{
var main = id('main');
var topo = parseInt( getTop( main ) );
var marginTopo = parseInt( getMarginTop( main ) );

if( topo < -1*marginTopo )
	main.style.marginTop = '-'+topo+'px';

}
function getTop( el )
{
if( window.getComputedStyle )
	return document.defaultView.getComputedStyle(el, null).top;
else if( el.currentStyle )
	return el.currentStyle['top'];
}
function getMarginTop( el )
{
if( window.getComputedStyle )
	return document.defaultView.getComputedStyle(el, null).marginTop;
else if( el.currentStyle )
	return el.currentStyle['marginTop'];
}
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
#main {
border: 1px solid #000;
height: 500px;
width: 500px;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
position: absolute;
}
</style>
</head>
<body>
<div id="main">


</div><!-- /main -->
</body>
</html>

só precisa fazer 'a volta', caso esteja com pouca margin, por causa de pequena area util na viewport, e aumente para deixar 'muita area', fazer a margin voltar pros -250px iniciais.

enfim.. só coloquei o 'onresize' de onda ^_^

no onload acho que ja te resolve

Martinsrj · Janeiro 28, 2011

William,

eu utilizo esse código de java script em qual div? A div container ou a geral?

Segue o meu código atualizado:

CSS: http://pastebin.com/rLMZyeEw

Index.html: http://pastebin.com/B0qTGfcd

Abs.

William Bruno · Janeiro 28, 2011

na geral uê.

troque a tua class por id, e pronto.

você não entendeu oque o script faz ?

ps: só tinha testado no FF, Chrome e IE não entendem o computedStyle da mesma forma.

ps2: veja sobre o a propriedade offsetTop parece que ela trabalha melhor nesse caso.

Martinsrj · Janeiro 28, 2011

William,

Realmente com o código que você postou funciona perfeitamente no firefox e tb no opera, porem no IE e no Safari deixa de funcionar.

O que podemos fazer para que funcione no IE e no Safari?

Valeu.

na geral uê.

troque a tua class por id, e pronto.

você não entendeu oque o script faz ?

ps: só tinha testado no FF, Chrome e IE não entendem o computedStyle da mesma forma.

ps2: veja sobre o a propriedade offsetTop parece que ela trabalha melhor nesse caso.

William Bruno · Janeiro 28, 2011

function id( el ){
return document.getElementById( el );
}
window.onload = function(){
calcMarginTop();
}
window.onresize = function(){
calcMarginTop();
}
function calcMarginTop()
{
var main = id('main');
var marginTopo = parseInt( getMarginTop( main ) );
var marginBaixo = parseInt( getMarginBottom( main ) );


if( main.offsetTop < -1 )
	main.style.marginTop = '-'+( parseInt( main.offsetTop ) - marginTopo )+'px';
else if( marginTopo!=marginBaixo )
	main.style.marginTop = '-248px';
}
function getMarginTop( el )
{
if( window.getComputedStyle )
	return document.defaultView.getComputedStyle(el, null).marginTop;
else if( el.currentStyle )
	return el.currentStyle['marginTop'];
}
function getMarginBottom( el )
{
if( window.getComputedStyle )
	return document.defaultView.getComputedStyle(el, null).marginBottom;
else if( el.currentStyle )
	return el.currentStyle['marginBottom'];
}

só precisa ver a volta, do onresize ^_^ ai fica perfeito.

deixo por tua conta.

Martinsrj · Janeiro 28, 2011

Valeu William, funcionou direitinho.

Agora como você fez isso para saber a area util de cada navegador e assim todo o conteudo fique centralizado tanto na vertical e na horizontal

... rsrsrsrsrs

Abs.

William Bruno · Janeiro 28, 2011

como você fez isso para saber a area util de cada navegador

eu não fiz isso ^_^

veja:

se a área útil do navegador for menor que a caixa, a div vai 'entrar' pra dentro do body, sumindo, ou seja, o offsetTop, será negativo.

        if( main.offsetTop < -1 )
               main.style.marginTop = '-'+( parseInt( main.offsetTop ) - marginTopo )+'px';

por isso esta condição.

diz: se for negativo, então o marginTop, recebe a diferença entre o offsetTop e o marginTop(250px no caso do exemplo), assim centraliza.

Arquivado

[Resolvido] Centralizado vertical e horinzontal apenas no safari

Recommended Posts

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Martinsrj 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Fóruns

Tempo Real

Informação importante