CSS Tableless : Alinhamento no eixo xy (0,0)
O W3C(World Wide Web Consortium) criou linguagens padrões para web, como HTML, CSS e XML entre outras, essas linguagens chamadas de Web Standarts eram rascunhos quando começou a guerra dos Browsers Internet Explorer e Netscape. Esses browsers como ainda não tinha um padrão definido fizeram seu próprio padrão um exemplo disso é a TAG Bgsound que só funciona no Internet Explorer.
Essa incompatibilidade de navegadores gera grandes problemas aos usuários e desenvolvedores. Aos usuários o problema era mais para deficientes visuais ou sonoros que não conseguiam navegar pelas páginas pelo problema dos padrões e aos desenvolvedores a dificuldade era na criação de um site, que se tornava um trabalho duplo.
Com essa confusão a W3C decidiu criar o WaSP (Web Standards Project), que era um movimento para unir os padrões de todos navegadores em um só. Esse projeto conseguiu convencer os donos dos principais Browsers a fazer o sistema modelo.
Com as padronizações surgiu um movimento chamado Tableless que defendia o uso correto do código para as páginas. Se o objetivo era fazer um parágrafo usa-se a TAG <p> </p> , fazer uma quebra de linha <BR /> e tabela quando se deseja fazer uma exposição de dados tabulares (horários,
calendários), pois muitos designers usavam tabelas para fazer a diagramação do layout .
Além de usar a linguagem correta o Tableless torna os arquivos das páginas mais compactos aumentando a velocidade de navegação. Outro ponto forte é a compatibilidade entre os diversos navegadores.
Para alinhar o conteúdo do seu site no eixo xy (0,0) é necessário fazer o seguinte código CSS entre a tag <head> da sua página:
<style type=”text/css”>
#content{
width:500px; // define o espaço de largura do seu site
height:500px; // define o espaço de altura do seu site
margin‐top:‐250px; // sempre a metade da altura
margin‐left:‐250px; // sempre a metade da altura
left:50%; // ponto de alinhamento ficar nos 50%
top:50%;// ponto de alinhamento ficar nos 50%
position:absolute; // posição absoluta.
}
</style>
Depois disso será nessesário colocar todo o Html da sua página numa tag div dentro do <body>:
<div id=”content”>
.
.
.
</div>
Você pode ver o funcionamento desse código nesse link
