Centralizando o conteúdo na página com Layout fixo
Olá a todos (novamente). Agora uma dica rápida de css para quem quer definir um layout de largura fixa e centralizado. Antigamente isso era possível usando table ou div para colocar o conteúdo centralizado. Agora podemos fazer isso facilmente definindo um estilo para o objeto body. Vejam só:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="border: solid 1px black;">
Oi Conteúdo centarlizado ocupando todo o tamanho disponível
</div>
</body>
</html>
Estou usando aqui o XHTML 1.1. Eu já testei com XHTML 1.0 e HTML 4.01 e também rola. Falando de navegadores, no IE7 e no Firefox 2 rola. Acho que no IE6 também rola, já que é CSS padrão.
Analisando o CSS:body {
width: 700px;
margin: 0 auto;
}
Definimos a largura padrão para o documento de 700px e as margens como: 0 para superior e inferior e automática prar esquerda e direita.
O CSS para margens funciona assim:margin: [superior] [direita] [esquerda] [inferior];
Caso informe somente um valor este será aplicado para todas as margens. Caso informe dois serão repetidos conforme a explicação acima.
As margens auto na direita e na esquerda indicam para o navegador dividir o espaço que sobra entre os lados, centralizando o conteúdo.
Acabou sendo mais longo que eu pensei, mas tá maneiro :) Abraços e até mais.
Nenhum comentário:
Postar um comentário