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 3

24 de Maio de 2008

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.

 

Veja o resultado:

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!

Ir para parte 4

© 2006 - 2017