Trabalhando com a tag DIV
A tag div foi desenvolvida especialmente para substituir as tabelas como ferramenta de layout. Ela é um elemento de bloco (block level), uma DIVisão que pode armazenar qualquer coisa que você precise dentro dela. Você pode colocar blocos de texto, imagens, outras divs, tabelas e formulários dentro delas depois organizar no layout. Você tem enorme liberdade de posicionamento, podendo especificar um posicionamento absoluto ou relativo (método position), ou ainda especificar um fluxo aos elementos adjacentes (método float).
A tag div possui poucos atributos em si mesma (align=”left | right | center”), sendo que toda a sua formatação se dá através de folhas de estilo. Para criar uma barra de navegação simples, por exemplo, podemos utilizar um código como este:
div#navigation {width: 200px; background: gray; padding: 10px; }
<div id=”navigation”>…navigation links…</div>
Block Level
A tag <div>, assim como as tags <table>, <p>, <blockquote>, <ul>, <li> são definidas como elementos de nível bloco (block level) e criam uma caixa em volta de si (Box model). Cada elemento “block level” é exibido em uma linha separada, forçando que os elementos definidos na seqüência apareçam na próxima linha.
Por padrão, a caixa que delimita um elemento “block level” ocupa a largura máxima dentro do seu container. Ou seja, uma tag <div> definida dentro do <body> ocupará toda a largura do corpo do documento.
ID Selectors
Para atribuir as propriedades de posicionamento aos containers, geralmente tags <div>, utilizamos ID Selectors.
Primeiro atribuímos um atributo ID ao elemento, exemplo:
<div id=”conteudo”>Conteúdo… </div>
E no CSS, utilizamos um ID Selector para definir os estilos de formatação e posicionamento do container. A identificação de um ID Selector sempre começa com “#”.
#conteudo{
propriedade: valor;
}
Layout com CSS
Existem basicamente duas técnicas de construção de layouts utilizando CSS, que podem ser utilizadas em conjunto para criação de layouts mais complexos:
- Utilizando tags div com posicionamento absoluto (position: absolute).
- Utilizando tags div com a propriedade float (float: left | float: right | clear).
Outra técnica complementar, é a utilização de listas <li> como barras de navegação, formatadas através das propriedades display e float.
LEIA MAIS:
Tableless
http://www.tableless.com.br
Seybold Seminars – San Francisco 2003
Why tables for layout is stupid?
http://www.hotdesign.com/seybold/
