:: CSS desde o início ::
Autor: Joe Gillespie
URL do original: https://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
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
Criado em: 2005-04-12