Como centralizar o conteúdo na página?
No artigo anterior, postei um código para centralizar todos os elementos dentro de uma página, independente da resolução de monitor. Para se atingir este objetivo, a utilização de elementos div foi essencial. Observe o seguinte trecho do código:
html, body, #conteudo{height:100%;}
Aqui, os elementos html, body (o corpo da página, parte visível ao usuário) e a div id “#conteúdo”, tiveram suas respectivas alturas definidas como 100%, ou seja, independente do tamanho da janela do browser(navegador), elas ocuparam toda a altura disponível.
Já neste trecho:
body{text-align:center;}
O body é utilizado como seletor de css para centralizar o conteúdo geral. Na verdade, com esta atribuição, o elemento principal da página (#conteudo), estará sempre centralizado.
#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}
A div id “#conteudo” será utilizada como div principal, todas as outras divs estarão dentro (aninhadas) a ela. Assim, é possível controlar a centralização dos elementos. A largura, definida como “width:796px”, tem o tamanho ideal para resolução de 800×600. Foi definida uma borda (border: 2px #666666), por razões estéticas, o mesmo acontecendo com a cor de fundo (background-color:#CCCCCC). O posicionamento foi definido como relativo (position:relative;) à página (elemento html e body). A margem está definida como automática (margin:auto).
Note que as div criadas posteriormente (esquerda, centro, direita) são inseridas dentro da div “#conteudo”, ou seja, suas tags são abertas e fechadas dentro da div principal, fazendo com que elas fiquem “dentro” da mesma. Todas estão com o atributo “position:absolute;”, para que o posicionamento seja absoluto com relação ao elemento pai (“#conteudo”), não à página.
Finalizando, foi inserida a div “dentro”, inserida dentro da div “esquerda”, demonstrando que é possível inserir divs dentro de divs indefinidamente. Porém, com critério e organização.
Grande abraço!
Manda ver!