Banner propaganda da DevMedia - Cursos de desenvolvimento web

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.

SlimBouwen website, analise das divs

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo