Centralizar Site feito em PX.

Lu Reis · 5 de maio de 2011

E ae pessoal,

Estou precisando centralizar um site, dei uma procurada aqui no forum e vi um esquema pra fazer utilizando margin, porém, ao invés de PX utilizar %.

Eu queria saber se tem como fazer o esquema da % em um site que esta todo criado em PX.

Agradeço a atenção !

DiF · 5 de maio de 2011

olha.. todavez que eu tentei usar uma posiçao dinamica e uma margin.. nao funcionou... de repente uma boa solução é fixar com position: fixed e determinar um top e um left. ou usar um position:static ... se nao der.. tenta um position: absolute

Lu Reis · 5 de maio de 2011

Não sei se eu entendi errado, mais no site inteiro eu já estou usando o position: absolute ...

DiF · 5 de maio de 2011

então... a posiçao absoluta faz com que você coloque um elemento em um determinado lugar usando o top ou bottom para setar o eixo Y e o left ou right para eixo X..

usando top: 10%; e left: 30%; no container... faz com que seu container todo ou seja o site todo seja movido para 10% do topo e 30% da margem esquerda.

mas para calcular isso... você tem que calcular os espaços.. por exemplo vou dar em porcentagens certo?

temos a tela inteira como 100%.. deixando no meio o conteiner.. poderia fazer assim:

primeiro define as margens.. vamos supor que você queira deixar 20% de cada lado... então que nos resta para o container é de 60% para atingir os 100%.

agora um exemplo de como da pra fazer usando os PX:


!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Centrar uma  página com CSS</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<style type="text/css">
body {
	margin:0;
	padding:0;
	background:#ccc;

	}
#tudo {
	width: 760px;
	margin:0 auto;			
	}
#conteudo {
	padding: 5px;
	background-color: #eee;
	}
</style>
</head>
<body>
<div id="tudo">
	<div id="conteudo">
		<h1>Pagina Centrada com CSS sem scroll até 800x600</h1>
		<p> Não use nenhum elemento HTML figuras, tabelas, etc...) com largura superior a 750px.</p>
	</div>
</div>
</body>
</html>

note que se você usar o CTRL + Scroll( mouse) o layout vai manter as proporçoes.. diferente de se usar com % que vai se achatar.

agora tem sempres pros e contras.. usando PX fica aquela largura e deu. usando % fica a largura determinada para todas as resoluçoes.

Lu Reis · 5 de maio de 2011

Entendi mais ou menos, por exemplo, se eu quisesse trocar o site todo para %.

Eu teria q mudar só os WIDTH ?!

Mudaria no CSS ou no HTML !?

Agradeço sua atenção !

DiF · 5 de maio de 2011

nesse caso você mudaria sempre as medidas no seu CSS. no HTML jamais.. pois sempre defendo nao usar tags inline... bom isso é mania minha..

Lu Reis · 6 de maio de 2011

Entendi, é vou começar a trabalhar usando mais o CSS, teria como você postar um exemplo simples de um HTML e um CSS fazendo margem de 10% de cada lado e um container de 80% ?!

Só para eu ter uma ideia melhor !

DiF · 6 de maio de 2011

Aqui esta um exemplo:


<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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=ISO-8859-1" />
<title>Insert title here</title>

<style type="text/css">

#container{
	[COLOR="Red"]width: 80%; [/COLOR]
	height:600px; 
	background-color: red; 
	color:#ffffff;  
	[COLOR="Red"]display: block;[/COLOR] 
	[COLOR="Red"]margin-left: 10%;[/COLOR]
	text-align: center;
	font-family: arial;
	font-size: 16pt;
}

</style>
</head>
<body>

<div id="container">
este é um container que abriga<br/>
toda a estrutura do seu site

</div>

</body>
</html>

bom.. destaquei em vermelho onde você deve ter mais atençao.

o width especifica a largura de sua div

o display: block faz com que a div seja interpretada como bloco, serve para mostrar ela sem que nada estaja dentro da div. se nao colocasse como block, a div só ira aparecer no momento que colocar algum conteudo na div.

e o margin-left: 10% determina a posiçao. se você esta usando na div 80% de largura, e especificar que tera 10% de margem esquerda, obrigatoriamente você terá uma margem direita de 10% então nem é preciso colocar no css.

com isso sua div fica centralizada e continua mantendo os 80% de largura, e 10% de margem esquerda e direita se redimencionar o navegador. ou seja resumindo.. nao perde suas proporçoes ao contrario de usar com PX que é um valor fixo se redimencionar.. "corta"

Lu Reis · 6 de maio de 2011

Olha fiz esse codigo, ve se tá certo por favor ...

No Firefox ele tá perfeito, mais no IE dá uma pequena diferença ...

CSS

#body {

	background-color: #005300;
	margin: 5% 5% 5%	5%;


}

#container {

	position: absolute;
	width: 90%; 
	height: 450px; 
	background-color: #ffffff;
	border: 1px #000000 solid;


}

