:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: http://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 9 - Juntando tudo

A mais simples das páginas Web usará uma mistura de ids e classes e possivelmente uma combinação de posicionamento absoluto e relativo. Vamos dar uma olhada na nossa página composta de cinco boxes que estudamos na etapa número 8, e talvez, você queira dividir a seção central em colunas. Para isto usaremos a declaração float:left tornando as coisas mais simples.

Uma coluna à esquerda, de largura reduzida, normalmente, é usada em uma página Web para menu de navegação.


  .leftcol {}

A coluna do meio é para o conteúdo principal .

 
  .midcol {}

E, à direita uma outra coluna também de largura reduzida, usada para links relacionados ou de anunciantes e parceiros.


  .rightcol {}

Todas as três colunas terão sua largura definida em percentagens de modo a que possam se ajustar de maneira fluida à largura da página.

Observe que eu usei classes para nomear as colunas de modo a que poderei reusá-las mais adiante.

Este exemplo mostra a seção central única .midsection transformada em três colunas flutuando à esquerda.

  <div class="leftcol">...</div>
  <div class="midcol">...</div>
  <div classs="rightcol">...</div>

Esta técnica amplia e torna mais interessante a construção do layout.

Não deixe qualquer uma das divs sem conteúdo, ainda que elas tenham que ser preenchidas com espaços vazios. Coloque espaços &nbsp; dentro delas.


  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Criado em: 2005-04-12

topo