Na verdade a gravação foi feita em 7 minutos e 51 segundos.
Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.
Se quiser ver o exemplo com o código fonte, clique aqui.
.
Link direto para o vídeo Layout fixo/fluido de 3 colunas em 8 minutos.
Novamente o vídeo está sem áudio por motivos de falta de tempo. 
Sem áudio não preciso fica me preocupando com a explicação, só digito, gravo e pronto.
[update] Muitas perguntaram porque não pode-se usar na prática, os id’s que eu utilizei no vídeo. Já escrevi sobre isso aqui: Sobre nome e sobrenomes.
Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.
31 Comentários
31 Comentários
Rafael Dourado 10/06/2008 às 11:11
Os ids esquerda, direita e meio foram só para fins didáticos, não foi?
PotHix 10/06/2008 às 13:43
Æ!!
Muito legal o vídeo!
Muito didático e ajuda a entender mais e mais sobre padrões web e layouts com CSS!
Parabens! Conteúdo cada vez melhor!
Há braços
Diego Eis 10/06/2008 às 14:37
Foram sim Rafael Dourado!
Só para entender melhor. Na prática, isso não pode ser feito.
Mateus Manosso Barszcz 10/06/2008 às 16:26
E porque isso não pode ser feito na pratica, Diego?
O que há de errado?
Fernando 10/06/2008 às 18:31
Não pode, por que?
André 11/06/2008 às 09:44
Eu estava justamente precisando de algo como isso, esta com dificuldade de fazer isso das outras formas que conheço…
Agora meu sistema que tem opções das duas formas de layout vai poder se livrar das tabelas!
VLWS!!!
Julio 11/06/2008 às 12:08
Gostaria de saber que ferramentas são essas que você usa para texto tipo Loren Ipsum.
Eduardo Ottaviani 11/06/2008 às 14:26
Nossa Diego, sensacional. Muito inteligente esse método. Quando eu penso que não vou mais aprender nada aqui…me engano completamente.
Parabéns.
Fernando, o Diego já falou sobre isso:
http://www.tableless.com.br/sobre-nomes-e-sobrenomes#comment-50893
Edgard 11/06/2008 às 15:05
Fernando, não é que não pode …
o HTML serve para colocar o conteúdo independente do visual, todo o layout (de preferência) deve ficar no CSS. Por isso os ids devem fazer sentido para o conteúdo, e não fazer referência questões visuais.
Ids que fazem sentido por exemplo seriam “navegação”, “blogroll”, “notícias”, etc. Mesmo porque, nada impede que com CSS você mude um seção de um lado para o outro. Manter em mente que HTML serve para o conteúdo, CSS para o visual, e JS para a parte comportamental do site, ajuda muito na hora de desenvolver.
Otavio Henrique 11/06/2008 às 15:19
mas, como assim nao pode usar esses ids na prática ?
Fernando 11/06/2008 às 16:26
Obrigado Edgard, já possuo essa visão de desenvolvimento, só discordo em não poder usar tais IDs, na minha opinião os IDs não devem ser removidos, porém a parte CSS que não faz parte de posicionamentos, por exemplo background, deve ser aplicada a uma classe, até porque os 2 menus usam as mesmas propriedades de estilização, mudando apenas o seu posicionamento.
Sendo assim o estilo deles iria para uma classe “.menu”, os IDS “esquerda” e “direita” continuariam, apenas com floats, e os divs conteriam ids e classes.
Por que disso? Se, por exemplo, você resolve usar um Ajax para modificar o lado direito, um id chamado “direita” faz bastante sentido não acha?
Bom, talvez eu esteja enganado, mas estamos aqui para aprender…
Abraços.
Jcneto 11/06/2008 às 16:41
Concordo com o Edgar em partes, acho que a ideia de se usar IDs “lógicos” para os divs faz sentido, por exemplo, se um dia o div do menu que estava a direita e se chamava “direita” “resolve” mudar de lugar, vai ficar meio ilógico um div chamado direita no meio da página certo?
Mas se você fizer o CSS pensando naquele momento (quando o div “direita” está na direita) ele também faz sentido… é tudo uma questão de estruturação….
Flávio 12/06/2008 às 09:00
Bom dia Diego;
Em primeiro, parabéns pelo tutorial que ficou muito bacana e simples de entender.
Pelo vídeo, pareceu que vc trabalha com MAC e se realmente for isso, gostaria de saber qual IDE vc usa, se ao desenvolver nos padrões web há alguma diferença na visualização entre safari, ie7 e firefox?
A plataforma OS X é muito melhor para desenvolvimento web?
Valeu e tenha um bom dia.
Acelio Filho 12/06/2008 às 14:51
Não entendi o motivo deste exemplo (e o outro do “form em 8min.” também).
Não entendi mesmo…
Só notei uma coisa que errada nesta(s) página(s) de exemplo(s).
Colocando divs dentro de uma div (geral), o conteúdo delas só é mostrado depois de ler a tag de fechamento da div geral.
Desta forma as divs estão funcionando como uma tabela. Fica aquela tela branca e, de repente, “puf”, aparece tudo.
Não há a necessidade de usar uma div GERAL, pra centralizar o site no meio da tela. Isto está virando vício, caras.
Nos exemplos, sem imagens e com lorem ypslun’s, funciona bem, mas coloque vários includes acessando banco de dados no conteúdo central, uma imagem no cabecalho e várias imagens na lateral esquerda. Vais ver aquela tela branca, o motivo principal da criação do tableless. Acelerar o carregamento.
Depois volto aqui pra ler as “broncas” e “lições” dos mestres(ao menos eu os considero como).
Edgard 12/06/2008 às 23:37
Bom, lá vão as minhas opiniões, hehe.
Fernando, já que você possui uma visão de desenvolvimento, imagine a sempre o HTML separado do CSS e separado do JS. Pois desse jeito você consegue reaproveitá-los muito melhor.
Vendo assim já não faz sentido ids direita/esquerda no HTML, pois só com o HTML fica uma coisa embaixo da outra. Se você precisar fazer o “parsing” de alguma informação de qualquer site, aposto que você nem vai ligar pro CSS, e consequentemente não vai ligar pra um id direta/esquerda porque ele não agrega nenhuma informação útil. Mas pense bem, se o id fosse “menu” ou “navegação”, você não precisaria verificar a página inteira pra saber do que se trata cada coisa. É claro, para isso você precisa ser consistente, nos meus projetos sempre uso os mesmos id e classes, e por consequência consigo reaproveitar muitos dos css (que são totalmente diferentes visualmente) com pouquissimas alterações (mesmo pq não sou eu que os faço, pois sou craque em estragar layouts).
Um ponto que você deixou meio implicito é que o javascript só tem document.getElementById e não tem document.getElementsByClassName, mas nada impede você de implementar essa função, ou melhor ainda, usar uma biblioteca (jQuery por exemplo) que tem essa facilidade.
E Aecio concordo plenamente com você sobre o div “wrapper”, na verdade eu não gosto de layouts com muitos divs, alguns layouts tem tantos divs que é pior do que a versão com tabelas em muitos aspectos (gosto de chamar esses sites de divful), mas depois de muita discussões com os designers com quem trabalhei eles conseguiram me convencer que esse “wrapper” é inevitável, se você quiser manter a compatibilidade com o IE6 sem usar hacks.
E acho que essa discussão é válida, pois sempre tive interesse nisso e sempre é bom ouvir opiniões sobre o assunto.
Marcos Nogueira 13/06/2008 às 12:04
Acelio, eu intendo o que você diz, até concordo em partes. mais eu ainda uso uma div geral porque realmente é inevitavel.
Outro exemplo da “precisao” de se usar tal div é a seguinte.
Se você quiser usar um position:absolute; em alguma div por exemplo, e quiser colocar ela a 10px do topo e a 30px da direita em relação a pagina? Existe várias maneiras, mas pra mim a mais viavel foi posicionar ela de acordo com a div “geral”.
Não to dizendo que essa é o único motivo de eu usar essa div, mais é um dos motivos e que realmente ajuda muito.
Ricardo Martins 15/06/2008 às 12:52
Era exatamente o que eu estava procurando.
Sempre quis saber como fazer isso, principalmente no que diz respeito a empurrar o layer de rodapé.
Parabens. Vou usar no meu e-commerce.
Sandro Oliveira 16/06/2008 às 09:17
Bom dia! Muito bom a matéria sobre CSS, ajuda muito quejm está começando a trabalhar de uma forma que seja simples e correta.
Pois bem, gostaria de saber qual software você você no vídeo, pois eu não consegui ver qual é.
Thiago 16/06/2008 às 14:46
Muito legal o vídeo, acompanho o site a anos e sempre me acrescenta coisas novas!
Eu também, assim como alguns aí acima, gostaria de saber qual o programa que você usa, e se MAX é muito melhor ou dá na mesma pra desenvolvimento web.
Valeu Diego!
Thiago 16/06/2008 às 14:47
Muito legal o vídeo, acompanho o site a anos e sempre me acrescenta coisas novas!
Eu também, assim como alguns aí acima, gostaria de saber qual o programa que você usa, e se MAC* é muito melhor ou dá na mesma pra desenvolvimento web.
Valeu Diego!
Kin 17/06/2008 às 11:32
Detalhe foram removidas todas tags html hehehe então resumindo você colocou input dentro de label e não é a forma coreta de se fazer a semântica…. eles deve estar fora
p label texto label input p
Ricardo Martins 17/06/2008 às 14:28
Eu utilizei o conceito aqui apresentado no meu e-commerce que possui a mesma estrutura, e ocorreu um problema (que tambem acontece no seu):
quando o conteudo da lateral é maior que o do meio, o rodape nao fica onde deveria (em baixo como deveria ser).
Como podemos resolver o problema??
Strong_Wind 17/06/2008 às 14:32
eae!! deixa eu perguntar.. o firefox download day eh hj..
vcs naum vao anunciar num topico naum?
a brazil tah em terceiro lah no site.. quase chegando na polonia.. e a italia vem quente atras e ameaça passar o Brazil…
deêm uma força aí!!
Ari 23/06/2008 às 23:15
Olá,
Parabéns pelo conteúdo!
Como fazer para deixar as s da esquerda e direita preenchida com a cor purple até o final, ou seja, do mesmo tamanho da ?
Obrigado,
Ari
Ari 23/06/2008 às 23:16
Olá,
Parabéns pelo conteúdo!
Como fazer para deixar as divs da esquerda e direita preenchidas com a cor purple até o final, ou seja, do mesmo tamanho da div conteúdo?
Obrigado,
Ari
Luciano M. 25/06/2008 às 21:19
Muito bom a video-aula, porém sempre fico confuso quando me questiono qual a melhor maneira de desenvolver o layout… seria layout fluido, fixo ou… ?
Paulo Henrique 05/07/2008 às 22:09
so uma pergunta, alguma coisa supersticiosa com o numero 8 ??
Henrique 09/07/2008 às 12:34
Sou um “dinossauro” do HTML e tenho uma baita dificuldade em me livrar das tabelas, mas esse vídeo passo-a-passo foi muito didático! Vou experimentar num próximo projeto. Obrigado.
Alguns tutoriais no Tableless at GarotaDPI 23/07/2008 às 18:44
[...] Layout Fixo / Fluido de 3 colunas em 8 Minutos [...]
Bird 08/09/2008 às 18:34
Muito bom, porém faltou uma linha para funcionar no iE:
body {
text-align: center
}
com isso a div geral será centralizada.
para desativar esse alinhamento nas outras divs é necessário inserir:
ext-align: left;
(caso haja outra forma favor nos avise)
Vlw.
Paulo Patto 26/02/2009 às 14:45
Bem para o pessoal que quer saber qual o editor o nome dele é CODA e só tem para MAC, no Windows eu costumo usar Notepad++ (open source) ou o netbeans(free) em projetos com JSP.
Bem quanto a se o mac é mlehor eu não sei, não pois tudo (eu disse TUDO) que você faz no mac faz no Windows e no Linux.
Sobre o video muito bom mesmo, pena que o som não deu dessa vez mas fica para um proximo.