:: 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 dentro delas.
Navegação pelo tutorial
- Introdução - página básica
- Folha de estilos
- Estilizando texto
- Mais texto
- As listas
- Os links
- Boxes CSS
- DIV's
- Juntando tudo
- DOCTYPE
- Estilos externos
- Estilizando tabelas
- Estilizando formulários
- Browsers
- O futuro
Deixe seu comentário sobre esta matéria:
Última modificação: 2008/03/4 21:57:43 GMT
Criado em: 2005-04-12
