Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

Site em Tableless - Parte 2

17 de Maio de 2008

Estamos aprendendo como montar um site em Tableless. Na parte anterior fizemos a conexão da página HTML com o documento CSS, e já definimos alguns atributos da página. Nesta parte criaremos e posicionaremos os containers.

Vamos nomear fácilmente afim de serem identificados posteriormente:

* corpo
* topo
* menu
* lateral
* conteudo
* rodape

Definidos os nomes de cada container da página, vamos criar e edita-las no documento css e depois inserir no documento html. Então abra o arquivo estrutura.css e vamos criar nosso primeiro container.

Agora já podemos editar nosso container corpo:

#corpo {
    margin:0 auto; /* centraliza a div na página */
    width:700px; /* definimos uma largura de 700px */
    background-color:#FFF; /* definimos a cor de fundo da div */
    border:1px solid #CCC; /* definimos os atributos da borda da div */
    padding-bottom:12px; /* definimos o espaçamento da base */
}

Copie o código acima e insira na estrutura.css. O container corpo já está estilizado e posicionado corretamente. Basta inserirmos na index.html. Então vamos lá, abra o documento html e dentro da tag body  insira a seguinte instrução e depois atualize sua página:

 

Como você pôde ver, o container corpo já está inserido na página, estilizado e posicionado conforme determinamos no documento css. Por hoje é só. Na próxima parte vamos inserir os demais containers. Valeu galera, fiquem com Deus!

Ir para parte 3

© 2006 - 2017