Ir para conteúdo

POWERED BY:

Arquivado

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

Felipe Criso

[Resolvido] Layout andando

Por , em Desenvolvimento frontend

Recommended Posts

Felipe Criso    0

Felipe Criso
Postado

Seguinte pessoal, eu estou com um problema. Ao redimencionar a janela para as laterais alguns elementos do meu site saem da ordem como na figura abaixo:

 

Site na resolução normal:

 

foto1gg.png

 

Site na resolução normal no Internet Explorer:

 

iesite.png

 

Site com a janela redimencionada na horizontal:

 

foto2xh.jpg

 

foto4l.png

Site com a janela redimencionada na vertical:

 

foto3o.png

 

Eu queria que o site não se alterasse de maneira alguma quando o redimencionar (como acontece na imagem de redirecionamento vertical), ou pelo menos os elementos ficassem ordenados.

 

Obs: Não usei porcentagem, usei apenas pixel, então o interessante seria ter uma maneira dele não andar apenas ficar parado enquanto a tela redirecionada passa por cima.

 

 

Segue o codigo:

 

 

<!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=utf-8" />
<title>Home</title>

</head>

<style type="text/css">    

#rolar{overflow:hidden; scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #FFFEFE;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #FFFEFE;}
#rolar:hover {overflow:auto} 

a:link {
text-decoration:none;
color:#FFF;
}
a:visited {
text-decoration:none;
color:#FFF;
}
a:hover {
text-decoration:underline;
color:#333;
}
</style>

<body style=" padding:0px; margin:0px; background-image:url(Img/fundototal.jpg);">

<br>

<div id="Tudo" style="height:859px; width:1000px;  margin:0 auto; margin-top:-19px;">

<div id="Cabeça" style="height:160px; width:995px;  margin:0 auto;">

<div style="width: 300px; height:200px; float:left; margin-left:-5px; background-image:url(Img/fundo.png)">
<img src="Img/aysha.png" height="100px"; width="250px" style="margin-left:30px; margin-top:30px;"/>

<br>
<br>


<div style="width: 270px; overflow:hidden; margin-left:33px"><img src="Img/linhaclara.png" /></div>
</div>

<div style="float:right; width:90px; height:104px; margin-right:70px; margin-top:-10px; background-image:url(Img/conta.png); ">
<p style="font:'Trebuchet MS', Arial, Helvetica, sans-serif; color:#FFF; font-size:16px; text-align:center">ACESSOS: </p>
<div style="text-align:center"><a href='http://contador.s12.com.br'><img src='http://contador.s12.com.br/img-c2cxW3Zc-3.gif' border='0' alt='contador free'></a><script type='text/javascript' src='http://contador.s12.com.br/ad.js?id=c2cxW3Zc'></script></div>
</div>
</div>

<div id="Menu" style="height:20px; width:630px; float:left; margin-top:80px; margin-left:35px; text-align:center; margin-top:-50px">

<ul  style=" padding:0px;margin:0px;float: left;width: 100%;list-style:none">
       <li style="display: inline;margin-left:-25px; color:#333">HOME</li>
       <li style="display: inline;margin-left:25px"><a  href="eventos.html">EVENTOS</a></li>
       <li style="display: inline;margin-left:25px"i><a  href="agenda.html">AGENDA</a></li>
       <li style="display: inline;margin-left:25px"><a  href="studio.html">STUDIO OSÍRIS</a></li>
       <li style="display: inline;margin-left:25px"><a  href="lojinha.html">LOJINHA</a></li>
       <li style="display: inline;margin-left:25px"><a  href="contato.html">CONTATOS</a></li>
   </ul></div>


<div style="background-image:url(Img/linha.png); background-repeat:repeat-x;overflow:hidden;  width:660px; height:5px; float:left; margin-top:-13px; margin-left:25px"></div>
</div>


<div id="lateral" style="height:693px; width:300px;float:left;margin-left:138px; margin-top:-659px;background-image:url(Img/fundo.png)">

