Felipe Cardozo

25 anos, carioca, residente da cidade de Nova Iguaçu. Trabalha com web há 6 anos. Foi ouvidor e designer do grupo Telemar por 3 anos, onde desenvolveu projetos e intranets.

• http://www.mxmasters.com.br | contato@mxmasters.com.br

• 10/03/2009 - 19:54
• 40 Comentários
• 11,309 visualizações

Acompanhe os últimos episódios desse programa que é sucesso na rede.

Publicado em 24/12/2008

24/12/2008 - MXWEBTV - Programa #22 - Edição especial de Natal

Publicado em 01/12/2008

01/12/2008 - MXWEBTV - Programa #20 - Edição especial - ETI

Publicado em 24/11/2008

24/11/2008 - MXWEBTV - Programa #19

Veja todo Conteúdo do MxWebTv

• Vídeo aula: Criando um site completo (Download da vídeo aula)
• Configurando D-link wireless
• Script de formulário de contato com confirmação em php
• Slide show de fotos com efeitos de transição
• Preloader com barra de progresso e porcentagem
• Menu animado com Action Script
• Efeito de transição de fotos em blocos com action script
• Criando flores
• Área restrita com login e senha
• Player de rádio

Tableless - Curso básico - Aula 3 - Desenvolvendo o corpo do site

Comentários:

40 respostas para 'Tableless - Curso básico - Aula 3 - Desenvolvendo o corpo do site'

1. wanderson - 19 anos RIACHO FUNDO/ DF Diz:
   10/03/09 às 20:27
   100%, muito bom. Aprovei a mudança.
2. Daniel Breitschaft Diz:
   10/03/09 às 20:52
   Ficou bem legal o novo layout. Acharia interessante se houvesse uma área exclusiva para usuários registrados com Login e Senha.
   Esta vídeo aula me clareou muito…

   Abraço.

3. David CHC Diz:
   10/03/09 às 21:22
   Ótima explicação Felipe, só pra acrescentar alguns pontos, todo elemento de bloco por padrão ocupa 100 % de largura, logo se um elemento pai estiver com declarado uma largura, logo o elemento filho vai seguir, como todo bom filho , ele vai seguir o pai, rs.
   E tbm, a técnica q o Felipe fez para colocar o background do conteudo se chama faux columns (falsas colunas)
4. Julio Coronel Diz:
   10/03/09 às 21:24
   Ficou ótima a mudança, bem mais intuitiva,
   quando tem algo novo da para perceber melhor.
   E ficou bem mais limpa.

   Abraço!

5. Michel Araújo Diz:
   10/03/09 às 21:53
   Muito bom! trabalhar com CSS, além de tudo é muito prazeroso, e o resultado final está ficando ótimo!
   []’s
6. Ery Diz:
   10/03/09 às 22:13
   Gostei do novo layout, achei legal, parabens.
7. Felipe Ercílio Martins Diz:
   10/03/09 às 23:29
   show de bola
8. samir Diz:
   10/03/09 às 23:57
   caramba tava esperando essa video aula

   Brigado ai Felipe…

9. denis nunes Diz:
   11/03/09 às 0:18
   show de bola felipones mto boa video aulanao vejo hora da proxima
10. Márcia Bardaro Diz:
    11/03/09 às 7:48
    Mt boa a vídeo aula sim!
    mas estou aguardando mesmo é como vc fará o menu??? é com CSS tb??? ou vc usa as ferramentas do DW?? (image rollover)
    bjão
11. Adelson Souza / 17 anos / Salvador-Ba Diz:
    11/03/09 às 10:02
    Felipão de volta.. muito boa a vídeo aula, estava aguardando a continuação das vídeo aulas de Tableless…. vlw felipão.

    e o layout está bem legal.. está facilitando muito a acessibilidade, gostei bastante.

12. Marcos César Ventura Maciel - 18 anos - Brumadinho - MG Diz:
    11/03/09 às 10:20
    Muito massa Felipe… hsuahsa! CSS é fantastico… aiai… porque eu não aprendi isso des do começo da minha carreira!m rsrs.! Forte Abraço!
    FORÇA SEMPRE!
