Tutorial HTML Templates Sites Prontos GPsites.net - 3 Colunas Sem Tabelas
É possível construir páginas multi colunas sem usar tabelas. Páginas neste formato são máis fáceis para os motores de busca navegarem no seu site.As páginas tornaram-se nesta maneira serão mais fáceis para que os motores de busca navigate. É entretanto, mais duro construir páginas usando estes métodos que aparecerão o mesmos em todos os tipos do browser.
Um dos problemas que você encontrará está começando todas as colunas indicar no mesmo comprimento. É possível fazê-lo, mas o código é avançado para a maioria dos usários neste estágio da aprendizagem.
Você pode usar ajustes absolutos da altura (exemplo: altura: 500px), mas você necessitará controlar a quantidade de índice que você coloca em cada coluna e esteja certo testar as páginas em browsers diferentes e em várias resoluções de monitor.
Esta página de 2 colunas demonstra o uso de ajustes absolutos para a altura da coluna.
Está aqui a coluna 3 ajustada acima de usar o código mostrado abaixo. (direito estale sobre a página para começar a fonte) 3 colunas
Você deve ser cuidadoso para testar as páginas desenvolvidas nesta maneira testando em vários browsers (navegadores) e em diferentes resoluções do monitor.
O código CSS para ajustar a página de 3 colunas é mostrado aqui. 3 divisões são definidas usando as Folhas de estilo em cascata.
div.left{ width :20%;float : left;}
div.middle{ width :59.9%;float : left }
div.right{ width :20%;float :left }
Você deve dar uma atenção cuidadosa às larguras das divisões. Se você adicionar o espaçamento ou as bordas às divisões horizontalmente você deve diminuir a largura das divisões.
Nota: A resolução do monitor afetará a maneira que sua página será exibida. Teste em resoluções diferentes.
Este é o código do HTML para a página. Anote o método de adicionar as definições da classe. (Folhas de estilo em cascata mostradas acima)
<div class="left">
<h1>Division Left</h1>
<p>Text</p>
</div>
<div class="middle">
<h1>Division Middle</h1>
<p>Text</p>
</div>
<div class="right">
<h1>Division Right</h1>
<p>Text</p>
</div>
<br clear="all"> |
