Twitter
RSSHoje vou mostrar aqui uma técnica para centralizar a página no meio da tela. Uma técnica muito comum é ativar a propriedade align="center" da tag div, porém não recomendo pois fica mais pra uma P.O.G, então vamos fazer isso com CSS, separando layout de conteúdo ;)
Vamos pensar na estrutura do site
Vejamos como o HTML fica neste caso
<!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=utf-8" />
<title>Web Como Um Todo!</title>
</head>
<body>
<div id="principal">
<div id="conteudo">
Conteúdo aqui!
</div>
</div>
</body>
</html>
Show! Já temos o conteúdo(HTML), agora é hora de definir o layout(CSS).
#principal{
width: 100%;
}
#conteudo{
width:500px;
margin:0 auto;
border: 1px solid #000000;
}
Repare que definimos estilos para as duas DIVs, na div PRINCIPAL definimos a largura em 100%, ou seja, a largura de toda tela será preenchida. No div CONTEUDO foi definido a largura para width:500px; (apenas para exemplo, você pode definir a largura que desejar), uma borda border: 1px solid #000000; (para melhor visualizar o efeito) e o grande responsável pelo alinhamento do div na tela a propriedade margin: 0 auto;
0 comentários:
Postar um comentário