13. Emerson Diz:
    11/03/09 às 11:42
    Ola Felipe ??? Pow a aula esta ótima, falo isso tambem pq sou amante de CSS TABLELESS, mais ainda tenho muito que aprender, e a INDEX esta perfeita até se acha estanho no começo mais depois vemos que é melhor até para visualizar tudo mais rapido, e lembro que VC falou que ainda não se sentia avontade ainda para fazer um CURSO de TABLELESS, magina sua DIDATICA é ótima e VC ja tem um GRANDE conhecimento para isso, daremos a maior força para fazer esse CURSO, PARABENS …
14. Eduardo Diz:
    11/03/09 às 18:01
    não sei se os usuários leem os comentários, mas msm assim vou deixar uma dicas aqui(em locais onde discordo da maneira que o felipe cardozo fez)

    1º- Acho interessante ser consistente na hora de nomear arquivos/estilos/páginas etc. dar nome em inglês pra uns e em português pra outros não me parece muito correto.

    2º - quando for usar uma imagem pra repetição e puder deixar com 1px de altura ou de largura, o faça, pq vai deixar o site mais rápido(a imagem vai ficar menor).

    3º - Particularmente eu gosto de deixar um comentário no final de ada div indicando qual a div q está sendo fechada ali. Iniciantes tendem a não usar comentários, e eu já sofri bastante com isso.

    4º - Não usar qualquer tipo de texto fora de tags

    5º - usar ‘*’(asterisco) pra indicar todos os elementos em CSS não é uma escolha muito legal, melhor é resetar somente as tags que precisa. Eric Meyer tem um arquivo para isso em seu site, basta buscar no Google.

    Abraços!

15. Felipe Cardozo Diz:
    11/03/09 às 18:07
    Eduardo, tudo certo?

    Valeu pelas dicas. Apesar de serem particularidades, está valendo.

    []´s

16. Leonardo™ Diz:
    11/03/09 às 18:23
    Adorei. Felipe nem tem como te elogiar mais
    Cada dia se superando!
    Abraço equipe MX!
17. David CHC Diz:
    11/03/09 às 18:32
    Muito bom Eduardo, ótima questões levantadas, e são sempre válidas. Primeira coisa tem q levar em conta são os padrões que cada um segue, então falar que é certo ou errado pode ser meio polêmico. Um exemplo vc pode ver o css do feiipe, ele escreve o CSS dele linear, sem tabulação, isso é errado? Não, é uma prática, que tbm já foi levantada pelo Bruno Dulcetti no blog dele. Outro exemplo é adotar o CSS modular, tem gente q não gosta e tem gente q gosta, mais uma questão de prática, e padrão adotado

    Em relação ao resetar os elementos, particularmente eu uso o asteristico, já usei o reset do Eric Meyer e de outros, mas no final, [b]pra mim[/b], não modificou muito em relação a usar o asteristico.

    Aos comentários isso é muito importante, e uma ótima prática em se adotar, principalmente se trabalhar em equipe, isso ajuda muito.

    Então é muito complicado dizer o q é certo o que é errado. Mas é interessante ver visões diferentes, isso ajuda bastante a evoluir.

18. wanderson - 19 anos RIACHO FUNDO/ DF Diz:
    11/03/09 às 19:02
    Eai felipe outra coisa, não estou conseguindo baixa o PNG.
19. Leleski Diz:
    11/03/09 às 19:08
    É isso espero mais aulas de tableless
    to começando na area de webdesign agora e gostei muito
    deste tipo de programação, valeu felipe.
