Marcus VBP

Observando o layout, percebe-se que, com exceção do tocador de músicas no topo, os demais elementos possuem uma dimensão fixa, e que os lados direito e esquerdos possuem margens eqüidistantes do canto do navegador. Se acessar o site com uma resolução de tela de 800x600 percebe-se ainda que a página vai ocupar quase todo o espaço disponível, praticamente ocultando o fundo.

Para se realizar este efeito, é necessário que aja um elemento HTML (que é geralmente uma DIV) englobando todos os elementos que se quer centralizar. Isso geralmente é feito utilizando uma DIV chamada de container (e convenientemente identificada como "container" através do atributo id) que é filha direta do elemento body e engloba todos os demais elementos do site (salvo algumas raras excessões, como é o caso deste projeto; aqui o bloco que delimita o tocador de músicas escapou do abraço da DIV "container"). Em seguida, aplica-se a seguinte folha de estilo:

Explicando o código acima: o primeiro atributo, width, refere-se à largura. Em geral usa-se 768 pixels de largura ou menos, para evitar que os visitantes com resolução de tela de 800x600 não vejam barra de rolagem horizontal. O segundo atributo, position, torna aquele elemento posicionado de forma relativa. Mais à frente o posicionamento através de CSS será detalhado em um capítulo à parte.

O atributo left com valor igual a 50% faz com que o eixo x (o eixo horizontal) tenha início exatamente no centro do espaço disponível na área do navegador. O layout, contudo, não está centralizado. Para que isso ocorra, é necessário alinhar o centro do elemento com o centro do navegador. Para achar o centro do elemento e alinhá-lo, basta dividir a largura (que no caso é 764px) por 2, e aplicar o valor obtido com sinal negativo à margem esquerda (controlada pelo atributo margin-left). Feito isso, o layout estará centralizado.