Blog do web designer Paulo Victor

Você tem acesso a essas imagens já cortadas na pasta fornecida pra download no ínicio do post. Agora, o próximo passo é colocar cada imagem como background de sua div respectiva.

Por exemplo: adicionaremos na div #topo, a seguinte linha:

#topo {
position:absolute;
width:950px;
height:150px;
z-index:1;
left: 5px;
top: 5px;
background-image:url(topo.jpg);
}

Na div #menu, vamos por a imagem “menu.jpg” como background e assim sucessivamente.

Se você está seguindo este tutorial corretamente, passo-a-passo, provavelmente percebeu que pequenas partes dos textos estão ficando para fora da borda da div, para resolver este problema com a inserção do atributo padding em todas as divs. Vou colocar em todas elas, o valor 5px no padding. Veja como ficará a div #topo no exemplo.

#topo {
position:absolute;
width:940px;
height:140px;
left: 5px;
top: 5px;
background-image:url(topo.jpg);
padding:5px;
}

Repare que diminui em 10px a div tanto na altura, quanto na largura, isso se deve pelo fato do atributo padding criar uma margem entre a borda e conteúdo nos quatro lados da div, somando assim o tamanho dessa margem ao tamanho total da div.

Outra observação a ser feita é que existem diferente maneiras de se atribuir um valor ao padding:

padding: #px; – o mesmo valor será válido para os quatro lados da div

padding:#px #px; – o primeiro valor é válido para os dois lados da vertical (topo e rodapé) da div.

padding: #px #px #px #px; – Atribui um valor diferente para cada lado, em sentido horário, sendo o primeiro valor para o topo da div e o ultimo para a borda esquerda da mesma.

Após esses passos, chegaremos ao seguinte resultado: