HTML Quando ampliar ou reduzir o site com zoom o site não ir para esquerda

Natanael Marrafon Rocha · 13 de fevereiro de 2019

Como eu faço para o meu site quando eu der um zoom nele rolando o scroll do mouse ele não ir diminuindo para a esquerda como está na imagem ? Igual quando diminui o zoom no google e ele fica centralizado ao meio ? eu coloquei "display:inline-block" no meu site mas apenas funciona com o menu, depois eu coloquei o meu menu com a "position:fixed" e parou de ficar centralizado e voltou a esquerda do mesmo jeito.

Ficar assim:

DiF · 13 de fevereiro de 2019

@Natanael Marrafon Rocha Basta você colocar todo seu site dentro de um elemento DIV e definir que esse elemento fique centralizado.

Por exemplo:

<body>
  <div class="tudo">
       aqui dentro você coloca o seu site.
    
  </div>
  
  
</body>

.tudo{
  width: 960px;
  margin: 0 auto;
}

Este exemplo, deixaria o elemento no tamanho de 960px e centralizaria no meio. Assim que der o zoom ou retirar, irá continuar do meio e tudo que tiver dentro deste elemento, também vai acompanhar o elemento pai.

Natanael Marrafon Rocha · 13 de fevereiro de 2019

7 minutos atrás, DiF disse:
@Natanael Marrafon Rocha Basta você colocar todo seu site dentro de um elemento DIV e definir que esse elemento fique centralizado.

Por exemplo:
<body>
  <div class="tudo">
       aqui dentro você coloca o seu site.
    
  </div>
  
  
</body>  
.tudo{
  width: 960px;
  margin: 0 auto;
}
Este exemplo, deixaria o elemento no tamanho de 960px e centralizaria no meio. Assim que der o zoom ou retirar, irá continuar do meio e tudo que tiver dentro deste elemento, também vai acompanhar o elemento pai.

Nossa Dif muito obrigado pelas suas respostas, está me salvando muito a unica coisa eu coloquei o align center na div mas o meu menu é position:fixed quando eu diminiu o zom apenas ele vai para a esquerda o resto fica centralizado como faço ? codigo do menu é esse CSS:

Citação

.menu {
    position:fixed;
    top:0;
    left:200px;
    z-index:1;

}

.menu ul li {
    display:inline-block;
    background-color:#02ECFD;
    padding:30px;
    border-radius:20px 0 20px 0; 
    font-family:Arial Black;
}

.menu ul li a {
    text-decoration:none;
    color:white;
    
}

.menu ul li:hover {
    background-color:#038EF8;
}

HTML:

Citação

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="utf-8"/>
		<title>Site</title>
		<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
	</head>
	<body>
	<div class="tudo" align="center">
		<div class="menu">
			<ul>
				<li><a href="index.html">Inicio</a></li>
				<li><a href="localizacao.html">Localização</a></li>
				<li><a href="contato.html">Contato</a></li>
				<li><a href="sobre.html">Sobre</a></li>
			</ul>
		</div>
		<div class="banner1">
		<img src="imagens/clinica1.jpg" width="995px" height="200px">
		</div>
		<div class="tela">
		<iframe class="meio" src="pagina1.html" frameborder="0" scrolling="no"></iframe>
		</div>
		<div class="rodape">
		<img src="imagens/rodape.png">
		</div>
		</div>
	</body>
</html>

DiF · 13 de fevereiro de 2019

@Natanael Marrafon Rocha

O problema é quando declara que o elemento é fixo, ele fica de fora das posições dos outros.

Então para contornar isso, você tem que fazer uma estrutura ali onde o menu fique centralizado de forma natural sem posição fixa e fixar o elemento pai.

Em outras palavras, deixe o elemento pai <div class="menu"> com o width 100%, e centralize o elemento UL.

<div class="menu">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
 </div>

.topo{
   width: 100%;
}

.topo ul{
    margin: 0 auto;
}

O margin: zero auto, faz com que o elemento fique no meio e colado no topo da tela. e de fato, o elemento pai, precisa estar centralizado também.

Entrar

HTML Quando ampliar ou reduzir o site com zoom o site não ir para esquerda

Posts recomendados

Natanael Marrafon Rocha

DiF

Natanael Marrafon Rocha

DiF

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos