Fala galera. Estamos aprendendo a montar um site em tableless.
Criação do Topo
Vamos criar a div topo, mas antes precisamos de uma imagem para inserir no nosso topo. Então mãos a obra, crie uma imagem de 700px de largura e 100px de altura e nomeie de topo.jpg.
Feito isso, abra o estrutura.css e editaremos a div topo.
#topo {
background: url("imagens/topo.jpg") no-repeat; /* imagem de fundo da div */
height: 100px; /* definimos a altura da div */
}Quando a largura da div não é especificada, ela automaticamente fica no tamanho da div pai. No nosso caso a div corpo que tem 700px. Dentro da div corpo vamos inserir a div topo.
Criação do Menu
A div menu será mais trabalhada, com isso exige um pouco mais de atenção. Na estrutura.css vamos adicionar nossa div:
#menu {
background-color: #F92; /* cor de fundo da div */
padding: 4px; /* distância entre a borda e o conteúdo do elemento na div */
color: #FFF; /* cor da fonte */
border-top: 1px solid #FFF; /* definimos os atributos da borda superior */
}
Vamos inserir na index.html.
O site está ficando legal. Na próxima parte vamos estilizar nosso menu. Abraços galera!