Banner propaganda da DevMedia - Cursos de desenvolvimento web

:: 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

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

Criado em: 2005-04-12

topo