#logo {

	position: absolute;
	left: 2%;
	top: 2%;

}

#login {

	position: absolute;
	left: 60%;
	top: 30%;
	width: 30%; 
	height: 100px; 
	background-color: #ffffff;
	border: 1px #000000 solid;


}

HTML

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

<html>
<head>
<title>Portal</title>

<link rel="stylesheet" href="estilo.css" type="text/css">
<link rel="stylesheet" type="text/css" href="estilo.css" />


</head>

<body id="body">

<div id="container">
	<img src="imagens/logo.png" id="logo">
	<div id="login">
		a
	</div>

</div>


</body>

</html>

O IE é o 6, não testei nos novos ...

Aquele DOCTYPE eu peguei em um forum, será q ele so funciona com acesso a internet, porque na maquina q eu estou programando, não tem acesso a internet...

DiF · 6 de maio de 2011

você na precisa colocar uma id em body podes fazer direto:


body{ ... }

também nao conselho a colocar aquelas margens no body. tira elas dali

e adiciona sómente no container.

tente assim:



/* CSS RESET */
*{ margin: 0; padding: 0; }

body {

	background-color: #005300;
}

#container {
	width: 95%;
        display: block;
        margin-left: 5%;  
	height: 450px; 
	background-color: #ffffff;
	border: 1px #000000 solid;


}

Lu Reis · 10 de maio de 2011

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Centrar uma  página com CSS</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<style type="text/css">
body {
	margin:0;
	padding:0;
	background:#ccc;

	}
#tudo {
	width: 760px;
	margin:0 auto;			
	}
#conteudo {
	padding: 5px;
	background-color: #eee;
	}
</style>
</head>
<body>
<div id="tudo">
	<div id="conteudo">
		<h1>Pagina Centrada com CSS sem scroll até 800x600</h1>
		<p> Não use nenhum elemento HTML figuras, tabelas, etc...) com largura superior a 750px.</p>
	</div>
</div>
</body>
</html>

Consegui usar esse codigo que você me mandou, o problema agora, é que no IE o efeito ao usar o scroll do mouse é diferente ... no Firefox o site aumenta proporcionalmente e cria a barra de rolagem inferior e no IE ele só aumenta as letras, mantendo a mesma margem dos dois lados ....

O resultado que eu preciso é exatamente esse do Firefox !!!

DiF · 10 de maio de 2011

se usou assim.. teoricamente deveria funcioanr... enfim uma dica boa de testes.. baixa o programa pelo baixaqui chamado "IETESTER" ele engloba o IE6, 7, 8 e 9 para testar compatibilidade e ver os possiveis bugs de layout para depois corrigir com um IE HACK que consiste em criar um novo css só para o IE do lugar que esta dando problema.. e adiciionando a pagina uma condicional do tipo:

..... comandos

Lu Reis · 10 de maio de 2011

Na verdade nao funcionou no IE6, testei no IE9 e funcionou perfeitamente ...

Eu vou começar a montar o site todo novamente, você me aconselha desenvolve-lo usando esse codigo como base ?!

Tem alguma dica ?!

Na configuração do meu PC, é melhor deixar em qual resolução para desenvolver ? ou isso não importa ?!

Obrigado

Mog.Lucas · 10 de maio de 2011

Dá pra fazer assim:

.centro {
	position: 	relative;
	text-align:	center;
	[B]width:		800px;
	left: 		50%;
	margin-left:	-400px;[/B]
	margin-top: 	15px;
	font-family:Verdana, arial;
	font-size:	8px;
}

Como pode ver, coloque o margin-left metade do width

Lu Reis · 10 de maio de 2011

Mog.Lucas

vou testar esse esquema mlkão !!!

dif

QQ tu acha doq eu escrevi ali emcima ... tem alguma dica !?

Lu Reis · 21 de maio de 2011

DIF

voce acha interessante eu usar % em todos os Top, Left, Right, Width e Height do Site ?!

Ou apenas na div que engloba o site todo !?

DiF · 21 de maio de 2011

certamente eu acho melhor usar a percentagem no Top, Left, Right na div que engloba .. ou seja no container... eu particular mente seto em percentagem a posiçao do top e left. com posiçao absoluta... ja o width e height.. eu seto em pixels mesmo...

por exemplo estou desenvolvendo o site do meu tcc... no container eu coloquei assim:

#container{

position: absolute;

top: 10%;

left: 50%;

margin-left: -421px;

width: 960px;

height: 900px;

}

pelo menos testado em uma resoluçao 1280 x 800 e 1920 x 1080 ambos ficaram centralizado o site, e usando o scroll do mouse segurando o ctrl ... e rolando... o site diminuia o tamanho mantendo as proporçoes ou aumentando... é melhor quando acontece isso do que quando diminui ou aumenta e fica tudo aglomerado .. enfim.. estou adotando esta tecnica..sempre.. tomara que funcione também com você.