Jump to content
Vilson J. Santos

Zoom Bagunçando Estrutura do Site

Recommended Posts

  Boa noite pessoa, eu estou desenvolvendo a estrutura do meu portfólio e estou tendo problemas com relação ao zoom na página, a principio eu resolvi fazer todo o site utilizando medidas em porcentagem (não sou muito experiente com html ou css e não sei qual é a maneira correta) mas quando eu dava zoom os textos e tabelas simplesmente saiam de suas divs e ficava tudo bagunçado, percebi que apenas as imagens não saiam de seus devidos lugares... enfim dei uma lida em alguns posts pela internet e descobri que poderia acabar com este problema criando uma Div que cobria todo o site com suas medidas em pixels e depois poderia fazer documentos CSS para as diversas resoluções usadas hoje em dia para não ter problemas com a resolução do site, enfim, ao colocar esta Div que cobre todo o site o problema ao dar zoom foi resolvido, contudo apareceu um outro problema que é ao diminuir o zoom, meu site simplesmente encolhe e se torna pequeno a ponto de caber no canto superior da tela.

  Gostaria de saber como resolver este problema, e também se a medida que tomei de criar uma Div que cobre todo o site em pixels é a maneira correta de se lidar com esse problema do zoom.

OBS: segue foto do problema ao tirar o zoom e o código da Div que cobre o site:

 

#site{
	background-color:;
	position:absolute;
	height:768px;
	width:1368px;
	
}

 

problema site.png

Share this post


Link to post
Share on other sites

É como eu disse num outro post. Responsividade... pare de trabalhar com a unidade de medida 'px' e utilize 'em' ou '%' em vez.

Share this post


Link to post
Share on other sites

@Vilson J. Santos antes encontrar a solução ao seu problema, responda: por qual motivo alguém daria "zoom out extremo" no seu site?

 

@Iskandar usar apenas percentual é layout fluído, ou seja, o layout flui conforme a resolução. Layout responsivo é "responder" a diferentes resoluções.

Share this post


Link to post
Share on other sites
16 horas atrás, Gabriel Heming disse:

@Vilson J. Santos antes encontrar a solução ao seu problema, responda: por qual motivo alguém daria "zoom out extremo" no seu site?

 

@Iskandar usar apenas percentual é layout fluído, ou seja, o layout flui conforme a resolução. Layout responsivo é "responder" a diferentes resoluções.

  Eu realmente não tenho ideia do porquê de alguém dar zoom no meu site, porém eu sai pela net dando zoom em todos os sites que eu encontrava e percebi que a grande maioria não fica todo bagunçado com o zoom e gostaria de entender como fazer para que o meu também não fique, meu principal problema é que todo o texto que escrevo no html saem de suas respectivas divs quando dou zoom (isto usando todas as medidas em %), dei uma pesquisada e o que consegui fazer foi incluir a div geral que cobre todo o site em pixel e todo o restante em % para que se adapte à ela e neste caso farei com que esta div geral se adapte de acordo com a resolução do monitor do usuário usando media queries, acho que consegui resolver o problema mas sofri bastante

Share this post


Link to post
Share on other sites
16 minutos atrás, Vilson J. Santos disse:

  Eu realmente não tenho ideia do porquê de alguém dar zoom no meu site, porém eu sai pela net dando zoom em todos os sites que eu encontrava e percebi que a grande maioria não fica todo bagunçado com o zoom e gostaria de entender como fazer para que o meu também não fique, meu principal problema é que todo o texto que escrevo no html saem de suas respectivas divs quando dou zoom (isto usando todas as medidas em %), dei uma pesquisada e o que consegui fazer foi incluir a div geral que cobre todo o site em pixel e todo o restante em % para que se adapte à ela e neste caso farei com que esta div geral se adapte de acordo com a resolução do monitor do usuário usando media queries, acho que consegui resolver o problema mas sofri bastante

Use um padrão, tente usar % para div's, e "em" para font's. E para seu site não ficar da forma que esta na imagem, ex: voce deu zoom e ele ficou colado a ESQUERDA. Para resolver isso basta clicar uma DIV global onde ela irar ter uma medida padrão em PX.

 

Ex: Abaixo

 

<head>
  div.container{width: 1024px; height: 0 auto; margin: 0 auto;}
</head>
<body>
  <div class="container">
    <p> Todo conteudo do Site </p>
  </div>
</body>

Assim oque tiver dentro da div ao dar ou remover zoom o site ira continuar centralizado na tela.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • By Carcleo
      Estou a um tempo tentando criar um slider personalizado.
      De fato, eu até consegui e coloquei no codepen. https://codepen.io/carcleo/pen/yLVOxMv
       
      Mas uma implementação não estou conseguindo fazer.
       
      Nos sliders prontos que pegamos na web, ao redimencionar manualmente o navegador,   a UL que abriga as LI's com os Slides, se redimenciona junto e isso não acontece com o meu, Isto é, ao diminuir a janela do navegador, as imagens acompanham o tamanho das LIs, mas como não consigo redimencinar a UL junto os slides acabam se mostrando de forma errada. 
       
      Não consegui uma forma de fazer o CSS fazer esse serviço. Só consegui com JS.
       
      Se alguém puder ajudar?
       
      Obs.: não quero copiar da internet, meu objetivo é entender a logica da coisa
    • By silvagno
      Boa tarde,
      É possível formatar um texto nesse código? ou seja, pular linha, colocar em negrito, centralizar e etc.
      Estou usando uma função que ao digitar o código 10400 ele chama o texto e gostaria de formatar esse texto.
      <script> var dados = [{"codigo": "10400", "Nome": ["testando texto não formatado"]}, ]; </script> $('input[name="nome"]').change(function(){ var nome = $(this).val(); var text = $('textarea[name="nome pessoal"]').val(); $('textarea[name="nome pessoal"]').val(text.replaceAll('(testando texto não formatado)',nome)); });  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.