<p style="color:#FFF; font:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:18px; text-align: center">BEM VINDO</p>
<div style=" width:250px; height:570px; margin:0 auto">
<p style="color:#FFF; font:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:15px; text-align: center">  blablabla blablabla blablabla blablabla blablabla <br />
blablabla blablabla blablabla blablabla blablabla blablabla blablabla <br />
blablabla blablabla blablabla blablabla blablabla blablabla blablabla <br /> blablabla blablabla blablabla</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br />
<br />
<br />
<br />
<br />
<br>
</div>
<div style="width: 270px; overflow:hidden; margin-left:33px"><img src="Img/linhaclara.png" /></div>
<br>
<a  href="http://www.facebook.com/aysha.bellydance" target='_blank'><img src="Img/facebook.png" height="30px"; width="30px" style="float:left; margin-left:65px"></a>
<a  href="#" target='_blank'><img src="Img/blog.png" height="30px"; width="30px" style="float:left;margin-left:30px"></a>
<a  href="http://www.youtube.com/user/JuAysha?feature=mhee" target='_blank'><img src="Img/youtube.png" height="30px"; width="30px" style="float:left;margin-left:30px"></a>
</div>

<div id="Corpo" style="height:734px; width:600px;  float: right; margin-right:180px ;margin-top:-700px;background-image:url(Img/fundo1.png); position:relative">

<div style="border: solid #666; margin: 0 auto; margin-top:40px; width:480px"> <embed src="slideshow.swf" width="480" height="312" type="application/x-shockwave-flash" allowscriptaccess="always" allowFullScreen="true"></embed> </div>


<p style="color:#FFF; font:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:28px; text-align: center"> Aysha El Havanery</p>
<div id="rolar" style="color:#FFF; font:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:15px; text-align: center; height:270px; width:520px; margin:0 auto; text-align:justify"> 

<div " style="color:#FFF; font:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:15px; text-align: center; height:760px; width:450px; margin:0 auto; text-align:center; overflow:visible;">

•	Aysha iniciou seus estudos na dança do ventre no ano 2000 numa academia de ginástica, no Guarujá, onde obteve aulas com a professora e bailarina Farah.
<br />
<br />
•	No ano de 2005 decidiu aperfeiçoar seus conhecimentos e aprimorar sua dança, foi quando entrou para o Stúdio Osíris em Santos, obteve aulas em grupo e em particular com a Professora Jannah El Havanery (Campeã Nacional do Mercado Persa 2008 - Categoria Profissional e bailarina da casa de chá egípcia Khan El kalili).
<br />
<br />
•	Aysha é formada em Serviço Social e em Magistério, lecionou numa escola particular de ensino fundamental no Guarujá por 10 anos. Hoje seu trabalho está voltado inteiramente a administração do seu Studio, a aulas e shows de dança do ventre.
<br />
<br />
•	Com sua paixão por ensinar, sua paciência e didática começou a perceber que havia habilidades e atendendo a pedidos começou a ensinar suas amigas a dançar. Foi quando abriu um pequeno espaço em sua casa para dar aulas de dança do ventre.
<br />
<br />
•	Através de seus esforços e dedicação foi convidada a participar do quadro de bailarinas do Stúdio Osíris.
<br />
<br />
•	No ano de 2007 Aysha decidiu abrir uma academia filial, iniciou um belo trabalho com a terceira unidade Osíris na cidade do Guarujá, hoje é a proprietária e professora responsável por esta.
<br />
<br />
•	Aysha ministra aulas de dança na unidade 3 faz shows em festas e eventos e também faz parte do quadro de bailarinas dos renomados restaurantes: Empório Árabe e Milani ambos na cidade do Guarujá.
<br />
<br />
•	Em 2008 foi estudar no Egito com as melhores professoras e bailarinas do mundo. 
<br />
<br />
•	No ano de 2011 conquistou o selo de qualidade em dança do ventre Lulu Brasil.
<br />
<br />
•	Todos os anos aperfeiçoa seus estudos com aulas particulares, em grupo e workshops com bailarinas renomadas do Brasil, Egito, Argentina e Estados Unidos.

</div>

</div>

</div>

</div>

</body>
</html>

 

Me ajudem por favor, muito obrigado desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Haz    3

Haz
Postado

Respondi no Yahoo, mas aqui dá pra falar melhor.

 

O código tá muito poluído e não tem indentação, o que dificulta demais a leitura e a manutenção.

 

código não indentado

<div id="tudo">
<div id="cabeca"></div>
<div id="lateral"></div>
<div id="corpo"></div>
</div>

 

código indentado

<div id="tudo">
<div id="cabeca"></div>
<div id="lateral"></div>
<div id="corpo"></div>
</div>

 

Por isso, você deve ter fechado DIVs demais ou de menos, deixando a #lateral e o #corpo fora de #tudo, fazendo com que as margens deles ficassem relativas às bordas da janela, causando esse efeito.

 

É isso. Não esqueça de ajeitar as margens também. Um abraço.

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