Bom dia hoje vou mostrar como centralizar uma página na net.
Vou criar uma página em HTML normal e acrescentar um tag CSS, fundamental para o esquema.
Uma breve explicado em CSS.
Existem 2 tipos de usar tags ou códigos CSS, colocando dentro da página em HTML, ou fazer um externo e mandar o HTML chamar aqueles códigos.
Eu prefiro fazer externo pois da para com um só voce usar para varias paginas e o código HTML fica mais limpo e bem mais organizado com relação a colocar um CSS dentro.
Bom vamos ao assunto.
Primeiro vou explicar o código depois mostro como colocar no HTML.
Da pra crir no bloco de notas mesmo, só que na hora de salvar terá que forçar a extenção para .css e escolher a opção UTF-8.
Bom a tag é essa:
__________________________________
@charset "utf-8";
/* CSS Document */
body
{
width:800px;
height:524px;
position:absolute;
top:50%;
left:50%;
margin-left:-400px;
margin-top:-262px;
}
__________________________________
estou dando um exemplo com uma página de tamanho 800px por 524px.
bom é o seguinte porque esse código?
primeiro voce determina o tamanho,
depois da a posicao absoluta para nao ter repeticoes e tals,
depois determina em porcentagem a distancia do topo e da margem esquerda (nao em pixel),
depois joga a metade dos valores totais em negativos.
é uma conta matemática que o CSS faz e joga o conteúdo no meio.
se a página tiver 333px arredonde para 334px no CSS ai voce pode dividir no meio.
teste e troque os numeros e entenda por si próprio como funciona.
bom salve como "estilo_centralizado.css" (se tiver no bloco de notas UTF-8).
Agora vamos colocar no HTML.
vou dar os dois exemplos
CSS externo:
__________________________________
<html>
<head>
<title>CSS centralizado</title>
<link href="estilos/estilo_centralizado.css" rel="stylesheet" type="text/css" />
</head>
<body>
página
</body>
</html>
__________________________________
CSS interno:
__________________________________
<html> <head> <title>CSS centralizado</title> <style type="text/css"> <!-- {width:800px; height:524px; position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-262px; } !--> </head> <body> página </body> </html> |
Sempre jogando o CSS dentro do HEAD.
Não é dificil depois de ler atentamente e entender direito fica fácil.
__________________________________
Ai meu irmão como diz meu professor copy/paste forever.
Lembrando que é simples, falar comigo:
e acesse o meu grupo de discussões
