Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
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.
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
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'.
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%;top: 50%;
left: 50%;
margin-top: -303.5px;
margin-left: -276px;}
>
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'.
Teste o IE em tela cheia.
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!
>
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%; }
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.
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.
é 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">#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
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.
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,
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.
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.
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.
>
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.
isso é por causa da 'area util' do browser.
defina um min-height para o container dessa .geral maior que o height da .geral