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.

Voltar   Avançar