Ir para conteúdo

POWERED BY:

Arquivado

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

David32

Divs desalinhadas

Por , em Desenvolvimento frontend

Recommended Posts

David32    1

David32
Postado

Tipo to montando um projeto e ta indo bem, o que acontece é que quando eu dou ZOOM -

pra ver como fica em outras resoluções os elementos não vem para o meio da página e

sim para as margens, devo estar usando alguma propriedade errado ou ta faltando alguma.

Segue abaixo o código para verificação;

 

<!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>
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

::selection { background:#FFFF99; color:#000000; }
::-moz-selection{ background:#FFFF99; color:#000000; }
body { background:#FFFFCC;
      width: 100%;
   font-family: "Trebuchet MS", Sans-serif;}
#logo {background:center url(img/outer-wrapper1.png) no-repeat; width: 841px; height:330px; position:relative; left: 250px;}
#avril {background:center url(img/outer-wrapper2.png) no-repeat; width: 377px; height:271px; margin-left:350px; padding-top: 20px; position:relative; top: -200px;}
#menu {background:url(img/menu.png); height: 50px; width: 100%; margin-top:10%; position:absolute; top: 280px; padding-top: 5px; padding-left: 350px; }
#boxgeral { width:641px; height: 500px; background:#FFFFFF ; border:inset 2px #0000FF; border-radius: 18px; position:relative; top:90px; left: 250px; padding: 8px;}
#sidebar { width: 315px; height: auto; position:absolute; right: -350px; top: 10px; float:right; border:inset #0000FF 2px; border-radius: 12px; background:#FFFFFF; padding-top: 30px; font-family: DATAT_, Sans-Serif; }

li { float:left;
list-style-type:none }
.home { background: url(img/home_hover.png) no-repeat;}
@font-face {
font-family: "DATAT_";
src: url(“.eot“); /* para IE */
src: local("DATAT_"), url("fonts/DATAT_.ttf");
}

p { background:#dad;
font-weight:bold;
font-size:16px; }
button#port { background-color:#FFFF00; font:"Trebuchet MS"; color:#000000; border:inset 2px #333333; border-radius: 18px; font-weight:bold; width: 130px;}
img.hhp {
border: 0px solid black;
}
img.hhp:hover {
box-shadow: 0 1px 3px black;
position: relative;
left: -23px;
border: 0px solid black;
}
#jobs { display:none; }


-->
</style>
</head>
<body>

<div id="logo"></div><div id="menu"><div id="avril"></div>
<ul>
<li> <a href="#" ><img src="img/home.png" /></a></li>
<li> <a href="#" ><img src="img/sobre.png" /></a></li>
<li> <a href="#" ><img src="img/participe.png" /></a></li>
</ul>
</div>

<div id="boxgeral">
<p>

<b><span style="color: red; font-family: 'Trebuchet MS', sans-serif; font-size: large;">BLOGS HOT</span></b><br />
Você gostaria de ter seu banner divulgado em nossa barra?
É simples, primeiro você vai ter que concordar com algumas regras;

<ul>
<li>Seu blog tem que ter mais de 4 mil acessos diários</li>
<li>Seu blog terá que ser atualizado pelo menos 3 vezes na semana</li>
<li>Seu blog terá que ter um Layout agradável e leve</li>
<li>Você terá que sinalizar alguma postagem que contiver material adulto</li>
<li>Encher o saco no chat do grupo de blogueiros da barra é igual suspensão imediata*</li>
<li>Você irá usar nossa barra no topo do seu site antes do cabeçalho, geralmente depois da tag <b><body></b></li>
</ul>
<div>
*divulgação excessiva (spam)</div>
<div>

</div>
<div>
O Propósito dessa barra é unir alguns blogueiros e formar uma sólida amizade assim podendo trocar experiências, compartilhar conteúdo e de quebra divulgar seu blog nos outros blogs parceiros, no começo iremos começar com apenas <b>5 blogs</b> com o decorrer do tempo se for conveniente iremos aumentar essa quantia.</div>
<div>
Se você deseja participar e concorda com todas as regras de participação deixe abaixo um comentário com a URL do seu blog + alguma forma de  contato rápido (msn/twitter/facebook), se seu blog for aprovado iremos adicionar seu blog a barra.</div>



</p>
<div id="sidebar">
<esconde><span id="jobs">
<center>TRABALHOS:</center>
<img src="img/336x47.png" class="hhp" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
<img src="img/336x47.png" width="315"/>
</esconde></span></div>
<button id="port" style="margin-left: 100px;">PORTFÓLIO</button>

<script>
$("button").click(function () {
$("esconde").toggle("slow");
});    
</script>
</div>

</div>
</body>
</html>

 

 

Outra coisa também, tem alguma resolução que é recomendável ao desenvolver Websites?

Boa noite.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tipo to montando um projeto e ta indo bem, o que acontece é que quando eu dou ZOOM -

pra ver como fica em outras resoluções

não não! para tudo!

 

zoom é uma coisa, resolução é outra coisa. Completamente diferente.

Instale o plugin WebDeveloper no teu Firefox.

 

Mudar de resolução é apenas 'mudar a area' da view port do browser.

onde antes era de 1024x768, depois pode ser de 1440x900... nada a ver com zoom.

 

Mudar a resolução é como pegar a janela do browser e esticar, deixando ela maior ou menor. Apenas isso.

 

--

A resolução 'recomendada' é aquela que os seus visitantes mais usam.

Quem é o seu público ? velhinhos com dificuldade de leitura ? jovens gamers com monitores gigantes ?

estude o seu publico alvo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

David32    1

David32
Postado

[...]

 

Mudar a resolução é como pegar a janela do browser e esticar, deixando ela maior ou menor. Apenas isso.

 

[...]

 

Ah entendi, mais e sobre esses objetos que vem para as margens do site?

Porque faz isso? como corrigir?

Abraço.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você está usando muitos 'positions'.

 

Remova todos, e estruture apenas com margins, paddings e floats.

Positions são perigosos se você não tiver total controle sob eles. O seu problema é por causa do uso desses positions.

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