Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Layout de 3 Colunas
Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Layout de 3 Colunas -->
 
Avaliação: | Publicado em: 14/09/2006
Layout de 3 Colunas
Maurivan Luiz Padilha é amante assíduo dos padrões web, publicidade, propaganda, e marketing. Mantém um blog pessoal (www.maurivan.com) que trata de desenvolvimento web, marketing, tecnologia e também design de interface, e também é da equipe de coordenação de um projeto voltado a publicidade e propaganda iZIP - Mídia Colorida (www.izip.com.br). Teve passagem também por duas agências de internet. Numero Uno (www.numerouno.com.br) e BLZ (www.blz.com.br), atualmente vive (e curte muito) a vida como freelancer.
Layout de 3 Colunas

Bom dia colegas blogueiros de cada dia!.
Resolvi me tomar na liberdade e postar aqui um artigo que redigi para o portal Plugmasters.

Bom pessoal.
Este é o primeiro artigo que escrevo para a Plugmasters, e vou explicar para vocês como proceder para criar um layout de 3 colunas em tableless/css.

Muitos me perguntam se isto de fato é complicado, mas a resposta de fato, é outra, tudo é simples quando se tem vontade de aprender.

Bom, mas chega de “blábláblá” e vamos a que interessa.

Para se desenvolver um layout simples de 3 colunas sem ser layout fluido, é simples, será utilizado basicamente float, margin e width.

Para começar irei citar como que de estar setado a estrutura do HTML:



Para simplificar, irei adicionar os “codes” abaixo, e irei comentando sobre o que cada um representa.

Código CSS:

- Com a propriedade width nós adicionaremos o tamanho que será delimitado o nosso layout.

#geral {
width:780px;
}

Também com a propriedade width, iremos setar um tamanho fixo para as colunas da direita, e da esquerda.

#cdireita, #cesquerda {
width:165px;
}

Agora iremos definir as propriedades float, nas colunas.

Com o float left, a div irá fluir para o lado esquerdo do layout.
#cesquerda {
float:left;
}

Já com o float right, a div irá fluir para o lado direito do layout.
#cesquerda {
float:right;
}

E iremos setar também a da DIV central (a div que será inserido os textos), e também iremos definir uma pequena margin no canto esquerdo, para que o a div #centro, não seja inserida “em cima” da div #cesquerda.
#centro {
width:380px;
margin-left:170px;
}

Vale ressaltar de que este exemplo acima citado, trata-se de uma estrutura básica de um layout de 3 colunas (não esperem que gere um layout “ultrapower” sozinho).

Segue abaixo o resumo de como ficaria o nosso style.css.

Bom, por hoje é só pessoal!..

Qualquer dúvida que vocês tenha, pode ser enviado para maurivan@maurivan.com, terei enorme prazer em colaborar =}

Abraços, até a proxima!.

Artigos relacionados
Este artigo é a parte 1 de 2 da seguinte série:
  1. Layout de 3 Colunas
  2. Porque usar CSS?

Robson Perez <robsonp21@bol.com.br>
Interessante este artigo, posso dar um pitaco? Maurivan em seu próximo Artigo, experimente pegar e fazer um modelo de 3 colunas com layout fluido, seria interessante, mas enfim, muitoooo bom o artigo, parabéns.
Camila Capone <camilacapone1@hotmail.com>
Nao existe pessoa mais apaixonada pelo que faz do que ele. É de uma dedicação de dar inveja a qualquer um. Sou fã das idéias e ideais desse moço. Parabens pelo artigo! =
Muito ruim, existem varias materias sobre isso nos portais de web e essa materia nem aborda tudo que tem que abordar.. muito ruim.
Raphael Borsato Novelini Vulgo "Maurivans Fan <rbnovelini@gmail.com>
Tudo de bom esse artigo,
gostei muito!

Maurivan The DEsigner Man.

meu idolo ;
Maurivan Luiz <maurivan@maurivan.com>
Marcos, por isto eu tentei deixar claro, com este pequeno artigo, você não conseguirá montar "layouts ultrapower", é só para ter "noção" de como tratar Tableless/CSS, é algo bem básico para quem está começando, e se quiser algo que aborde tudo, compre um livro, não leia artigos.
Andre Zacarias <dede_zbm@hotmail.com>
Muito boa a explicação e estou interessado no que o robson disse de fazer um modelo de 3 colunas com layout fluido quero ver como q é to esperando a próxima matéria flw....
Henrique Serrat <ge3535@ge3535.com>
Bom de mais. É dificil encontrar artigos ensinando coisas basicas na net...
Discordo do Marcos, nunca achei algo simples e objetivo, para quem ta iniciando da pra entender cada codigo cada linhazinha oq faz...
Muito bom Maurivan!
Jonas Silva <weberpg@gmail.com>
Legal, mas da próxima vez diga de onde vei o artigo... tableless
Sinceramente não gostei.








Um produto Detetive.net