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!