Alinhamento de site pelo CSS
Por Cosme Fa | 27 de Dezembro de 2005
pedidos de muitos (como se fosse verdade :P), resolvei fazer um artigo para ensinar como alinhar um site tanto na vertical quanto na horizontal com a ausncia de tabelas, utilizando CSS e XHTML, tal “proeza” complexa para alguns iniciantes.
Lembrando que s podemos efetuar tal alinhamento apenas quando o divisor estiver com um valor de largura e altura fixos, ou seja, o width e height tero que existir na diviso que quiser alinhar na horizontal e na vertical.
Vamos comear fazendo o nosso XHTML colocando a diviso que ser o conteudo, no nosso caso, o seletor principal:
<div id="conteudo">
</div>
O resto tudo CSS, vamos definir com que o body no tenha margem para no nos atrapalhar futuramente:
<style type="text/css">
body {
margin:0px;
}
</style>
Aps zerar a margem do corpo da pgina vamos fazer com que o nosso box aparea para podermos visualizar o alinhamento, ento no caso, criaremos o seletor #conteudo e…:
<style type="text/css">
body {
margin:0px;
}
#conteudo {
width:300px;
height:150px;
background-color:#ffffe1;
border:1px solid #999;
}
</style>
Acima definimos a altura, largura, cor de fundo e borda. J que achamos onde est o nosso box, vamos finalmente alinhar o nosso amiguinho. Primeiramente comearemos com o alinhamento horizontal:
<style type="text/css">
body {
margin:0px;
}
#conteudo {
width:300px;
height:150px;
background-color:#ffffe1;
border:1px solid #999;
position:absolute;
left:50%;
margin-left:-150px;
}
</style>
Explicando… acima defini ele como posio absoluta ao user-agent, defini que tenha 50% de espaamento esquerda e uma margem esquerda o valor em negativo da largura dividido por 2 (dois).
Agora vamos ao alinhamento vertical no CSS. quase o mesmo procedimento do horizontal, porm, com ajustes no top do box.
<style type="text/css">
body {
margin:0px;
}
#conteudo {
width:300px;
height:150px;
background-color:#ffffe1;
border:1px solid #999;
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-75px;
}
</style>
Chega t ser meio complicado, mas com o tempo fcil de gravar as propiedades para o alinhamento. Deve ter outra maneira de se alinhar, at a publicao deste artigo desconheo tal metodologia.
Show de bola, este artigo/tutorial..
Muito interessante mesmo..
Alm de ser muito utilizado pelas pessoas que fazem sites em webstandards.
Ol. Muito bom…
Mas se for apenas para centralizar o Div utilizo:
margin: 0 auto;
Coloca no centro j
At
Gustavo, eu no coloquei ali o margin:0px auto; porque no funcionaria o alinhamento vertical.
Sim… estava ciente disso Cosme… por isso utilizo apenas o “margin: 0px auto;” quando simplesmente quero centralizar, independente da resoluo.
At
Bacana demais, mas s no etendo uma coisa, por que se coloca # na frente de um seletor
Ol, Cleber. O seletor da identificao definido como a #. usado quando queremos criar um seletor ID.
Falarei mais sobre o seletor ID nos meus prximos posts sobre CSS. Enquanto isso acompanhe a introduo ao CSS aqui no blog.
Muito bom mesmo, existem muitos tpicos relacionados a alinhamento de camadas, mas neste pude perceber que em todos os navegadores tudo aceito sem erros. Valeu cara !
Olá,
Se eu alinhar um elemento no centro usando porcentagem, caso eu redimensione a janela do navegador para um tamanho menor que a do elemento redimensionado, algumas informações não vão aparecer na tela. Não teria uma outra maneira de realizar o alinhamento (no caso vertical, já que margin: auto não faz isso)
Aguardo respostas.