20. Eduardo Diz:
    12/03/09 às 9:54
    David CHC(#17)
    Tirando a parte que falei da imagem de 1px de altura/largura, o resto realmente é questão de gosto.
    Quanto ao que vc falou sobre o estilo de escrever o CSS, vc está correto. A verdade é que é mais fácil de ler quando se está na vertical, mas o arquivo fica menor quanto tah na horizontal. Eu escolho escrever na horizontal tb pq cabe mais coisas na tela(odeio ficar rolando pra cima e pra baixo pra procurar alguma coisa). Mas nesse caso tb nem haveria a necessidade desse trabalho todo, já que existem sites/programas que compactam seu código, retirando todos os espaços desnecessários(vide o código fonte da página principal do google).
21. CSS Diz:
    12/03/09 às 16:47
    Uma das melhores vídeo aulas até agora muito importante isso pois eu criava layouts pelo fireworks e ficava com duvida de como montar…

    Estou esperando sua próxima vídeo aula você irar tabelar o layout? para poder utilizar os campos e etc…?

22. Ailton Mendes Mota Diz:
    12/03/09 às 17:30
    Ótima espero a outra vídeo aula o mais breve possível, obrigado Felipe Cardozo
23. Alex Rodrigues Diz:
    12/03/09 às 19:55
    E ai Felipe tudo bem, ótima video aula, eu estou acompanhando esse mini curso de tableless mas eu queria saber se esse tableless vai funcionar no wordpress tambem. A só mais uma coisa queria saber se existe algum plugin de paceiros para o wordpress?

    E obrigado pelas suas dicas cara!!!

24. Hugo Luiz Diz:
    12/03/09 às 21:17
    parabéns pela vídeo aula… muito bem explicada… vlww
    sempre continue assim.
25. Eduardo Diz:
    13/03/09 às 10:59
    #23.
    Alex Rodrigues
    –> Qualquer layout pode funcionarno wordpress, basta saber monta-lo reconhecendo cada comando que o wordpress executa(como o de ‘posts’ e o de ’sidebar’ por exemplo), e tb sabendo como configurar o novo layout(no arquivo css).
    Transferis layouts para Wordpress não é difícil, mas tb nao é simples a ponto de qualquer um fazer numa boa. No blog ‘css-tricks.com’ existe uma vídeo-aula mostrando como passar um layout em html/css para Wordpress. no ‘blog.themeforest.net’ existe uma série e tutoriais(Wordpress for designers) mostrando como o wordpress funciona. Recomendo ambos.
26. Ricardo Diz:
    14/03/09 às 1:26
    Felipe,
    Fazia um tempo q eu nao mexia com sites e agora surgiu a necessidade de fazer um nao profissional. Mas sempre procurei faze-los com a melhor tecnica.
    Com suas video aulas montei um site, mas como vc parou com elas tentei montar o menu e a parte do conteudo sozinho, mas nao esta dando mto certo. O q eu fiz foi criar uma div=menu e coloca-la como float:left e a div=content (seguindo suas nomenclaturas), float:right. Porém quando eu tento mudar a margem interna na div=content a div é jogada pra esquerda e faz com q o menu seja jogado pra fora da div=conteudo. Como eu faço pro texto aparecer um pouco para direita na div=content???
27. Felipe Cardozo Diz:
    14/03/09 às 11:25
    Olá Ricardo, tudo bem?

    Sempre que você for colocar valor para margin ou padding em um box, você tem que subtrair esse mesmo valor do width desse box.

    Ex: Se você tem um box com 400px e for colocar um padding-right de 10 px, você terá que mudar o width para 390px.

    Faça esse teste.

    []´s

28. Alex Diz:
    14/03/09 às 13:49
    ola pessoal parece q o link do png esta corrompido pessoal ta postano sobre isso no forum se possivel dar um veriicada.

    vlw

29. Felipe Cardozo Diz:
    14/03/09 às 14:43
    Olá Alex!

    Retificado! O download do arquivo já está Ok!

    []´s

30. Tableless - Curso básico - Aula 4 - Flutuando blocos | MX masters - Sua central de vídeo aulas na web Diz:
    14/03/09 às 17:35
    [...] Tableless - Curso básico - Aula 3 - Desenvolvendo o corpo do site [...]
31. Marcus Diz:
    18/03/09 às 13:22
    Por que o Felipe Cardozo não costa mais dos colunistas? Você vai parar de nos ofertar suas aulas magnânimas?
32. wanderley Diz:
    24/03/09 às 18:32
    boa Felipe…
    mudei pra cá depois de assistir essa aula…kkkkkkk

    mto bom esse tutorial… alias..o melhor q ja vi (boa qualidade ate de som)

    parabens…sucessos !!!

33. Marcelo Diz:
    2/05/09 às 11:33
    Primeiramente, queria deixar aqui os parabéns pelo curso e pelo excelente conteúdo do site MX Masters.

    Estou acompanhando este curso pois o assunto me interessa a bastante tempo, como estou iniciando, tem sido de grande valia.

    Bom, estou na etapa 3, e estou enfrentando uma dificuldade, na etapa do slice, após efetuar os passos, e inserir no CSS, está ficando desalinhado, coisa pouca mas está.

    Como posso resolver isso?

    Grande abraço!

34. MoisesTeix Diz:
    2/06/09 às 23:49
    Felipe o site está muito bom, bastante intuitivo.

    estou com o mesmo problema do nosso irmão Marcelo,

    “Bom, estou na etapa 3, e estou enfrentando uma dificuldade, na etapa do slice, após efetuar os passos, e inserir no CSS, está ficando desalinhado, coisa pouca mas está.

    Como posso resolver isso”

35. Rasecdimellus Diz:
    15/07/09 às 14:59
    Cara, show de bola essas video aulas do Felipe.. muito bom mesmo parabens ao mxmasters, tem ajudado a galera da webdesigners.
36. Fillipi Warley Diz:
    23/10/09 às 15:53
    Felipe, organizei as divs do meu site ok, só estou tendo problema com uma que eu quero que tenha rolagem horizontal e a altura seja até o final do browser e que ela se ajuste pra qualquer resolução.

    Coloquei o height dessa div 100%, só que ela considera 100% como sendo toda a área praticável do browser, ou seja como tem uma div com topo sempre passa a medida exata dessa div do topo para baixo, como poderia resolver?

    Taí o código css, funcionando:

    @charset “utf-8″;
    /* CSS Document */

    *{margin: 0px; padding:0px;}
    html,body {height: 100%; width: 100%}
    body{background:#8C8C8D url(../images/Layout_01.gif) repeat-x;}
    #conteudo{width:100%; max-height: 100% auto; margin: 0 auto;}
    #topo{background:url(../images/topo.gif) no-repeat center; height: 147px;}
    #centro{background:url(../images/Layout_02.gif) repeat-x; height: 100%; overflow:auto; overflow-y: hidden;}

37. David CHC Diz:
    29/10/09 às 9:22
    @Fillipi Warley, como vc mesmo já diagnosticou o problema, realmente ele vai contabilizar o topo, só se vc em vez de colocar 100% colocar outro valor q assim diminua. Outra possivel solução é usar javascript, se possivel, o jquery pra facilitar, e atribuir um valor a div centro, algo mais ou menos assim:

    $(function(){
    //pega a altura do documento
    var alturaBody = $(window).height();
    //algo pega a altura do body e diminui com 147px q é o topo
    var alturaCentro = alturaBody - 147;
    //atribui via css a nova altura
    $(”#centro”).css({’height’ : alturaCentro+’px’})
    })

    Caso não tenha familiaridade com jquery, aconselho ver as vídeo aulas do VAB - http://www.videoaulasbrasil.com.br/categoria/ajax/

38. Dowal Diz:
    5/11/09 às 23:49
    Muito boa essa video aula Felipe to apredendo bastante,mas na <div id=”content” não esta dando certo aqui minha imagem aparece mas não desce ja vi e revi varias vezes o video refiz me css mas não tem jeito, sera que é porque to com o CS4?
    Obrigado
39. Allan Rodrigues Diz:
    8/12/09 às 20:58
    ótima VideoAula!
40. Ismael Diz:
    22/12/09 às 0:33
    Muito legal Felipe Cardozo, video aula bem útil!

Clique aqui e deixe seu Comentário