Tutorial de CSS > Criando um layout com CSS a partir do zero > Parte 9
9. O cabeçalho
Para implementar o cabeçalho, necessitamos obter a imagem de fundo aplicada ao div header
.
substitua o cabeçalho "Enlighten Designs" com uma logo gráfica e posicione-a no local correto,
no cabeçalho (a barra cinza escuro à direita).
Primeiro, crie duas imagens como as abaixo (ou copie estas mesmo):
/images/general/logo_enlighten.gif
/images/headers/about.jpg
A primeira parte é fácil. Atribua uma imagem de fundo na CSS utilizando o formato abaixo:
#header { height: 150px; background: #db6d16 url(../images/headers/about.jpg); }
A propriedade background que acabamos de usar é atualmente uma propriedade reduzida que permite-nos especificar a cor de fundo,
imagem, posição da imagem e como a imagem deve ser repetida, tudo em uma só linha.
Nós atribuímos o fundo para usar a mesma sombra alaranjada como a usada pelo cabeçalho somente para que a página não pareça tão
desagradável se o usuário não tem a exibição de imagens habilitadas em seu navegador.
Os caminhos para as imagens em seu arquivo CSS são relativos ao arquivo CSS, não à página HTML. Isto porque o ../
é
necessário no caminho acima.
Agora, substitua o texto "Enlighten Designs" com a imagem da logo. Novamente, lembre-se de manter a tag <h1>
e escreva uma descrição no atributo alt
.
<div id="header"> <img src="images/general/logo_enlighten.gif" width="236" height="36" alt="Enlighten Designs" border="0" /></h1> </div>
Agora nós temos que posicioná-la corretamente onde ela deve ficar. Vamos fazer isto flutuando a tag <h1>
à
direita, e então usar as propriedades margin-top
e padding-right
para obter
a exata posição. Adicione o seguinte texto à regra <h1>
em sua folha de estilos:
h1 { margin: 0; padding: 0; float: right; margin-top: 57px; padding-right: 31px; }
A razão porque usamos padding-right
ao invés de margin-right
é porque as
margens podem frequentemente disparar erros grosseiros no IE se utilizado em certos lugares.
E o cabeçalho está pronto.