Layout Clean com 3 colunas | André Buzzo
contato@andrebuzzo.com.br | (11) 9-8551-3500 | facebook | skype:andrebuzzowebdesign

Layout Clean com 3 colunas

Publicado na categoria Vídeo Aulas, Vídeo Aulas - Tableless, Vídeo Aulas - Webdesign com 11.074 visualizações e 49 comentários

Layout clean com 3 colunas em CSS

Fala Pessoas!

Nessa vídeo aula, vou dar uns toques sobre como criar um layout no estilo clean, o que se pede em um projeto desse estilo e também como, via CSS, montar um site que disponibilize 3 colunas de conteúdo!

Juntando esses dois conceitos, atendo os pedidos de Matheus Silva e EduardoMx, que postaram seus comentários em andrebuzzo.com.br (VA sobre Teoria do Design) e no Mx Masters (Validação de XHTML com CSS), respectivamente!

Forte abraço a todos, bons estudos e fiquem com Deus!

Até uma próxima!

Os scripts do index.php e do estilos.css estão na seção Banco de Scripts do site!

Voltar à página anterior!

  • vinicius

    ótima video aula, de forma simples tirou varias dúvidas, continue assim abraçossss

    • Fala Vinicius.

      Obrigado pelo elogio e pelo comentário meu amigo!

      Abraços!

  • Macgyver

    Oi, cara a cada aula que assisto no seu site eu acho ela mais foderoso kkk.
    Eu só tenho uma duvida simples: O que significa essa tag css que vc colocou no rodape?
    clear:both;

  • ahshaosaioihsaoi…
    eu lembro da magda do sai de baixo saaoihsasah
    tenho 23 anos :P
    valeu abraço, e parabéms pelas video aulas e pela iniciativa de compartilhar seus conhecimentos atraves deste segmento, sempre sanando duvidas e dando uma força pra todos que precisam.
    abraço!

  • Vinicius

    Parabéns pelo trabalho André.
    Bom, iFrame não é “passado” e nem está “ultrapassado”, pois ele continua na especificação no HTML5, o que foi retirado são so frames e framesets. O iframe não é um bom elemento se tratando de acessibilidade. Porém ele resolve em boa parte problemas de cross-domain e requisições ajax cross-domain mesmo que isso seje considerado um “workaround”. Mas agora, com a nova especificação existe o XmlHttpRequest Level 2 que é o responsável por resolver este problema antigo. Mesmo assim, o elemento iframe não deve ser ignorado, pois tem sua utilidade.

    • Fala Vinícius!!

      Obrigado pelas informações meu velho!!! Valeu mesmo!!

      Eu, particularmente, não gosto de trabalhar com qualquer tipo de FRAME, pois dou prioridade ao SEO de um site.

      Dessa maneira, os crawlers ficam meio perdidos no meio de tantas páginas…. por isso “minha bronca” com esse tipo de programação!

      Forte abraço meu velho!

      Até mais!

  • Tulio

    Mas, para o blogger, vc sabe como configurar? Seria uma boa Video-aula!, acho que muita gente usa o blogger

    • Fala Tulio!!

      Então cara…eu não trabalho com o Blogger… já até procurei algo à respeito, mas resolvi me dedicar ao WordPress que é bem mais completo!!

      Abraços!

  • Tulio

    OPA!, deu sim! VLW CARA

  • Tulio

    Não deu certo! :(

  • Tulio

    Opa!, valeu ai pela atenção mais eu já consegui! agora estou com uma outra duvida, vi aqueles seus videos da serie de 4, sobre criar um template todo no CSS sabe? e lá vc coloca no *body o código margin:0px; e seu template fica centralizado, o meu não ficou, já tentei de tuto, fui no HTML e coloquei , coloquei margin:0px; em outras tags no CSS e não deu! HEELP ai PFF!

    • Tulio, faz o seguinte:

      No container que vai receber todo o conteúdo do site, vc coloca a seguinte linha no CSS

      margin:0 auto;

      Esse 0 (zero) quer dizer que acima e abaixo não vai ter margem, e ou “auto”, centraliza o conteúdo na tela, independentemente do tamanho do monitor ok?

      Abraçso meu velho!

  • Tulio

    Opa!, video-aula bem legal ajudou muito mais estou com uma duvida!, qual o tamanho do documento no FireWorks? Vlw!

    • Fala Tulio!!

      Como assim, qual o tamanho do documento? Você quer saber o tamanho em bytes do documento ou o tamanho do canvas que eu uso na aula?

      Abraços!

  • Jacson Leite

    Valeu André, vou aguardar…

    Até!

  • Jacson Leite

    Boa tarde!

    Muito boa sua video aula, gostei mesmo, tirou minha dúvida sobre site com 3 colunas, já criei alguns com css, mas meio no “peito e na raça”, agora vejo que é simples e se trabalhado de forma orgonizada.

    Gostaria de saber como fazer as cores do “header”, “conteudo”, e “rodape” estenderem-se por todo o nevegador igual no teu site?

    • Fala Jacson….

      Essa é uma dúvida um tanto quanto recorrente….vou providenciar uma VA sobre o assunto ok?

      Abraços e obrigado pela visita!!

      Até mais!

  • Fabio Santos

    Boa Andre!
    Parabens por tanto conteúdo nobre que vc tem disponibilizado para as pessoas que de fato deseja aprimorar seu conhecimento.

    Como dizia minha vó: Primeiro elogie e depois peça, que você receberá. kkkkkk brincadeira!

    Veja bem seria possível vc disponibilizar uma video aula sobre técnicas de criação de logo marca para site, existe realmente um significado, regra a seguir, não sei nada sobre isso eu sempre faço mais com minha cratividade talvez sem ter norção do que estou fazendo.
    Sei lá algo por onde começar como fazer, qual fonte escolher, que desenho criar, algo desse genero.

    Muito grato ficarei no aguardo se possível for!

    • Fala Fábio!! Tudo em ordem?

      Valeu pelo comentário meu amigo….rs…. e é assim mesmo…primeiro elogia, depois vem o pedido…hahahahahaa

      Mas, vamos lá… vai ser complicado criar conteúdo dessa maneira, até mesmo porque eu não sei!!! Sem vergonha nenhuma em dizer isso, porque eu não sou publicitário, e nesse quesito, de criação de logomarcas, é preciso um estudo publicitário bem completo para o desenvolvimento!

      Existem, claro, teorias sobre formas, sobre apresentações, com a de Gestalt, onde uma imagem está inserida dentro de outra (teoria na qual o logo do Carrefour foi criado), dentre outras coisas…agora, para saber a aplicação correta em determinados casos, foge da minha vã ciência….

      Mas é um assunto interessante, e prometo que vou buscar um pouco mais de informação para tentar, ao menos, dar um norte sobre o assunto!

      Obrigado e excelente semana meu amigo!

      Abraços!

  • Reinaldo

    Olá André Buzzo, queria dizer que as suas vídeo são muito boas estou assistindo todas pretendo seguir carreira como web design porque gosto de expressar a minha criatividade, mas eu gostaria de saber? Web designer é uma profissão sustentável, isto é da pra se viver só disso? Vejo que o mercado de trabalho para designers aumentou mais em media quanto seria o salário de um web designer formado? Desculpe-me a minha pergunta, mais estou interessado em saber.

    Muito sucesso para você adora as suas vídeo aulas são bem explicadas e divertidas.

    Um abraço

    • Fala Reinaldo !!!

      Então cara…vamos por partes:

      Primeiro, obrigado pela visita, pelo interesse e pelos elogios!!! Obrigado mesmo!

      Segundo…. a profissão é rentável sim, e é preciso qualidade e pontualidade nas coisas que for oferecer. Como existem diversos “sobrinhos” por aí (que é relativo, afinal de contas, para começarmos, precisamos mesmo cobrar um valor mais baixo! rs), nós precisamos sempre “provar” nosso profissionalismo!

      Quanto ao salário, é bem complicado! Nós não temos um “Sindicato” para regulamentar a profissão. O que poderia resolver alguma coisa, que é a Abraweb, ainda faz um levantamento da quantidade de webdesigners que existem por aí…e até fazer isso, vai demorar bastante….

      No nosso escritório de contabilidade, o que nos disseram foi o seguinte: o valor a ser pago ao profissional web varia de região para região, e portanto, não existe um piso fixo para nós. Eles alegam que, em São Paulo, por exemplo, o designer pode ganhar R$2.500,00 … o mesmo não seria pago em uma cidade do interior!

      Portanto, não podem nivelar o valor para não prejudicar quem está na cidade grande, e por consequente, o da cidade pequena!!! rs

      Espero que eu tenha tirado suas dúvidas, e se precisar de mais informações, estamos por aí!

      Abraços!

  • EduardoMX

    Ok, então fico no aguardo da aula, será de grande ajuda para mim e para outras pessoas que também estão passando pelo mesmo problema que eu!

    • Beleza compadre…acho que vou conseguir fazer isso na semana que vem ok? Essa semana tá corrida pacas para poder gravar essa sequência…

      Abraços!

  • EduardoMX

    André fala cumpadre, pensei aqui sobre uma aula que bastante pessoas tem dúvida inclusive eu tem como vc fazer uma VA sobre como fazer as subpáginas, pode ser deste layout mesmo, queria saber como que faz essas subapaginas das outras respectivas páginas do conteudo, como troca pelo css, pq o layout primeiro ja foi passado pelo css, está pronto mas e as subpáginas, tem que reconstruir tudo denovo??

    • Opa!

      Beleza meu velho! Vou providenciar uma segunda parte então, dessa vídeo aula sobre o layout clean…vou montar a página que receberia o conteúdo por exemplo….

      Abraços e valeu pela dica!

      Até!

  • Thiago

    Cara Parabéns, pela video aula e também pelo site.

    Poderia postar alguma coisa básica sobre formulário? Tenho muito problemas na hora de fazer o envio, nunca envia certo sempre falta uma coisa ou outra.

    Valew André,estarei aguardando!!

    • Fala Thiago!

      Cara, eu já tenho uma sequência de 3 VA´s postadas aqui no site sobre formulário…de quebra, ensino ainda como criar o formulário anti-spam, para que não receba mensagens de bots que percorrem a web e onde encontram um form disponível, te envia uma mensagem!

      É só procurar na seção PHP & MySql que está lá! “Formulário AntiSpam” …

      Obrigado pela visita, pelos comentários e sinta-se em casa!

      Abraços!

  • Tiago Múrcia

    AAAAAAAAAAAH, acabei de achar aqui cara, mas se quiser fazer a aula, kk

    • Beleza…fica a dica … rs

      Mas vou ver se consigo fazer algo do gênero meu velho!

      Obrigado!

      Até mais!

  • Tiago Múrcia

    ou jquery

  • Tiago Múrcia

    Salve André!
    Muito boa esta aula, e também a matéria sobre o HTML5.

    Espero não estar abusando de sua boa vontade, mas você poderia fazer uma de como fazer um slideshow em java como http://www.mxcursos.com/cursos/csc-degustacao/index.html ou do próprio MXMASTERS, porque procurei muitos códigos, mas não achei nada.

    Obrigado, Abraço

  • EduardoMX

    OPA OPA, voltando aqui por dúvidas amigo referente ao menu to te procurando por e-mail e tudo quanto é lugar vc não me respondeu mais, e preciso fazer um menu normal digamos simples igual o seu mas no meu tinha feito no fireworks os separadores bunitinho e eu passei ele junto pro dreamweaver, dai surgiu os problemas para passar pro dreamweaver não estou conseguindo tem como me da uma força cumpadre, pois as palavras como por exemplo HOME/SERVIÇOS/ETC.. nao fica certo no menu, vi alguns videos que utilizam dentro por exemplo do seu está tudo pronto dai vc vai no index.html vao na div id”menu” e colocam tentei fazer de tudo mas nao consigo fazer nada legal, e queria fazer um menu simples mas show de bola, tipo background preto o meu vai ficar, as letras branca, e quando eu passar mouse em cima de cada Parte, vai ficar cinza medio escuro,esse efeito que quero dar ao menu, e queria ter noção de como faz com os separador para alinhagem das palavras, com os separadores, se puder ajudar cumpadre será de grande ajuda para mim, Obrigado até aqui, vlw!

    • Fala Eduardo!!!

      Seguinte…eu vou ver se providêncio uma VA sobre menus cara…tem mais gente me pedindo isso… de como montar menus com imagens e tals…no site da Mx Masters, tem uma vídeo aula da Rubia, sobre CSS Sprites….aqui no meu tb tem, mas é um menu marcando a página….é um pouco diferente, mas usa-se a mesma lógica…quanto a não te responder, rs, foi mal aí…

      Semana passada foi super corrida!

      Abraços!

  • Bruno

    Fala andre blzinha?

    Cara to com uma dúvida referente a esse layout liquido.

    Assim…montei esse layout aki com 3 colunas usando %…quando o browser esta maximizado blz tah lindo e bonitão….agora quando minimiza e deixa apenas uma janela pequena o conteúdo do site bagunça tudo, as divs não fica fixadas igual quando se faz o Layout usando Pixels.

    Tem algum jeito de arrumar isso?

    Vlww e FLws..

    • Fala Bruno!

      Esse é, ao meu ver, o grande problema em se utilizar layout líquido…fica mesmo, complicado de manter uma consistência em diversas resoluções!

      O que você precisaria fazer, ao meu ver, é trabalhar com as imagens em porcentagens também! Porque é como eu costumo dizer…se vc disser que a imagem vai ter 60% de tamanho, ela vai ocupar 60% de uma resolução de 800×600, de 1024×768, e assim por diante…ela vai “crescer” de acordo com a tela….

      É aí que mora todo o serviço extra e o quebra-cabeças para montar um layout consistente….

      Abraços compadre, e no que precisar, estamos aí!

  • GASPAR

    iae ANDRÉ tudo bem.

    tenho alguns layouts feito pelo meu home,e to tendo uma certa dificuldade de construir o topo com os menus,nao sei se ja postou algo parecido mande o nome por favor.
    desde de ja agradeço.

    • Fala Gaspar!

      Quais as dificuldades meu amigo? Você poderia ser mais específico?

      Eu tenho uma série de 4 vídeo aulas na seção Tableless, onde eu ensino a colocar um site “desenhado” no Fireworks diretamente no HTML utilizando CSS, mas não sei bem ao certo se caberia na sua dúvida!

      Qualquer coisa, volte a escrever e me passe mais detalhes sobre as suas dúvidas ok?

      Abraços!

  • EduardoMX

    Opaa, cumpadre beleza, sanou bem as dúvidas mais uma vez agradeço, nao vejo hora de ser igual vcs ai postando VA, pra ajudar o pessoal, vlw!

    • Fala Eduardo!

      Maravilha meu amigo!

      Quanto a ser “igual a gente”, holoco!! rsrs

      É só estudar bastante que não tem erro não…. rs

      Abraços!

  • ola andre, muito obrigado , e sim conseguiu sanar as duvidas de 2 pessoas ao mesmo tempo.
    Quanto a questao da % em layout, para setar as imagens(altura e largura) tambem terei de trabalhar com %?

    obrigado.

    • Sim…. você poderia trabalhar com porcentagens para que a mesma, independentemente da resolução do monitor, ficasse com suas devidas proporções… mas aí que vem o problema (ao meu ver) em se usar layouts líquidos… imagine que vc tenha uma imagem de 200px de altura, para ser mostrada em 800×600 … vc vai colocar, digamos assim, no width, 70% e no height, 100%, para ficar propocional. Mesmo sua imagem tendo 400px de height, pois vc precisa que ela fique boa numa resolução dobrada….rs…
      Já pensou num logo com 400px?

      Ia pegar praticamente toda a tela do monitor, numa alta resolução…. ou se deixa baixa, ela estoura…. é velho…são coisas a serem pensadas….

      Abraços!

  • Fala ae… Muito boa essa aula, vou assistir a todas, também sou novo nessa área, possuo um trabalho no ar, que será atualizado em breve. Quero ver se acho umas idéias pro novo layout do site.

    Muito boa hein, dois coelhos com uma caixa dágua, huehuehueh, cala boca magdaaaaaa… era muito bom esse seriado, pena que acabou cedo.

    • Compadre, se te ajudou, fico muito feliz! rs

      Obrigado pelo interesse e por buscar novas ideias no site…. ele está aí para isso mesmo….

      Abraços e realmente…programas bons duram pouco e deixam saudades….

      Até mais!

  • Thiago Cardoso

    Grande André.

    Você ja fez ou ja experimentou fazer sites ou sistemas web com Iframe?
    Eu ja fiz um site meu com iFrame. fico bem bacana.

    abraços

    • Não trabalho com IFrame…rs….Thiago, isso é linguagem de 10 anos atrás….hahahahahahaha

      Se você for botar energia em aprender algo diferente, recomendo que estude o HTML5, ao invés de linguagens ultrapassadas…. só pra você ter ideia, hoje, o google nem considera mais sites em IFrame em suas pesquisas….rs

      Abraços!

  • Thiago Cardoso

    Grande André.

    Super boa essa Dica sobre Layout Clean com três colunas.
    muito bem pensado cara!!

    Eu constumo fazer mais ou menos isso também.

    parabens cara!!

    abraços
    waterboy

    • Opa!

      Atendendo a pedidos meu amigo!

      E muita gente ainda tem dúvidas sobre layouts com 3 colunas… e na parte do design, pintam várias e interessantes dúvidas … rendem bons materiais para estudo ….

      Abraços!