Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boas Galera,
Seguinte, estou com um pequeno problema no IEca...¬¬ (pra variar)...
é o seguinte, estou trabalhando em um layout, eu consegui fazer encaixar perfeitamente, esout usando CSS e javascript para que o layout encaixe bem em qualquer resolução e qualquer navegador, porém quando rodo ele no IE o encaixe fica perfeito, mas no lado direito o IE encerra a DIV antes do que deveria, iou seja, antes do final do navegador, não que isso seja um problema muito grande, porém quem for abrir o site em 800x600 vai perder muita área de trabalho por questão disto, sem contar também que fica estéticamente feio, se possível alguém poderia me dar uma luz???
Já tentei fazer as alterações por hack CSS, por javascript e não tem cristão que resolva o problema.
no momento o site ainda não está no ar, então postarei o código, isto ajuda?
>
<!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">](http://www.w3.org/1999/xhtml%22)
<head>
<title>.::Neo Mídia Idiomas e Informática::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="FW MX CSS Layer" />
<meta name="Keywords" content="cursos, cursos de informática, cursos de idiomas, cursos de inglês, cursos de espanhol, cursos de español, espanhol, español, inglês, informática, english, computação, curso de computação, escola de computação" />
<link href="styles/principal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--
function aumenta(){
navegador = navigator.appName;
if(navegador == "Microsoft Internet Explorer"){
largura = document.body.clientWidth;
tamanho= document.body.clientHeight - 391;
document.getElementById('layout_r11_c2').height = tamanho;
document.getElementById('layoutr11c2').height = tamanho;
document.getElementById('layout_r11_c1').height = tamanho;
document.getElementById('layoutr11c1').height = tamanho;
}
else{
largura = document.documentElement.clientWidth;
tamanho= document.documentElement.clientHeight - 391;
document.getElementById('layout_r11_c2').height = tamanho;
document.getElementById('layoutr11c2').height = tamanho;
document.getElementById('layout_r11_c1').height = tamanho;
document.getElementById('layoutr11c1').height = tamanho;
}
posicao = (largura-185) / 2 + 185 - 225 +"px";
document.getElementById('banner').style.left = posicao;
}//-->
</script>
<style type="text/css">
#layoutr1c1 {
position:absolute;
left:0px;
top:0px;
width:185px;
height:391px;
z-index:1;
visibility:visible;
}
#layoutr1c2 {
position:absolute;
left:185px;
top:0px;
width:100%;
height:31px;
z-index:2;
visibility:visible;
}
#layoutr2c2 {
position:absolute;
left:185px;
top:31px;
width:100%;
height:34px;
z-index:3;
visibility:visible;
}
#layoutr3c2 {
position:absolute;
left:185px;
top:65px;
width:100%;
height:41px;
z-index:4;
visibility:visible;
}
#layoutr4c2 {
position:absolute;
left:185px;
top:106px;
width:100%;
height:42px;
z-index:5;
visibility:visible;
}
#layoutr5c2 {
position:absolute;
left:185px;
top:148px;
width:100%;
height:43px;
z-index:6;
visibility:visible;
}
#layoutr6c2 {
position:absolute;
left:185px;
top:191px;
width:100%;
height:39px;
z-index:7;
visibility:visible;
}
#layoutr7c2 {
position:absolute;
left:185px;
top:230px;
width:100%;
height:48px;
z-index:8;
visibility:visible;
}
#layoutr8c2 {
position:absolute;
left:185px;
top:278px;
width:100%;
height:33px;
z-index:9;
visibility:visible;
}
#layoutr9c2 {
position:absolute;
left:185px;
top:311px;
width:100%;
height:46px;
z-index:10;
visibility:visible;
}
#layoutr10c2 {
position:absolute;
left:185px;
top:357px;
width:100%;
height:34px;
z-index:11;
visibility:visible;
}
#layoutr11c1 {
position:absolute;
left:0px;
top:391px;
width:185px;
height:29px;
z-index:12;
visibility:visible;
}
#layoutr11c2 {
position:absolute;
left:185px;
top:391px;
width:100%;
height:29px;
z-index:13;
visibility:visible;
}body {
background-image: url(imagens/bg_reso.jpg);
}
</style>
</head>
<body bgcolor="#fdf8f2" onload="aumenta()">
<div id="esquerda" class="coluna">
<div id="layoutr1c1"><img src="imagens/layout_r1_c1.jpg" width="185" height="391" border="0" id="layout_r1_c1" alt="" /></div>
<div id="layoutr11c1"><img id="layout_r11_c1" src="imagens/layout_r11_c1.jpg" width="185" height="29" border="0" alt="" /></div>
<div id="menu" class="menu">
<table width="100%" border="0" id="table" cellspacing="2" cellpadding="3">
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">Home</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><b>.:: </b><a href="#">Cursos</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif" size="2"><b>.:: </b></font><a href="#">Aluno</a></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">¿In Company?</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">SAC</a></font></td>
</tr>
<tr>
<td><font color="#000000" face="Arial, Helvetica, sans-serif"><b>.:: </b><a href="#">Trabalhe Conosco</a></font></td>
</tr>
</table>
</div>
</div>
<div id="meio" class="coluna">
<div id="layoutr1c2"><img src="imagens/layout_r1_c2.jpg" width="100%" height="31" border="0" id="layout_r1_c2" alt="" /></div>
<div id="layoutr2c2"><img src="imagens/layout_r2_c2.jpg" width="100%" height="34" border="0" id="layout_r2_c2" alt="" /></div>
<div id="layoutr3c2"><img src="imagens/layout_r3_c2.jpg" width="100%" height="41" border="0" id="layout_r3_c2" alt="" /></div>
<div id="layoutr4c2"><img src="imagens/layout_r4_c2.jpg" width="100%" height="42" border="0" id="layout_r4_c2" alt="" /></div>
<div id="layoutr5c2"><img src="imagens/layout_r5_c2.jpg" width="100%" height="43" border="0" id="layout_r5_c2" alt="" /></div>
<div id="layoutr6c2"><img src="imagens/layout_r6_c2.jpg" width="100%" height="39" border="0" id="layout_r6_c2" alt="" /></div>
<div id="layoutr7c2"><img src="imagens/layout_r7_c2.jpg" width="100%" height="48" border="0" id="layout_r7_c2" alt="" /></div>
<div id="layoutr8c2"><img src="imagens/layout_r8_c2.jpg" width="100%" height="33" border="0" id="layout_r8_c2" alt="" /></div>
<div id="layoutr9c2"><img src="imagens/layout_r9_c2.jpg" width="100%" height="46" border="0" id="layout_r9_c2" alt="" /></div>
<div id="layoutr10c2"><img src="imagens/layout_r10_c2.jpg" width="100%" height="34" border="0" id="layout_r10_c2" alt="" /></div>
<div id="layoutr11c2"><img id="layout_r11_c2" src="imagens/layout_r11_c2.jpg" width="100%" height="29" border="0" alt="" /></div>
<div id="banner">TESTE</div>
</div>
</body>
</html>CSS
>
body{
margin: 0;
padding-left: 185px;
padding-right: 45px;
min-width: 550px;
}
.menu {
overflow: hidden;
border:none;
position: absolute;
z-index: 27;
top: 110px;
left: 10px;
width:155px;
}.menu a {
font-family: Arial, Helvetica, sans-serif;
color:#000000;
font-size: 12px;
left: 0px;
text-decoration:none;
padding-left:27px;
position: absolute;
width:120px;
z-index: 2;
}* html .menu a{
display:inline-block;
width: 150px;
line-height:18px;
border: none;
}a:hover {
font-family: Arial, Helvetica, sans-serif;
color:#666666;
font-size: 12px;
left: 0px;
padding-left:37px;
position:absolute;
}.menu table {
border: none;
}.menu td {
border:none;
font-size:10pt;
padding-left:10px;
background-image:url("../imagens/button.jpg");
background-repeat:no-repeat;
}
#meio {
padding: 0 20px;
width: 100%;
height:100%;
margin-left:-185px;
border: soleit thin;
}
#esquerda {
width: 185px;
padding: 0 10px;
left: 0px;
margin-left: -185px;
right: 0px;
}
.coluna {
position: relative;
float: left;
}
#banner {
background-color: #FFF4E6;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position:absolute;
overflow: hidden;
z-index: 15;
height: 75px;
width: 450px;
top: 10px;
left: 300px;
}O padding right no elemento "body" é necessário para o ajuste adequado no FF, porém mesmo tirando este Padding o IE continua gerando este espaço.
OS dois passaram na validação w3c então creio que não seja problema no web standards em si, creio que possa ser algo com o IE.
vou postar uma imagem para vocês verem como está ficando:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img122.imageshack.us/img122/3098/imagemas6.jpg&key=e9667938667145eda2403ecfda7121c41e758a668b960a4c737fac6192ceb55c" alt="Imagem Postada" />
Reparem ao lado direito como o Layout é encerrado antes do final da página, isto não deveria acontecer, pois está com porcentagem.
Agradeço por qualquer ajuda galera.
BOm, position absolute é para os slices do layout para que eles não percam sua posição, visto que não usei tabela para posicionar o layout e sim DIv, eu consegui diminuir um pouco do espaço, só removendo e colocando o DOCTYPE novamente, porém ainda tem um espaço, pequeno, mas um espaço indesejado.
segue o link, este link só funfa das 8 as 21, por que está no meu servidor apache:
http://neomidia.homeftp.org:8080
no FF e no Opera tá ajustando perfeitamente, sem sobrar e nem faltar.
Valeu pela ajuda.
[]s.
nussa?
praq tanta coisa assim?
porque não faz um layout elástico em css, ao invés de usar esse javascript e essas imagens ?
vai te rum site bem mais simples e não vei ter esses problemas aí que está tendo...
topo 100%
menu 30%, conteúdo 70%
rodapé 100%
e pronto hehe
ñ acha?
Ah cara, na realidade, o que acontece é o seguinte:
Eu quero fazer um site que se ajuste automaticamente a resolução do monitor do cidadão.
Mas na realidade o problema maior é só o IEca, só que não chega a ser um problema tão grande assim, o layout está ajustando legal. eu abri aqui em casa e ajustou legal quando eu abro pelo localhost sobra uma margem de uns 25 px.
Mas nada desesperador, só gostaria de saber se existe a possibilidade de corrigir isso.
Obrigado.
Att.
Rodrigo
>
Ah cara, na realidade, o que acontece é o seguinte:
Eu quero fazer um site que se ajuste automaticamente a resolução do monitor do cidadão.
Mas na realidade o problema maior é só o IEca, só que não chega a ser um problema tão grande assim, o layout está ajustando legal. eu abri aqui em casa e ajustou legal quando eu abro pelo localhost sobra uma margem de uns 25 px.
Mas nada desesperador, só gostaria de saber se existe a possibilidade de corrigir isso.
Obrigado.
Att.
Rodrigo
faça como o thiago félix disse
width: 100% nos elementos!
abraço
Opa galera, obrigada pelas respostas, já consegui resolver o problema, eu tinha muta imagem, refiz os slices e terminei com os essenciais apenas, agora está melhor, e está ajustando perfeito, se alguém quiser ver como ficou:
Ah e fiz o posicionamento manualmente também.
Obrigado pela ajuda galera.
[]s.
Crie tudo flexivel!!!
redimensione e verá o que acontece!
e defina um max-width!
imagina só o tamanho da linha que aparecerá se um cara abrir o seu site em um monitor de 19 widescreen
abraço
valeu amigo.
[]s.
Realmente layouts com position:absolute; são "ruins", use somente FLOAT:; para posionar. leia os sub-foruns de "Webstandards: CSS / XML / XHTML / HTML" que lá há tutoriais exelentes.
Recomendo o que o "Aprendiz CSS" disse, já nem é mais "Aprendiz CSS", agora deviria ser "Ensinando CSS", o cara ta fera hein ^^ parabens ;)
>
Realmente layouts com position:absolute; são "ruins", use somente FLOAT:; para posionar. leia os sub-foruns de "Webstandards: CSS / XML / XHTML / HTML" que lá há tutoriais exelentes.
Recomendo o que o "Aprendiz CSS" disse, já nem é mais "Aprendiz CSS", agora deviria ser "Ensinando CSS", o cara ta fera hein ^^ parabens ;)
que nada Guilherme, estou só aprendendo ainda..
mesmo assim valeu pelo comentário!
abraço
Duas coisas!
para que tanto position: absolute
e tem como postar um link do site no ar!
abraço