Oficina Blueprint: layout com cabeçalho e pé fluidos

Um exemplo de desenho utilizando o framework CSS Blueprint no qual realizamos o cabeçalho e pé de página fluidos, que se ajustam à largura disponível.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 19/5/11
Valorize este artigo:
Uma ocasião nos perguntaram como fazer para que o cabeçalho ou pé de página se expanda de modo a ocupar toda a largura da tela, como a que temos no desenho atual de CriarWeb.com, trabalhando com o framework CSS Blueprint. Neste artigo, vamos realizar uma prática de desenho de um layout com essas características.

Para isso, tal como nos pedem, vamos utilizar o Framework CSS Blueprint, que oferece uma série de classes muito úteis para maquetar com CSS utilizando uma grade de 24 colunas, que nos ajuda a posicionar os elementos na página. Para aquele que se interesse, temos à disposição dos leitores um completo Manual de Blueprint CSS, que deveríamos ler se não estamos familiarizados com este interessante e útil framework para a maquetação web.

Antes de colocarmos mãos à obra, deixamos um link para ver o objetivo que pretendemos realizar neste exercício.

Layout fluido em Blueprint

Queremos começar explicando o que é um layout fluido. Não é mais que um que adapta sua largura àquela que tenha a janela do navegador em cada momento. Geralmente com Blueprint desenhamos layouts com uma largura predeterminada de 950 píxels, e por isso todos os conteúdos se adaptam a esse espaço disponível. Nas páginas fluidas isto não ocorre . Ao contrário, a largura de página será variável e corresponderá àquela que o usuário tenha em sua janela do navegador.

Existem complementos para o framework Blueprint para permitir fazer páginas fluidas, como o plugin que podemos encontrar em Blueprint Liquid. Bem, agora, nós neste caso não queremos fazer exatamente uma página fluida, mas só uma das partes da página, como o cabeçalho ou o pé. E além do mais, nem sequer queremos fazer essa parte da página realmente fluída: simplesmente desejamos que o fundo dela se adapte a toda a largura disponível na janela, porém os conteúdos colocados na largura disponível em Blueprint.

Por isso, vamos utilizar apenas uma simples técnica que nos sirva para fazer com que o fundo do cabeçalho ou o pé se adapte à janela do navegador.

Vários "containers", para cada um dos elementos

Como devemos saber, se seguimos o Manual de Blueprint, neste framework colocamos um container principal e em seguida dentro dele, colocamos todas as camadas que queremos situar na grade, com diversas classes para definir suas dimensões e colocação. A técnica que agora vamos contar trata simplesmente de criar varios containers em lugar de um só.

Nota: Nada impede que criemos em um layout desenvolvido com Blueprint tantos containers quantos queiramos em uma página web. Para isso, simplesmente colocaremos a class "container" a todas as divisões que queiramos que se comportem como container.

Uma camada que funciona como container em Blueprint (à que colocamos a classe CSS "container") tem definida uma largura, que são os 950 píxels disponíveis nos layouts predeterminados de Blueprint. Se para definir um elemento com toda a largura disponível o colocamos dentro de um container, não poderá ter mais que 950 píxels de largura. Portanto, temos que fazer com que esse container esteja incluído dentro de outra camada. Essa camada poderá ser fluida (para isso simplesmente não lhe vamos indicar nenhuma largura) e poderemos atribuir uma cor de fundo como queiramos, que se adaptará às dimensões da janela. Em seguida, colocaremos dentro um container para que os elementos que maquetemos dentro possam utilizar as classes de Blueprint.

O esquema em camadas seria mais ou menos como este:

<div id="cabeçalho">
   <div class="container">
      <div class="span-10 append-3">
         Logotipo!!
      </div>
      <div class="span-11 last">
         Buscador...................................
      </div>
   </div>
</div>

Como vemos, temos um DIV com id="cabeçalho" e dentro um container. A seguir no código vemos, dentro do container, que podem ser colocadas todas as classes de Blueprint que necessitemos para definir e posicionar os elementos que iriam dentro.

Agora, essa camada com id="cabeçalho" está fora de um container (contém um container, mas não está afetada pela largura da class container), razão pela qual se adaptará às dimensões da janela do navegador. Para que se perceba isto, poderemos atribuir ao cabeçalho uma cor de fundo, ou qualquer outro estilo CSS que desejemos.

#cabeçalho{
   background-color: #333;
   color: #fff;
}

Para continuar, depois do cabeçalho, colocaremos o corpo da página. O corpo se desejarmos que se acople tudo aos 950 píxeles, e que não tenha o mesmo fundo do cabeçalho. Para isso que teremos que fechar o container do cabeçalho e a camada à que havíamos colocado id="cabeçalho". Por isso, nos veremos obrigados a colocar o corpo em um novo container.

<div class="container">
   <div class="span-5">
      Coluna de conteudos 1
   </div>
   <div class="span-12">
      Corpo principal
   </div>
   <div class="span-7 last">
      Lateral
   </div>
</div>

Ao final de tudo, se desejamos fazer um pé também com um fundo fluido, teremos que colocá-lo em outro container independente do corpo e fazer como fizemos no cabeçalho, onde fizemos uma camada mais geral que o próprio container para aplicar-lhe um fundo que seja fluido.

<div id="pé">
   <div class="container">
      <div class="span-21">
         Links do pé..
      </div>
      <div class="span-3 last">
         logo pequeno
      </div>
   </div>
</div>

Nos estilos CSS da camada com id="pé", colocaremos o fundo para nosso pé, que se adaptará a toda a largura disponível.

#pé{
   background-color: #300;
   color: #fff;
}

Todo o código completo para fazer cabeçalho e pé fluidos em Blueprint

Podemos ver a seguir todo o código HTML e CSS necessário para criar este esquema de página com cabeçalho e pé fluidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Exemplo de Blueprint com Cabeçalho e pé fluidos</title>
   <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
   <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">   
   <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
   <style type="text/css">
      #cabeçalho{
         background-color: #333;
         color: #fff;
      }
      #pé{
         background-color: #300;
         color: #fff;
      }
   </style>
</head>
<body>
   <div id="cabeçalho">
      <div class="container">
         <div class="span-10 append-3">
            Logotipo!!
         </div>
         <div class="span-11 last">
            Buscador...................................
         </div>
      </div>
   </div>
   <div class="container">
      <div class="span-5">
         Coluna de conteudos 1
      </div>
      <div class="span-12">
         Corpo principal
      </div>
      <div class="span-7 last">
         Lateral
      </div>
   </div>
   <div id="pé">
      <div class="container">
         <div class="span-21">
            Links do pé..
         </div>
         <div class="span-3 last">
            logo pequeno
         </div>
      </div>
   </div>
</body>
</html>

Se quisermos, podemos ver este exemplo em funcionamento em uma página à parte.

Além disso, preparamos uma página adicional, baseada neste mesmo layout, mas na que incluímos algo de estilos CSS para as caixas, algo mais de texto e um pouco de cor. Podemos ver o exemplo em funcionamento com texto e cor.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato