Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno Artacho

As divs se deslocam quando eu dou zoom no site

Por , em Desenvolvimento frontend

Recommended Posts

Bruno Artacho    0

Bruno Artacho
Postado

Bom dia.

 

www.eventualprom.com.br

 

Eu sou iniciante em desenvolvimento de sites e estou com um probleminha de resolução, pois quando dou zoom pelo navegador, minhas divs se deslocam.

Gostaria de saber se alguém pode me ajudar a resolver esse probleminha.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Se os elementos estão se deslocando, voluntariamente é a última coisa que deve ser.

Sua resolução de tela deve ser 1360/1366 x 768. Concluí que você desenvolveu o site para sua resolução de tela.

Aqui, por exemplo, o background do cabeçalho repetiu duas vezes. Se perceber, ele repete infinitamente. Além de não ser a melhor forma de estruturar um cabeçalho, você não determinou o valor no-repeat para background-repeat.

A largura do seu cabeçalho é 100%, ou seja, o cabeçalho compreende todo o ecrã do usuário. Como você fez se baseando apenas na sua resolução, logicamente, tudo tende a ficar melhor no seu monitor.

 

O menu cai porque não há mais espaço no cabeçalho, mas essa parte é esperada, já que você não se preocupou com os outros usuários. O elemento se desloca a partir dos 1320 px de largura — o que é um absurdo, já que muitos utilizam resoluções inferiores a 1300 px. Falha de projeto, cabeçalho extenso (menu com 800 px e logo 300 px + margem ≅ 1110 px).

Um erro, além da falha de projeto, pode ser resolvido facilmente. Percebi que em todos os elementos 100% (cabeçalho e rodapé), você deixou o conteúdo no próprio container. Obviamente, ele se guiará pelo container e na sua resolução parecerá centralizado, mas não está. Entende o que eu quero dizer?

Veja o rodapé do iMasters:

NRjJqdT.png

Há o #footer (largura 100%, para o background se repetir por todo o ecrã), e o .max.width (elemento que concentra e centraliza o conteúdo do elemento: logo iMasters, formulário Newsletter etc).
O elemento com a classe .max-width está dentro do elemento 100% (#footer) e possui largura fixa (960 px), então, pode ser centralizado com

margin: auto;

Pronto. Fixo em relação ao ecrã. Também fixo em relação ao #footer, por possuir mesma largura do ecrã, de 100%.

Enquanto iniciante, não se desespere. Seu código está bom. Apenas evite o <center>, e acostume-se a fazer essas estilizações no CSS com as propriedades text-align (caso texto) ou margin (caso elemento). HTML linguagem de marcação e CSS linguagem de estilo.

Espero ter ajudado. :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alef Souza    0

Alef Souza
Postado

amigos por favor nao sei mais o que fazer alguem pode me ajudar urgente!!! eu estou fazendo este site para uma empresa em que trabalho e as minhas divs estao se deslocando, nao sou muito experiente nesta area pois tudo o que aprende foi vendo diversos videos vou postar o codigo do meu site aqui por favor me ajudem olhem onde eu errei..... esta tudo certo so que o menu eu tenho que da uma largura pra ele de 935px e quando eu dou esta largura os menus ficam descolados e so consigo dar 160px e mesmo assim eles se deslocam para baixo me ajudem por favor olha o codigo aqui ...............

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml [/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {background-color:#EEE;}
.center { width:955px; margin:0 auto 0 auto; background-color:#DEDEDE;}
#rodape {width:935px; height:30px; margin:0 auto; padding:10px; background:#090; clear:left;}
#menu {width:955px; height:35px; background-color:#009; float:left;}
#conteudo { width:935px; height:450px;padding:10px; background:#CDF; margin-top:35px;}
.nav {margin:0; padding:0px 0px; list-style:none; width:935px;}
.nav li {float:left; background:#900; width:150px; height:35px; text-align:center;}
 
 
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body background="images/palo de fundo.jpg">
 
<div class="center">
 
  <div id="logo" align="center">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="955" height="172" id="FlashID" title="Logo">
      <param name="movie" value="logo animado.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="15.0.0.0" />
      <!-- Esta tag param solicita que os usuários com o Flash Player 6.0 r65 e versões posteriores baixem a versão mais recente do Flash Player. Exclua-o se você não deseja que os usuários vejam o prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- A tag object a seguir aplica-se a navegadores que não sejam o IE. Portanto, oculte-a do IE usando o IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="logo animado.swf" width="955" height="172">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="15.0.0.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- O navegador exibe o seguinte conteúdo alternativo para usuários que tenham o Flash Player 6.0 e versões anteriores. -->
        <div>
          <h4>O conteúdo desta página requer uma versão mais recente do Adobe Flash Player.</h4>
          <p><a href="[url=http://www.adobe.com/go/getflashplayer]http://www.adobe.com/go/getflashplayer [/url]"><img src="[url=http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif]http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif [/url]" alt="Obter Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>
  <div id="menu">
  <ul class="nav">
    <li><a href="#">Intranet Atacadão</a></li>
        <li><a href="#">informática</a></li>
        <li><a href="#">Corporativo</a></li>
        <li><a href="#">Frente de Caixa</a></li>
        <li><a href="#">Links Uteis</a></li>
        <li><a href="#">Cadastro</a></li>
    </ul>
 
  </div>
        <div id="conteudo"></div>
  <div id="rodape">Rodape</div>
</div>
 
</body>
</html>

 

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