Raciocinando com DIVs

Publicado em: 23/011/2005
Atualizado em: 23/03/2011

Autor: Veerle Pieters
URL do original: https://veerle.duoh.com/index.php?id=D20051122
Título original: Div thinking cap
Traduzido com autorização da autora

Tempo de divertir-se com estilização CSS! Quando você projeta com CSS precisa ter a habilidade de analisar o layout e decidir como colocar suas DIVs. Tal decisão difere da maneira como você raciocina quando trabalha com layouts baseado em tabelas. Agora você precisa valer-se de uma visão mais geral e pensar mais detidamente em termos de blocos de conteúdos. Pare de pensar em como fatiar seu layout e comece a pensar em como colocar cada peça gráfica dentro de um container... Quantos containers são realmente necessários, sem exagerar no seu uso?

No meu escritório , Duoh! nós recentemente terminamos de desenvolver este site e acredito que ele pode ser um exemplo perfeito para o que eu quero transmitir para vocês neste artigo. A seguir uma imagem mostrando os containers que servirão para o template básico do layout.

Que background será usado para body?

A primeira coisa a decidir é escolher que background será usado para o elemento body. Escolherei a borda lateral azul ou devo optar pelas linhas verticais que formam as sombras em cada lado do layout? A resposta é: as linhas de sombras. Por que? Porque você sempre deve procurar a solução mais simples. Colocamos a borda azul em um container com uma largura igual a 100% e uma altura de 191 pixels que é a exata altura do topo e usamos as linhas de sombra como background para body. Eu estou ciente de que existem outras soluções para obter-se o mesmo resultado, mas torne as coisas o mais simples possível bem como use o mínimo possível de DIVs aninhadas.
Aqui o resultado.

Nossa folha é esta:

body {
  background: #fff url(../images/bg-body.gif) top no-repeat;
  margin: 0;
  padding: 0;
}

#headerwrapper {
  background: #ecf3f9;
  width: 100%;
  height: 191px;
  position: relative;	
}

Construa o topo

Nosso próximo passo é a construção do topo. Uma vez que as linhas verticais que constituem a sombra ficou escondida (por baixo da borda azul) na sua porção atrás do topo, nós agora teremos que incluí-las - as linhas de sombra - no background do topo e não no logo. O logo será colocado sobre o topo. Por que? perguntaria você outra vez. Uma vez que o logo será tratado separadamente nós poderemos acresentar um efeito rollover nele e ainda torná-lo um link para a homepage do site. Uma outra razão e mais importante ainda, é que sendo o logo o título principal do site nós adicionamos um elemento h1 para container exclusivo do logo. Usar um elemento h1 textual (no lugar de colocar ali uma imagem) é importante para a acessibilidade bem como para SEO - otimização para mecanismos de busca.

A seguir o código de marcação estrutural:

<div id="headerwrapper">
  <div id="header">
    <div id="logo">
      <h1>Slimbouwen - Bent u klaar om te bouwen?</h1>
    </div> 
  </div>
</div>

E as regras CSS>:

#header {
  width: 772px;
  height: 191px;
  background: url(../images/bg-header.jpg) no-repeat right top transparent;
  display: block;
  margin: 0 auto;
}

#logo h1 {
  width: 228px;
  height: 174px;
  display: block;
  margin: 0 0 0 11px;
  padding: 0;
  text-indent: -99999px;
  background: url(../images/logo.gif) no-repeat right top transparent;
}

Colocando um link com efeito rollover no logo

Nós queremos ainda um link no logo e também gostamos de um efeito adicional. Podemos fazer isso com background-position! Você deve ter notado que a imagem para nosso logo é composta por ambas as imagens, para o estado normal e para o estado over. Isto é necessário para a técnica que iremos usar. A imagem para o efeito rollover não precisa ser previamente carregada e não há retardo para o efeito.

A seguir o código CSS para este efeito

#logo h1 a {
  width: 228px;
  height: 174px;
  display: block;
  text-decoration: none;
}

#logo h1 a:hover {
  background: url(../images/logo.gif) no-repeat right bottom transparent;
}

Usando display: block e definindo as dimensões da imagem, você garante que toda a área do logo será clicável. Para conseguir o efeito rollover, acresentamos um seletor hover e alteramos a posição do background para a direita e embaixo.

Adicionando conteúdo

Você notará que eu ignorei totalmente o texto descritivo do logo. Este texto é conteúdo e deve ser colocado em um parágrafo no código fonte e logo abaixo do elemento h1. Aqui também, preciso tornar este texto invisível.

Usaremos CSS1 para isto, como mostrado a seguir:

#content {
  width: 772px;
  margin: 0 auto;
}
 p.hidden {
  position:absolute;
  top:-300px;
  left:0;
 }

Primeiro eu defino uma ID para a área de conteúdo e depois uma largura (tal como fizemos com o topo) a seguir centralizo . Dentro desta DIV de conteúdo será colocado todo nosso texto do conteúdo. Nosso próximo passo é estilizar o parágrafo e definir uma classe (hidden) para ele, já que ele é um parágrafo com características 'excepcionais'. Nós agora excluiremos este parágrafo do fluxo 'normal' de parágrafos. Definindo posicionamento absoluto com coordenadas apropriadas para top e left nós garantiremos a colocação do parágrafo para fora da área da janela do navegador. Isto e mais o uso de uma indentação negativa para o texto (assim como foi usado para o topo) são de acordo com os meus conhecimentos os truques CSS para esconder texto e são melhores do que o uso de display:none ou visibility:hidden segundo eu penso.

Implementando a aba especial de link

Por fim a aba especial de link . Este botão ocupa uma posição específica e usaremos coordenadas top e left para colocá-lo no lugar exato. Mas, nós não poderemos usar posicionamento absoluto pois queremos que o botão permaneça no mesmo lugar mesmo quando a janela do navegador for redimensionada. Esta é a razão para usarmos posicionamento relativo. Assim fazendo as coordenadas top e left estarão sempre referenciadas ao seu container. No nosso exemplo este container é a div content uma vez que o botão encontra-se dentro dela.

A seguir o código de marcação estrutural:

<div id="content">
  <p class="hidden">Hoe krijgt u het meeste huis voor uw geld?... </p>
    <div id="testnav">
      <ul>
         <li><a href="quiz1.html">Doe de test</a></li>
      </ul>
    </div>
</div>

E agora o código CSS que eu acrescentei:

#testnav ul {
  width: 173px;
  height: 35px;
  position: relative;
  top: -25px;
  left: 289px;
}

#testnav ul li a {
  background: url(../images/bttn-doe-de-test.gif) no-repeat top left;
  width: 173px;
  height: 35px;
  display: block;
  text-indent: -9999px;
  text-decoration: none;
}

#testnav ul li a:hover {
  background: url(../images/bttn-doe-de-test.gif) no-repeat bottom left;
}

Novamente eu estou usando posicionamento absoluto para criar o efeito rollover.
Aqui o resultado final.

Após ter feito uma revisão geral no I.E. 6 constatamos que precisaremos acresentar o seguinte:

* html #testnav ul {
  top: -35px;
}

O hack estrela html serve esta regra para o I.E.. Você poderá certamente, usar Comentários condicionais (NT: Link diferente do original, remete a um artigo em português) para servir este hack. Isto depende do que vai acontecer quando o I.E. 7 for lançado.