Header no blogger personalizado com flutuação e posição relativa e absoluta

Existem várias maneiras de se fazer a mesma coisa. Criamos um Header simples no Blogger no Artigo anterior e agora veremos mais uma opção, mas que pode ser totalmente personalizável.
Você pode faze-lo com 1, 2 ou três colunas. Para este tutorial criei com duas colunas.
Iremos usar algumas dicas que já foram dadas aqui no blog como Substituição de imagens, Propriedade Clear e Posição Absoluta e Relativa.

Como já disse também, faça este tutorial off-line no seu bloco de notas, depois quando estiver tudo certo e funcionando corretamente, copie o código para dentro do seu Blog.

Precisaremos de 2 imagens distintas:

• Fundo para o Header
• Imagem do LogoTipo

Imagem fundo do Header: Imagem Logotipo: O resultado final ficará assim:

O LogoTipo do lado esquerdo e um menu do lado Direito.
Vamos começar então:

A primeira coisa que vamos fazer é escrever nosso código XHTML:

<div id="header">
<h1 id="logo">
<span></span>CSS Padrões - CSS Desvendado
</h1>

<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Quem Sou</a></li>
<li><a href="#">Contato</a></li>
</ul>

<div class="clear"></div>

Explicando o código:
A div header é nosso container que abrigará o Logotipo e o Menu.
H1 id logo conterá os código de substituição de imagem.
Span server para fazermos a imagem ficar por cima do texto CSS Padrões - CSS Desvendado.

Div id NavMenu dispensa explicações.

A div class clear serve para limparmos as flutuações, caso haja dúvida de suas funções leia o artigo referenciado logo acima no artigo.

Tendo seu código XHTML bem estruturado semanticamente seu Header está pronto. Veja que no lugar do Menu poderiamos colocar um formulário, um Adsense ou outro elemento qualquer.

Feito isso vamos para o código CSS (Folha de Estilos):

#header {
width: 650px;
height: 100px;
margin:0;
padding:0;
background: url(fundo_h.gif) repeat-x left bottom;
}

Definimos o altura e largura do Header, limpamos margens e espaçamentos e no final colocamos a imagem de fundo se repetindo na vertical para preencher todo o Header.

#logo {
 float: left;
 margin: 0 auto;
}

#navmenu {
width: 100px;
float: right;
}

#navmenu a {
color: #fff;
}

.clear {
clear: both;
}

Aqui fizemos o Logo flutuar a esquerda, o Menu flutuar a direita e demos um tamanho de largura para ele, demos uma cor branca para os links e finalmente limpamos as flutuações com a classe clear. Mais uma vez insisto, caso não saiba para que serve a propriedade clear, que leia o artigo.

#logo {
width: 345px;
height: 100px;
position: relative;
}

#logo span {
background: url(logo.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%
}

Finalmente fazemos aqui a substituição do texto do Logo pela imagem.
Definimos a largura e altura do Logo e definimos sua posição relativa para podermos usar a posição Absoluta.
No span colocamos a imagem do Logo, definimos que sua posição de ser Absoluta e definimos que ocupará 100% da largura e altura do logo, ou seja 345px por 100px.

Teste e reteste off-line o seu código. Se estiver tudo do seu agrado vá em Blog apague os código CSS e XHTML referente ao Header e substitua pelo seu.

Até a próxima

Subscreva o CSS-Desvendado completo! Subscreva CSS - Desvendado por Email