07/04/2009 - 21:07 > 21.265 Visualizações > 201 comentários

Tableless – Estruturação de um layout de 3 colunas

Olá comunidade. Felipe Cardozo na área com mais uma super vídeo aula de tableless. Estava trabalhando na estruturação de um projeto que estamos desenvolvendo e resolvi compartilhar com vocês.
Nesta vídeo aula, iremos ver como desenvolver uma estrutura de layout desde o zero.

Bom estudo!

Atualização 10/04/2009

Pessoal. Realmente vi que houve um problema que passou por despercebido no fim desta vídeo aula. Acontece! Coisa simples.

Resolvi o bug do layout de uma forma muito simples.

Retirei o “overflow:auto” do “wrap” e criei uma div chamada “divclear” com o “clear:both”. Coloquei esse div antes da div que fecha o wrap.

Obrigado ao amigo Adir que no comentário nos deu esta super dica do clear na div antes do fechamento da div pai.

Posts relacionados

Nenhum post relacionado

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

201 respostas para 'Tableless – Estruturação de um layout de 3 colunas'

kleber Diz:
7/04/09 às 21:56
aeaeae show!
Bruno Diz:
7/04/09 às 22:01
Muito Boa a Video aula e por ter compartilhado este trabalho conosco!! Agradecido e muito igual a todas as video aulas suas e dos colunistas que sempre me surpreende !!
Junior Diz:
7/04/09 às 22:13
Parabéns exelente video aula continue nos ajudando…
JOÃO HENRIQUE FONTENELE Diz:
7/04/09 às 23:11
Valeu felipe show de bola cara, parabéns abraços a toda equipe mxmasters. vlw
Daniel Breitschaft Diz:
7/04/09 às 23:14
Olá, muito boa essa vídeo aula como sempre, e parabéns pela video aula de Wordpress da revista TIDigital, espero aulas deste CMS aqui no site também, e se possível sobre o assunto Criação Personalizada de Temas para Wordpress.
Uma dica é a do blog http://loganlol.site.br.com/blog/ onde o autor já está na 7ª video aula sobre o assunto.

Grande abraço.

Daniel.
Adir Renato Diz:
7/04/09 às 23:15
Uhuuhu… boa Felipe
Boa dica do overflow pra div acompanhar o height da coluna pai
Tbm pode se ajeitar isto usando um clear antes de fechar a div pai. Fica ae a dica!!!! abraco a todos
Allan Diz:
7/04/09 às 23:17
O primeirooooooooooooooooooooooooooooooo a comentar, puts felipe nd a declarar sobre vc e a mx masters vcs sao fodas cara, adoreiiiiiiiii o videoo, <3 mx masters
Lucas Diz:
7/04/09 às 23:19
Mais uma super videoaula do Felipe, aprendi muito com voce obrigado mais uma vez..
Joao carlos Diz:
7/04/09 às 23:28
topo e mew hauhauahua show de bola ….. e nois…
andrei Diz:
8/04/09 às 0:05
boa felipão show de bola essa video aula,como sempre vc tirando minhas duvidas com o css…..abçs
Sergio Araujo Diz:
8/04/09 às 0:06
Fala Felipone….blz

Olha como diz nosso amigo Titio aleixo… Chock de Bolette…

Parabens pela didatica… Agoara fica a pergunta:

É melhor trabalhar com Tabelas ou Tablelles ?

Abraços e continue nos ensinando sempre…
Rodrigo Vargas Diz:
8/04/09 às 0:07
Bem que eu queria os DVDS, mas como voce falou, eh impossivel fazer esse layout com tabelas e deixa-lo com o codigo menor!
Belissima aula!
Olha soh. Tem uma galera que acesa o site e cria os layouts com o photoshop. Seria legal uma video aula sobre como passar os layouts em PSD para (x)HTML + CSS!

Abraco!
Thiago Diz:
8/04/09 às 0:09
………. sem comentários ^^ muito boa mesmo parabéns…
Luis Paulo Ribeiro Diz:
8/04/09 às 0:17
poxa essa eu acho que foi a melhor video aula que ja vi aqui, muito bem explicada e taws.
Bom queria muito agradecer ao mxmasters e toda a sua equipe, pois este site me ajudo demais mesmo, aprendi muita coiza aqui, e sou muito novo como webdesign estou começando agora, estou fazendo meu primeiro trabalho como free e espero que seja o primeiro de muitos e foi o mx masters que abriu as portas, ou janelas de muitos programa poadsksd. bom agradeço mesmo abraços
Michel Araújo Diz:
8/04/09 às 0:32
Felipe dando show com CSS como sempre! Video aula muito informativa, um layout feito rapidamente e como disse, com uma quantidade minima de código.

Quanto à otimização do código, admito que sofro de “divite”, mas estou me tratando xD

[]’s
Simeoni Diz:
8/04/09 às 0:48
Grande Felipe, sempre com excelentes videos, essas de Tableless entao, espetacular….parabéns gostei muito e acho que ninguem vai ganhar esse DVD do desafio…rsrsrsrs

Super Abraço!
Marcos César - 18 anos - Brumadinho - MG Diz:
8/04/09 às 1:06
Muiiitttto bom heim??? hsuahs! Felipe a video aula foi 10, aprendi mais ainda e tirei dúvida como por exemplo o “CLEAR: BOTH”, antes eu criava uma div pai com a dimenção 100% e dentro dela uma div filho com float left, pq não alinhava de geito nenhum! shauhsua, agora esse “hack” para ie6 e firefox foi uma mão na roda… são esses pequenos detalhes que diferencia um bom css de um ótimo css! abração!

FORÇA SEMPRE!
Diego Mannes Diz:
8/04/09 às 1:30
Boa Felipe, ótima aula, me ajudou muito em alguns aspectos.
Gostaria de aproveitar e pedir que tenha mais video aulas de CSS, pois ainda tem poucas.
Bom sempre estou aqui no Mx Masters à procura de conhecimento, e realmente não se encontra por ai um site com tanta qualidade em video-aulas igual o MX.

Valeu Felipe, valeu galera do MX.
Matheus k9 Diz:
8/04/09 às 2:15
Pow massa em mais ficou parecendo aula de css…
valeu Felipão sucesso…
OoOOo soninho vou dormir … falowwWwWww…
Fernando Fontes Diz:
8/04/09 às 2:31
Cara vcs são demais, estou aprendendo muito com vcs…
valeu
ah e essa aula foi show…
fiquem com Deus.
Falow
Felipe Cardozo Diz:
8/04/09 às 6:24

Fala ae Adir, beleza/

Rapaz. Não sabia dessa do clear antes do div pai não..Fiz aqui e não é que funciona mesmo!

Obrigado por nos informar e esteja sempre por perto. É muito bom ter pessoas que saibam trabalhar com linguagem e principalmente que tenham a boa vontade de compartilhar conhecimento, por mais simples que este seja.

[]´s
Felipe Cardozo Diz:
8/04/09 às 6:26
Sérgio, beleza?

Tabelas só para usar em tabulações como um calendário, por exemplo…

Tableless is all!

[]´s
Felipe Cardozo Diz:
8/04/09 às 6:27
Rodrigo, tudo certo?

Assim que eu terminar o DVD de Fireworks que tô desenvolvendo, começo com o de tableless

[]´s
Felipe Cardozo Diz:
8/04/09 às 6:28
Valeu Michel!

Huahuahua…”DIVte ou Divmania é normal no mundo do CSS…rs

[]´s
Felipe Cardozo Diz:
8/04/09 às 6:30
Diego, tudo certo?

Temos algumas poucas, mas boas vídeo aulas de tableless, mas pode ter certeza de que iremos fazer mais.

[]´s e obrigado pela visita !
Felipe Cardozo Diz:
8/04/09 às 6:34
Galera!
Queria de coração agradecer o carinho de vocês! Queria que todos soubessem que os elogios de vocês são muitos combustíveis para continuarmos a fazer esse trabalho que infelizmente alguns não dão valor, mas prefiro falar dessa galerinha que já faz mais do que parte da minha vida.

Não sou de falar muito aqui no comentário. Na verdade, estava tentando me concentrar mais na administração do MX do que nas vídeo aulas em si, mas é simplesmente IMPOSSÍVEL. Não consigo aprender algo e não compartilhar. É algo maior que meu ser…rs

E outra coisa. Nunca fui de pedir muita coisa aqui no MX, mas queria ver a galera comentando mais. Se ninguém sabe, os comentários são os termômetros para sabermos se o site está legal ou não. Se estamos aguadando ou não! Então, comentem. Não custa nada. É rápido e “de grátis”

Quero mais uma vez agradecer a todos, pedir desculpas pela ociosidade que tivemos semana passada, mas é muito trabalho pessoal. Mas estamos nos organizando….

E tem mais. Não queria soltar, mas já que estamos nesse “clima”, vamos lá. Vem novidade boa aí!!!! Aguardem!

[]´s
Donald Diz:
8/04/09 às 9:03
Muitooo Boa veio, mas se eu não me engane eu mandei um E-mail pedindo uma aula de reforço ^^ sempre bom aprender mais.
denis Nunes Diz:
8/04/09 às 9:43
é isso ai felipão muiiiiiiiiiittttttttoooooooooooooo aprendizado nessa video-aula ai nada como aprender a ficar por dentro dos padrões WC3 show de bola mesmo a video-aula continuem assim mto show mesmo
Luiz Gomes Diz:
8/04/09 às 10:31
Parabéns Felipe, mais uma vídeo aula simplesmente fantástica e que traz uma bagagem de conhecimento incrível com uma linguagem de fácil compreensão e muita clareza no tema abordado, alias como em todas as aulas disponíveis no site, eu particularmente tenho tido muitos problemas para adequar meus sites usando o css em relação ao IE e o Firefox, quando fica bom em um fica um desastre no outro, mas tenho certeza que aos poucos soluções como a apresentada nesta aula “clear: both”, irão eliminar estes problemas.
Abraço a toda a equipe MX, PARABÉNS, PARABÉNS e PARABÉNS.
Patricia Diz:
8/04/09 às 10:32
Quando crescer quero ser igual à vc!

bjos
Bruno Augusto Diz:
8/04/09 às 10:54
Fala Felipe,blz? Muito interessante e correto a forma na qual vc escreve o seu estilo css,em linhas fica até mais “semantico”.Muito Boa a aula.
No IE 8 a Sidebar ,ta ficando embaixo da coluna meio,precisa ter seu tamanho dimunuido para pelo menos 183px para se encaixar com as demais,rezo pra um dia fazerem um browser universal.
grande abraço e td de bom
David CHC Diz:
8/04/09 às 11:34
Ótima video aula Felipe (até citou o q disse em um comentário, sobre div pai, rs), com vc falou sobre o IE6, pode ocorrer tbm quando vc usar float um bug conhecido como margem dupla, o IE6 duplica o margin quando utilizamos o float, a solução é simples basta declarar a div com display:inline.

Sobre o problema do float no FF vc declarar um e colocar no final da div pai (acho q já foi até sugerido), e dpois utilizar CSS colocando:

hr.neutro{
clear:both;
height:1px;
visibility:hidden
}

Outra maneira pode ser feita assim usando a pseudo-classe :after –

#wrap:after{
content:”.”;
display:block;
visibility:hidden;
height:1px;
clear:both;
}

É bem simples a explicação disso, digo q quero acrescentar depois (:after) de #wrap => um ponto( content:”.” ), q seja um elemento de bloco (display:block;), fique invisivel(visibility:hidden;), tenha uma altura de 1px ( height:1px;), e seja anulado o float, tanto o left quanto o right (clear:both)
Trambulhao Diz:
8/04/09 às 11:42
Parabéns Felipe Cardozo.

Para quem esta começando na criação de site usando as famosas divs, esse vídeo aula vai foi muito bem preparado, vai ajudar muito.

Sugestão: Seria interessante explicar também como definir as classes para as divs coluna meio e slidebar acompanhar o layout (wrap) no comprimento.
Felipe Cardozo Diz:
8/04/09 às 12:49
David, show!

[]´s
Adir Renato Diz:
8/04/09 às 12:49
Huhuhuh…. Pode deixar Felipe , aqui é meu point na web!!!! Todo dia dou uma passadinha por aqui! Tudo q sei de fireworks e photoshop aprendi aqui no mxmasters !!! Devo muito das minhas inspirações a vcs e espero ajudar muito, caso precise.

Ps.: DVD DO FIREWORKS!!!! DVD DO FIREWORKS!!!! DVD DO FIREWORKS!!!! ! ESTOU ANSIOSO AGUARDANDO.
abs,
Adir.
Wellington Diz:
8/04/09 às 12:54
Muita boa a videoaula.
kkkkkk sem querer estragar a suspresa. Felipe acho que sei qual é a novidade.
abraço.
Thiago Souza Diz:
8/04/09 às 13:20
aeee felipe…
otima video aula..
quero agradecer enormemente a todos ai do mx .
vlw ai , vcs tem tudo para darem certo !

só quero pedir uma coisinha ..
quando sobrar um tempinho ..
termina a video aula de tableless curso basico..
=x

vlw
Carla Diz:
8/04/09 às 13:36
Adoooro as aulas de Tableless!! Também vai ser um dos cursos que eu vou comprar aqui! =)
Leonardo™ Diz:
8/04/09 às 13:51
Ficou muitoooo bom!!
Nunca imaginei que MX iria disponibilizar algo assim, a cada dia fico mais conformado que o mx está virando minha segunda casa
E a 6ª Parte do Tableless sai ou não sai hehehe
E como o Felipe disse vamos comentar mais nos posts!
Abraço pessoal do Mx!!
Allan Diz:
8/04/09 às 15:09
É exatamente poriso que amamos a mx masters , pq vcs ajudam agente sem pedir nada em troca !! =] ! <3 Mx masters
Thiago Souza Diz:
8/04/09 às 15:10
é isso ai galera vamos começar a postar ..
pq o pessoal aqui merece, não é?
;p
Leonardo™ Diz:
8/04/09 às 17:19
Felipe, tem como configurar o dreamweaver para ele poder organizar o codigo como esse programa? Achei interessante como ele coloca aquelas linhas identificando as divs. Será ?
rafael Diz:
8/04/09 às 17:57
felipe parabens cara , eu tinha mtas duvidas sobre tableless alias eu nunca consigui desenvolve um site intero com ele mais vendo suas videos aulas ajudo mto cara. parabens e continue com as vido aulas ae pra nois
Hugo Luiz Diz:
8/04/09 às 18:17
AHHHH Felipe vc é espetacular… cara imagina, imagina mesmo…
tudo oq eu sei de WebDesign é graças a vc e a galera do MX… + uma vez agradecendo por + um vídeo aula… parabéns… Melhor professor em toda minha vida.
VLWWWWWWWWWWWWWWWWWWWWWWWW
rafael Diz:
8/04/09 às 18:43
po felipe nao sei se é pedi demais da minha parte, mais sera q vcs nao teria algum colunista do mxmasters q entendesse e postasse algumas video aulas de java??
Carla Diz:
8/04/09 às 20:29
Comentando outra vez aqui hehe… é que eu queria dar uma sugestão de vídeo-aula envolvendo Tableless :]

É que recentemente eu tive uma curiosidade de como fazer uma imagem (de um topo, por exemplo) ocupar a largura toda da página. Como no site da Visie.com.br. Se você puder fazer uma vídeo-aula explicando como faz isso com Tableless… ;] Acho que é uma coisa que vai atender dúvidas de bastante gente!

Até mais!!
Bjs
Flavio Henrique Diz:
8/04/09 às 21:14
Muitoooo bommm ta de parabens
Felipe Cardozo Diz:
8/04/09 às 21:35
Fala ae Rafael, tudo bem?

Pedir nunca é de mais. Ainda mais quando se trata de conteúdo para o site.

Bom, seria uma ótima, mas creio que no novo formato do MX que estamos montando muitos bons colunistas irão entrar.

[]´s
Felipe Cardozo Diz:
8/04/09 às 21:36
Oi Carla, tudo bem?

Vou providenciar uma vídeo aula dessas em breve.

Bjão!
Kevin Diz:
8/04/09 às 21:41
Eu baixei os arquivos utilizados, e quando eu fui abri no google chrome no firefox e no Ie 8, o Sidebar fiica mau posisionado fica abaixo dp coluna meio. da uma olha ai..
Patrick C. Brito Diz:
8/04/09 às 22:37
Boa Felipe, eu fiz um curso de Xhtml e CSS e não tinha aprendido aquela dica de overflow, muito boa mesmo, agora é só usar nos proximos trabalhos, vlw!
Alex Rodrigues Diz:
8/04/09 às 23:40
E ai Felipão tudo bem, cara espetacular video aula , agora que estou aprendendo wordpress com o dvd q eu comprei daqui do mx masters eu estou ficando viciado em Tableless/CSS. E estou aguardando a 6ª aula do mini curso de tableless , aquele do layout do hotel.
Ai Felipão um abraço e parabens pela video aula e o site!!!
Marcos César - 18 anos - Brumadinho - MG Diz:
9/04/09 às 0:11
É isso aeeeee Felipão! já que o pessoal tá aproveitando pra pedir aquiiiiiiiiiii!!! que tal video aulas de wordpress??? super abração!
FORÇA SEMPRE!
Andre Lima Diz:
9/04/09 às 0:17
Pow Felipão tudo bom?? cara show de bola a aula ó, voce como sempre com uma didatica nota 10!. Pow cara vi o comentario ai do Rafael chega doeu na consciencia ele falando de java tinha ate deixando um comentario ai em uma video-aula sua que eu tava querendo fazer umas video-aulas de java ate olhei la o seja um conlunista que voce falou mas aconteceu uns problemas e nao deu pra mim preparar minhas video-aulas pra voces olharem mas acho que essa semana vai (esse cara so promete ne!) rssrsrsrs mas vou cumprir mano! ei mano mas uma vez PARABENS ao MX-Masters espero que voces estajam sempre por aqui nos ajundando value Felipão!!!!
Jairo Fontes / 20 Anos / Viçosa-MG Diz:
9/04/09 às 1:24
como diria o próprio Felipe Cardoso, MARAVILHA!!!!!
rsrs…
Valeu muito legal essa vídeo aula!!

Grande abraço!!
Allan Diz:
9/04/09 às 1:35
Não consigo baixar os arquivos ali do 4shared =|
Filipe Goes Diz:
9/04/09 às 18:23
Concordo com a Carla, eu particularmente adoro esse tipo de topo, e seria ótimo uma video aula desse aspecto!
Felipe a aula ficou ótima, as aulas de tableless e fireworks realmente, são as melhores e melhor aproveitadas com toda certeza!
Robson Alves/29 anos/ brasilia Diz:
9/04/09 às 19:23
Boa meu velho….
sem comentarios
o minimo que posso falar e continue assim e obrigado por mais uma video aula show de bola!
Anderson Nestor Diz:
9/04/09 às 20:58
Só falta pegar na minha mão pra arrastar o mause para mim, tá louco 100%, cara é como você estivesse aqui do meu lado. fino fino, obrigado de coração. [Felipe é o rei das vídeo aulas].
Fernando atosinski Diz:
9/04/09 às 21:26
Excelente, muito boa video aula, não gosto muito de usar float, mas vamos combinar que o css é muito bom, site com tabelas já era, nunca mais…………….
Eduardo Teodoro Diz:
10/04/09 às 0:51
É a primeira vez que comento aqui no MX, e vim aqui dar os parabéns pela a iniciativa de compartilhar o seu conhecimento com a galera. Você da aula como ninguém. Vc é fera!!!
Antes eu não sabia de nada mais agora com as suas video-aulas eu sei um pouquinho.
Parabéns.
Vlw!
israel cuiaba mt Diz:
10/04/09 às 1:13
Muito bom
achei muito bom esse
material muito bom projeto
flws…
André Nascimento Diz:
10/04/09 às 11:14
Fala Felipones blz….

Fala graaaaaaaaaaande massa MXmasters….

Gostei da vídeo aula, essas dicas de tablelles são dimais….

Sempre acho tutoriais na net sobre o assunto, mas em vídeo e com otima abordagem so aqui mesmo…

Felipão sucesso no studiomx….

Abraços e vamo q vamo!!!@
Allan Lima Diz:
10/04/09 às 13:35
Felipe quando começa a 2° temporada do Mx TV ? *-*
noturno Diz:
10/04/09 às 15:29
flw…. foi boa essa video aula..
Francisco Diz:
10/04/09 às 16:25
Felipe gostaria de saber se o layout (aquele da sequência de 1 a 6) que você usa esta nas aulas de tableless pode ser usado? Claro fiz varias modificações mudara quase que por completo o layout, apenas o topo esta parecido, gostaria de saber se você autoriza?
Everton Luiz Diz:
10/04/09 às 16:34
Fala Felipe, blz espetacular video aula, espero que continue sempre postando mais e mais, desculpe os outros colunistas mais tenho que falar Felipe a sua didtatica é fantasticamente melhor que eu ja vi.
Muito obrigado pelas videos e continue sempre assim!!!
Abraços!!!!!
Felipe Cardozo Diz:
10/04/09 às 18:07
Francisco, pode usar sim!

Aliás, irei terminar aquela vídeo aula.

[]´s
Felipe Cardozo Diz:
10/04/09 às 18:08
Valeu Everton! Obrigado pelos elogios!

[]´s
Josélio Diz:
10/04/09 às 22:55
Tenho aprendido muito com as suas aulas, valeu!

Eu passei a trabalhar com CSS a pouco tempo (antes só usava tabelas) e sempre que preciso colocar qualquer conteúdo em forma de lista (com campos e colunas. Exemplo: uma TABELA de preços) eu não consigo fazer em CSS. Tenho sempre que partir para a tabela. Como fazer isso sem usar as velhas tabelas(100% tableless). Acho que daria uma ótima vídeo aula. Fica aqui minha sugestão.

Um abraço
Danilo Diz:
11/04/09 às 1:02
Parabéns pela video-aula, sua didática é excelente Felipe, você explica de forma simples e fácil! E o desafio? Será que eu ganhei? enviei um email com o meu layout com tabelas. rsrs
webson sousa Diz:
11/04/09 às 6:04
salve salve galera!!!!!!!!! este slogn tds da net ja conhece, mais uma vez obrigado por partilhar seus conhecimento com a galera. feliz pascoa e continue a ajudar o conhecimento aiiiiiiiiiiiiiii felipão… forte abraço
David CHC Diz:
11/04/09 às 9:20
Josélio, esse é dos erros mais comuns para quem está começando a mexer com tableless (sem-tabela), quando dizemos “sem-tabela”, isso significa em relação ao layout (até o temos tableless pode dificultar as pessoas quando estão aprendendo, o ideal seria falar Web Standards – Padrões Web – que engloba muito mais coisa). Você deve usar sim tabelas para dados tabulares, como no seu exemplo que você falou(linhas e colunas). É comum as pessoas abolirem as tabelas quando estão aprendendo, mas não é abandonar, e sim usar-las semanticamente. Esse é o segredo, usar semanticamente. Exemplo, se vc tem uma tag para titulos, para que criar uma div pra colocar o titulo? E é a mesma coisa com as tabela. use-as sem medo, mas como o seu valor semantico.
piteruillian Diz:
11/04/09 às 11:51
Eu aqui de novo felipao voce esta de parabens cara otima video aula valew visito esse site todos os dia rs ate mais
Felipe Cardozo Diz:
11/04/09 às 14:28
Joselito, desenvolvi uma vídeo aula baseada em sua dúvida. Não sei se é bem o que você quer, mas pode ajudar.

[]´s
Leandro Diz:
11/04/09 às 20:51
Parabens Felipe, muito boa a video aula, esse é o melhor site de desenvolvimento web, o resoto é resto.

Abraço!! Leandro
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum MX - ochii Diz:
12/04/09 às 16:55
Yahoooooooooo!!
como sempre uma super video aula ñ sabia desse hack ainda flw
felipe.
Tava sumido do comentes aki tinham cortado minha net falata de pagamento rs mais ja to devolta pode deixar que a gente vai comentar aki e muito um exemplo é o tanto de comentarios que tem nesta pagina nem consegui ler todos geralmente tem consigo ler tudo mais hj ñ rs.
Ahh descobri um jeito de ficar menor os codigos vx deixou duas s com muito espaço no final delas na hora de fechar se diminuir isso fica menor kkk.
flw ai ate a next video aula
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum MX - ochii Diz:
12/04/09 às 17:00
Ahhhhhhhhh Felipe qual o nome do programa para
ver o layer em varios navegadores ñ intendi o nome muito bem
se possivel passa o link.
Felipe Cardozo Diz:
13/04/09 às 1:23
Gabeirl, é IE Tester.

[]´s
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum MX - ochii Diz:
13/04/09 às 11:32
Vlw Felipe
@_+
Eduardo Diz:
13/04/09 às 21:07
Joselito, criar um site em tableless não significa criar todo o site sem tabelas. Tabelas são a forma correta de apresentação de dados tabulares(como uma tabelas de salários ou os afazeres de sua semana).

Legal a série de vídeo Felipe, estou aguardando uma série de Wordpress

Abraços
Ery Diz:
14/04/09 às 13:31
Muito boa, essa video aula, nivel bem avançado, filé

cadê o aleixo ?
o mxwebtv volta ?

abraço a vcs Filipe e Aleixo.
rafael - belem-pa Diz:
14/04/09 às 22:42
seria interessante se você colocasse para download todas as video aulas deste curso que você ta dando continuidade desde não sei quando, fica mais organizado pra mim acompanhar todas as aulas desde o começo.

Conheci o site semana passada, e ja virei um fã. Parabens.
Antonielle Diz:
14/04/09 às 23:57
Felipeeee vcs são showwwwwwww rapaz…muito boa a vídeo aula…mais aki agora saindo um pouco de tableless..tem muito pouca video aula de PHP e gostaria de ver um sistema de notícias com data, hora e fotos, faz aí por favor…seria a melhor vídeo aula de PHP do MX Masters
Emerson Diz:
15/04/09 às 14:54
Ola Felipe, olha muito bem EXPLICATIVA essa sua AULA heim, gostei muito vc tem bastante paciência para EXPLICAR em detalhes que para quem esta aprendendo é FUNDAMENTAL, se torna até mais FACIL assim, imagino só VC fazendo um CURSO para o MX de TABLELESS sera MARAVILHOSO, Parabens e valeu …
Monster Diz:
15/04/09 às 14:56
Felipe muito boa a videoa aula, gostei muito, gostaria que tivese mais aulas assim de css.
vlwww
Dimas Diz:
15/04/09 às 19:12
Showwwwwww!!!…
Felipe Parabéns exelente vídeo aula
Muito muito muito bacana!!!
Abraço a todos e sucesso sempre.
Felipe Cardozo Diz:
15/04/09 às 22:07
Olá Emerson!

Obrigado pelas palavras!

O curso de tableless está sendo desenvolvido.

[]´s
Henrique Zanini Diz:
16/04/09 às 15:28
Cara, eu sou teu fã! voce ensina muito bem e facil de aprender..
pago pau! uhauha
abração e continua assim que estamos todos aprendendo muito

parabéns de verdade!

[]’s
Alex Rodrigues - 30 anos - Campinas-sp Diz:
28/04/09 às 18:43
E ai Felipão tudo bem, e as video aulas do mini cursinho de templates quando ela vão continuar e o MXWEBTV quando volta. Eu estou sentindo falta de vcs.
Mário Diz:
10/05/09 às 14:17
Como sempre, arrasando nas aulas.Felipe, se fosse possível, seria interessante disponibilizar estas aulas também para download, pois assim assistiriamos as mesmas em offline.
Um grande abraço!
Fernando Latosinski Diz:
14/05/09 às 10:13
Ai Felipe se voçê fizer uma classe em vez de div para o clear both, tambem resolve.
Ivens Bogos Diz:
14/05/09 às 16:48
Olá!
Primeiramente meus parabéns pelo trabalho, video aula de ótima qualidade!
Está me auxiliando na utilização de tableless (trabalhava com web no emprego antigo e lá os padrões eram todos usando tables), pois não tinha experiência alguma.
Estava fazendo uns testes em cima da sua vídeo aula e tudo estava indo bem até que travei num ponto. Estou tentando fazer uma espécie de “T” com o layout, uma div chamada TOPO (width auto com height 160px) e outra chamada de CORPO centralizada com width de 600px e width auto).
A TOPO irá ficar no topo da janela cruzando-a de fora a fora, enquanto a CORPO fica em cima da TOPO e vara janela abaixo.
A dúvida é, como fazer a TOPO ficar por debaixo da CORPO?
obs. dentro da CORPO existem mais 2 divs, mas creio eu que não interfira nisso, correto?

Desde já obrigado e parabéns mais uma vez!

[]s
márcio Diz:
14/05/09 às 21:08
Felipe Cardoso..show de bola tds essas video aulas mas…. vc poderia fazer uma video aula de como fazer pelo css.Modificar subpagina cem mexer na pagina inicial
grande abraço e continue assim
monique Diz:
15/05/09 às 21:11
realmente muito boa aula…. me ajudou muito obrigada!
Eric Echeverria Diz:
18/05/09 às 15:21
Felipe …
não sei se voce ja deu essa dica por ai, mas surgiu essa duvida e não consegui resolver …
é o seguinte..
tem como definir um css para um link em especifico?
quero definir um estilo para um link de “voltar”
não consegui deixar da maneira que eu quero pois quando adiciono esse link de “voltar” ele pega o estilo que eu ja defini para os links (nesse caso esta pegando a definição da barra de navegação)
preciso colocar esse link de “voltar” depois que o usuario clicar em enviar email. ai aparecera esse link de voltar.

me da uma luz ai .. please =)

obrigado!
Anderson Diz:
21/05/09 às 8:10
Tenho uma observação só.

Muito bom mesmo, so agora tive tempo de esse tutor depois de tanto tempo, está ótimo.

Na verdad minha observação é uma pergunta,em sites e com estruturas tableless usam um atributo display:block;
percebi que não usaste isso, mas funcionou muito bem.

Porque vc não usou este atributo?
Felipe Cardozo Diz:
21/05/09 às 11:27
Anderson, o display:block deve ser usado em listas.
Rodrigo Diz:
22/05/09 às 23:34
Pow maravilha, estive lendo os comentários acima, e la vai minhas mais sinceras desculpas, a galera MX tem colaborado muito com o meu aprendizado e de minha parte não fiz os comentários de agradecimentos…, mas desde já prometo agradecer sempre que possível, e aproveitando…. essa video aula foi demais muito boa mesmo, como o Felipe mesmo comentou um trabalho desenvolvendo em poucas linhas de códigos.., surpreendente eu mesmo pensei algo assim deve ser um livro com muitas linhas de códigos …. mais vlews por compartilhar connosco abraço…
webson sousa Diz:
23/05/09 às 7:44
obrigado pessoal da mxmasters,felipão estou comesando, gostaria de saber qual é este programa que vc esta usando para editar o site? abraços
Ricardo Diz:
23/05/09 às 10:35
Abriu minha mente para começar a mudar obrigado abraços
Felipe Cardozo Diz:
23/05/09 às 22:29
Webson, até no nome você tem “WEB”.hehe

Bom, usamos o Notepad++

[]´s
Cristiano Fetter Diz:
28/05/09 às 11:26
Muito bom cara, bem didático!
Abraço!
FOX Diz:
29/05/09 às 17:25
é felipe agora acho q todos nós entendemos oque é esse projeto que vc deixou em sigilo na época né….rsrsrsrs

não sei se eu to atrasado mais é o eskeleto do site mxmasters né

parabens abraço
Flash Diz:
30/05/09 às 3:00
vlws felipe!
aguardo ancioso a próxima aula!
Kevin Diz:
31/05/09 às 18:16
Olá Felipe, Gostaria de saber qual o programa de edição que você utilizou nessa video aula.
Desde já, Grato!
Leo Dias Diz:
4/06/09 às 23:21
Parabéns pela vídeo aula, muito boa mesmo. Estou adorando o site, comecei a estudar TABLELESS e achei que esse parece ser um ótimo caminho.
Vou comprar os DVDs de WORDPRESS e de TABLELESS.

Abraço
Flash Diz:
10/06/09 às 5:17
O Programa ultilizado na video aula e o Note Pad++
que pode ser encontrado gratuitamente pela internte.

Vlws felipe!
maicon Diz:
10/06/09 às 12:05
olá muiito obrigado

eu estudo css mas naum aprendo mto

com essa video aula aprendi bastante de verdade
Fernando Diz:
13/06/09 às 0:18
Show de bola. Melhor video aula que ja assisti
Guilherme Diz:
18/06/09 às 15:47
Cara mto bom me ajudou muitoooooooo….
vlw!
samara reis Diz:
23/06/09 às 11:28
perfeito
abrindo a cabeça
parabéns !!!!!!ae
omor Diz:
24/06/09 às 23:47
Olá, Felipe Cardoso suas video aulas são de uma explicação muito boa e você realmente faz o que gosta, acho que por isso que você faz tão bem, que Deus continue dando esta disposição agradável.
Marcello Diz:
30/06/09 às 16:12
Ola felipe, primeiro parabens pela aula, realmente sao bem explicadas, mas queria que voce me tirasse uma duvida, pois tenho um pequeno probleminha com essa parte de float no CSS… Utilizando o exemplo dessa aula, o quadro da div id=”little-col-left”, quando nao e determinado height para ele, ele some, no qual deveria continuar ja que existem ainda duas divs dentro dele? se alguem souber por favor me explica ai, ou envia um email pra mim…

marcello_wb@hotmail.com

vlw
David CHC Diz:
3/07/09 às 18:10
@Marcello, a div terá q ter um conteudo q não seja div, por exemplo, um paragrafo(p). Tenndo duvidas ainda, poste no forum, na seção de Tableless
joao Diz:
16/07/09 às 14:40
caraca to doido pra aprender a fazer um layout assim.. porem nem precisa de tantas colunas apenas 3 o topo, o conteudo e o rodape e algumas divs que vou colocar dentro do conteudo para colocar algumas imagens, o video nao ta funcionando.. que aconteceu?
David CHC Diz:
16/07/09 às 15:02
@joao, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o Firefox, vá em Ferramentas > Opções > Avançado. Escolha a Aba Rede, clique em Limpar agora. Veja se isso resolve.
Edmundo Diz:
18/07/09 às 11:19
ola felipe estou acompanhando suas video aulas a pouco tempo e tenho aprendido bastante, sou aluno do Curso de Redes pela Fatern Gama Filho em Natal/RN e estou aproveitando as férias para estudar.
Paulo Henrique Diz:
24/07/09 às 13:10
kra valew tinha algumas duvidas mais
vc esclareceu elas pra mim valeww msmo!
showw…
Fabio Wakasughi Diz:
1/08/09 às 6:33
Ola Felipao, parabens ai pela otima video aula, show de bola.
Parabens a todos do MX master s tambem.
Site melhor que este não existe.
Estava parado um pouco com site, mas depois que descobri o MX Master e suas videos aulas , voltei a me interessar mais e agora vou com tudo.
Parabens Felipe.
Fabio Wakasughi Diz:
2/08/09 às 6:20
Ola Felipe e como eu faco para as 3 colunas acompanhar a altura em 100%.
Vamos supor eu tenho 3 colunas todas com background branco e o fundo da body vermelho.
E se na coluna da esquerda tiver mais conteudo, as outras colunas nao vao acompanhar a altura da coluna esquerda e vai ficar parado com background da body.
Pana Diz:
3/08/09 às 15:58
Fera demais!
Parabéns, por uma bela vídeo aula e que continue assim..

(;
Beth Catalana Diz:
4/08/09 às 15:57
Felipe ou David,
maravilha as video aulas. Adquiri o dvd site completo. show.
Agora estou com um problema que acho que relaciona com o comentario do David.
Resumo: fiz um wrap (geral),
uma div esquerda e uma direita com floats.
a da direita tem uma div em cima (pra animação),
uma em segundo, abaixo da animação, onde coloco um script com data,
e uma terceira que é um pequeno corpo por causa do design que se prolonga com um background da div pai que é a div direita.
Até então, tudo bem.
Mas entre a data e o corpo, deu uma margem dupla no famoso IEca6
e isso to tentando resolver e sofrendo um monte.
Por favor, pode me clarear como resolver???
David CHC Diz:
4/08/09 às 16:19
@Beth Catalana, pra vc resolver isso, basta declarar um display:inline, nessas divs, isso é um bug do IE6, margens duplas quando vc usar o float. Mas basta declarar o display:inline q resolve
Judson Diz:
4/08/09 às 18:18
Muito bom o vídeo, mas… o body centralizado pelo css {text-align:center;} não funciona com Firefox 3.5.1.
Alguém tem alguma dica para resolver esse problema?
David CHC Diz:
4/08/09 às 18:35
@Judson, declara uma largura da div q engloba o site, e dpois coloque margin:0 auto; para centralizar a div ;
Beth Catalana Diz:
5/08/09 às 11:00
David.
segui sua orientação e não deu certo. poderia ver pra mim? quando coloquei display:inline, no safari sumiu o backgroud da div, só aparacendo o da div pai e no ie6 continuou com o problema, então tirei.
agora resta: o que é que eu faço? pode enviar seu contato?
Beth Catalana Diz:
5/08/09 às 11:02
David, o css é:
#col-right{
background:#fofofo;
width:635px;
float:right;
}
#animacao{
width:635px;
float:top;
height:265px;
}
#barra{
background: url(assets/bg-barra.jpg);
width:635px;
height:52px;
}
#apres{
background: url(assets/bg-apres.jpg) no-repeat;
align:center;
}
#apres h1{color:black;
font:14px arial, verdana, tahoma;
David CHC Diz:
5/08/09 às 11:06
@Beth Catalana, não existe float:top; Se está sumindo o background, coloque uma div depois da #col-right, e declare ela com clear:both; E nas div’s q vc utilizar o float e o margin e vc declara display:inline;
Beth Catalana Diz:
5/08/09 às 11:35
olhe, refiz tudo.
continua o bug do ie6.
veja la:www.drfranciscolima.web.br.com

aqui vai o css completo:

*{padding:0;margin:0;}
body{
background:url(assets/06original.gif);
text-align:center;
font-family:Arial, Helvetica, sans-serif;font-size:12px;
}
#wrap{
background:url(rodape/bg-geral.gif) top center;
width:799px;
text-align:left;
background-repeat:repeat-y;
margin:0 auto;
}

#col-left{
background: url(rodape/rodapesidebar.gif) repeat-y;
width:164px;
float:left;
align:top;
}
#topo{
width:164px
;height:135px;
}
#menu{width:164px;}

#col-right{
background:#fofofo;
width:635px;
float:right;
display:inline
}
#animacao{
width:635px;
height:265px;
float:right;
display:inline;
}
#barra{
background: url(assets/bg-barra.jpg);
width:635px;
height:52px;
float:right;
display:inline;
}
#apres{
background: url(assets/bg-apres.jpg) no-repeat;
float:right;
display:inline;
}
#apres h1{color:black;
font:14px arial, verdana, tahoma;
}
#divclear{clear:both;}

#rodape{
width:799px;
height:35px;
text-align:left;
margin:0 auto;
}
Beth Catalana Diz:
5/08/09 às 11:37
inseri a divclear pra depois do colright e continua o bug
Beth Catalana Diz:
5/08/09 às 16:23
David CHC,
troquei a div que tinha table de duas linhas por 2 divs
mesmo assim, o problema do ie6 continua
please!!! se conseguir me dar uma luz, agradeço imensamente.
E aumenta a cada dia a minha rejeição com a microsoft.

grande abraço.
Beth Catalana Diz:
6/08/09 às 10:43
David,
se precisar te mando o arquivo todo por email.
abç
David CHC Diz:
6/08/09 às 19:37
@Beth Catalana, desculpa a demora em responder, é q fico mais no VAB, do q aqui no MXmasters .A única diferença q vi no ie6, é a uma lista q aparece, isso na div#idioma, coloque overflow:hidden; O q ocorre é q o IE ele interpreta o height com vc um min-height, aumentado a altura de tive um “conteudo” a mais.
Beth Catalana Diz:
7/08/09 às 10:27
Tenho mais uma dúvida. Com o php, eu indexo todas as subpáginas na index. Se eu quiser criar subdivisões nessas subpáginas mas a cara da index vai ser diferente, como faço? crio uma index2? e indexo a nova divisão a ela?
David CHC Diz:
7/08/09 às 11:19
@Beth Catalana, vc deve tá fazendo com query string, o trabalho com query string para inclusão de pagina, te finalidade de vc apenas inserir o conteudo, pq terá partes q não serão modificado toda a hora, fazendo assim template. Mas se vc tiver q mudar toda a estrutura do site, pra algumas página, então vai ter q mudar a maneira q vc deve tá construindo. Para inserir subsub-pagina, vc terá q modificar o script para inclusão, verificando primeiro se existe sub conteudo, e depois se não existir, inserir o conteudo, exemplo:

[a href="?pagina=servico&sub=item"]Sub Item[/a]

no php:

//verifica se existe as página
$pagina = (isset($_GET['pagina'])) ? trim($_GET['pagina']) : ”;
$subpagina = (isset($_GET['sub'])) ? trim($_GET['sub']) : ”;
//indica a pasta
$pasta = ‘arquivos’;

//verifica se o conteudo não está vazio e se o arquivo existe
if(!empty($subpagina) && file_exists(“$pasta/$subpagina.php”)){
require(“$pasta/$subpagina.php”);
}
elseif(!empty($pagina) && file_exists(“$pasta/$subpagina.php”)){
require(“$pasta/$pagina.php”);
}else{
require(“$pasta/home.php”);
}

Claro q esse é apenas um exemplo, é necessário fazer mais verificações para possiveis ataques. Mas é uma base pra vc implementar
Beth Diz:
11/08/09 às 15:15
David, seguindo nesse assunto. Tenho um site. Nele vai ter uma versão inglês. A versão inglês deve ter uma nova index pois os botões de acesso deverão ser em inglês, lógico que ao clicar na bandeira eua, a pessoa será redirecionada ao homeeua.php – mas a index dessa homeeua.php pode ser o que?? – e veja, todo o site em inglês vai seguir essa nova index, ou index2, sei la. o que me orienta, ou qual video aula tem esse assunto?
obrigada de antemão.
David CHC Diz:
11/08/09 às 16:08
@Beth, seria uma nova página em relação ao conteudo, em sim. Vc pode criar arquivos separados, para o include, exemplo:

topobr.php = aqui é o topo em portugues (cabeçalho)
topoen.php = aqui o topo em inglês

menubr.php = aqui ficaria o menu portugues
menuen.php = aqui ficaria o menu em inglês

homebr.php = aqui fica o conteudo da home em portugues
homeen.php = aqui fica o conteudo da home em inglês

rodapebr.php = aqui ficaria o rodape em portugues
rodapeen.php = aqui ficaria o roda em inglês

dividimos o template da index em 3 partes q são fixas praticamente, tem pouca mudança, e quando mudam mexe em todo o layout. Nesse caso vc pode trabalhar com o link assim:

[a href="index.php?pagina=homebr&lang=br"]Portugues[/a]
[a href="index.php?pagina=homeen&lang=en"]Inglês[/a]

Repare q terá duas variaveis q servirão para inclusão do arquivo, nesse caso pagina, e q idioma, no caso lang
Agora basta verificar, e chamar esses arquivos de acordo com o lang, exemplo:

http://pastebin.com/m2cae8e5f

Dessa maneira vc pode com css, ee outros arquivos, se forem especifico para determinada idioma
Cristiano Diz:
20/08/09 às 0:20
Excelente!!!

Estou começando agora com tableless! Antes somente com tabelas e realmente!!! Muito mais limpo!!!

Parabéns pela vídeo aula!!!!

Abração!
Juninho Diz:
24/08/09 às 23:11
Olá Felipe!
cara vc não sabe o quanto suas videos aulas me ajudam, eu sou novo nessa area, começei a fazer o curso de web mas admito a voçê que aprendo mais aqui no MX com suas videos aulas do que no curso, vc sabe como ensinar cara, continue assim, agradeço muito e vamos que vamos! NO TABLE YÉS TABLESS!
Paulo Diz:
29/08/09 às 11:34
Nossa vlw muito.
eu nao sabia nada de css
agora tenho uma deia do q é o css
vlw cara….
Manuelle Diz:
24/09/09 às 18:48
Oi, amo esse site, me ajuda bastante. Mas o vídeo ñ ta carregando, o que há? PeloamordeDeus eu preciso dessa aula. Bj
David CHC Diz:
3/10/09 às 10:38
@Manuelle, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o Firefox, vá em Ferramentas > Opções > Avançado. Escolha a Aba Rede, clique em Limpar agora. Veja se isso resolve.

Novas video aulas estão no http://www.videoaulasbrasil.com.br/
Pierro Rosa Diz:
8/10/09 às 11:30
Felipe meu caro, posso estar sendo repetitivo, muita gente aqui falou sobre mais este espetacular trabalho ai que vc desenvolveu e ensinou a muitos como fazer, porém, eu gostaria de deixar aqui meu imenso agradecimento por tudo que o site mxmasters.com.br, tem proporcionado no meu aprendizado e em especial a vc meu caro Amigo, apesar não nos conhecermos, ja te considero como um grande amigo, proporcionou a mim um crescimento no desenvolvimento de sites fantastico, com toda a certeza mais de 80% do que sei em relação a fireworks, dreamweaver, tableless e style sheet aprendi contigo nas suas video aulas. Mais uma vez meu muito obrigado e meu respeito por vc e pelo site mxmasters do qual eu tenho um grande carinho. Ah logo estarei adquirindo um ou mais dvd’s, claro que pela qualidade do material, que a julgar pelas video aulas gratuitas deve ser deuma qualidade imensa, mas, também para ajudar de alguma forma a quem me ajuda a tanto tempo.
Que deus abençoe este site, e a todos que dedicam ai seu tempo pra ajudar a gente, e que ELE abençõe muito vc, para que possa continuar a nos ajudar.
Até breve abço
carlos Diz:
8/10/09 às 13:40
ex:

um layout de 3 colunas

nome da 1 #coluna1{}
#coluna2{}
#coluna3{}
no stilo css

no arquivo html tem que colocar o codigo

ate ai tudo bem minha duvida é o seguinte
vamos supor que essas colunas estar no index.html

eu posso colocar esse mesmo codigo

no arquivo contato.html

e so mudas os conteudos dentro de cada divs
ou tem que renomear cada uma criando outros codigos com outras divs

desde ja agradeço pela colaboraçao
carlos Diz:
8/10/09 às 16:08
como faço para deixar uma imagem na url ingual a
do mx massters antes do http
David CHC Diz:
9/10/09 às 10:47
Seria o FAVICON, veja video aula do Gustavo Guanabara, que vai te ajudar:

http://www.guanabara.info/2008/07/curso-html-aula-extra-crie-um-favicon/
David CHC Diz:
9/10/09 às 20:43
@carlos, se tive a mesma estrutura, vc vai usar as mesmas div’s com as nomeclaturas q vc usou.
Gustavo Martinez Diz:
12/10/09 às 10:45
Não sei se vocês terão tempo para ler meu comentário, mas foi uma das melhores vídeo aulas que eu ja vi em toda minha vida. PERFEITO.

PARABÉNS, QUE VOCES CONTINUEM ASSIM!

MUITO BOM MESMO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Fábio Duarte Diz:
20/10/09 às 14:00
Estou iniciando em CSS, e acredito que com essa video aula, finalmente vou abandonar as tabelas! Tenho dúvidas sobre o posicionamento de outras div’s dentro destas ja criadas, mas vamos com calma! MUITO BOM o tutorial, parabéns !!!
JUNINHO LOPES Diz:
4/12/09 às 21:10
Oláa … eu estou tendo problemas ao assistir seu video no videolog , nao foi somente nesse em alguns outros tambem deu erro.So no youtube q estou vendo legal,gostaria q resolvessem esse problema ou pelo – me informasse pq nao estou conseguindo ver!

Desde ja oBrigado!
David CHC Diz:
5/12/09 às 7:18
JUNINHO LOPES, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o No Firefox, aperte CRTL + SHIFT + DEL, e deixe marcado apenas cache, e clique Limpar Agora Veja se isso resolve.
Pedro Lúcio Diz:
22/12/09 às 2:28
Olá meu amigo,
Gostaria de saber uma coisa. Eu comprei um video aula de wordpress e já comprei o vol.2 para que eu possa desenvolver o meu próprio lauoyt.
Aí vai a pergunta. Eu tenho como criar o meu layout no fireworks e depois mandar pro wordpress atravez de sei lá o quê..rsr inserindo o meu arquivo lá, de menu, de topo, de barra lateral, e por aí vai, enfim…mas posso fazer assim ou até isso eu vou ter que fazer em css ?
valew..
Agradeço desde já.
David CHC Diz:
22/12/09 às 7:55
@Pedro Lúcio, vc vai ter q desenvolver o html e css para pode trabalhar com Wordpress, não tem como recorta no fireworks e mandar direto o codigo, ter até tem, mas não é recomendado. Faça seu codigo na unha, pra vc desenvolver site de qualidade.
Pedro Lúcio Diz:
22/12/09 às 15:27
Valew meu amigo David CHC.
Mas fiz essa pergunta por isso aqui óh…
No site da nextel, tem um efeito maneiríssimo, que só pode ser feito no ADOBE FLASH, você clica no aparelho e arrasta, que ele vira 360º. É maneiro, por isso perguntei se dava pra fazer certas criações mais arrojadas, nos programas pertinentes, depois mandar prp
WP, tendeu ? vou te mandar o link pra você ver.http://www.nextel.com.br/NextelWebSite/aparelhos/vitrine-aparelhos/i9ferrari.aspx?WT.ac=vitrine_i9 Ferrari
Falar nisso, aproveito pra perguntar se o rapaz que ensina a mexer no FLASH, ensinaria a fazer um efeito desse, porque é chocante demais.
Valew meu amigo..
Um abração..
E obrigado mais uma vez..
David CHC Diz:
22/12/09 às 15:56
@Pedro Lúcio, vc pode incluir outros elementos no wordpress, como animações em flash, entre outras coisas, o q não interessante é criar no fireworks, fatear e mandar como ele assim, já montado o html, mas vc pode criar efeitos no flash, e incluir no wordpress sem problema algum.

Sobre as aulas, vc pode deixar um recado no VAB ou Forum para Michel Araujo sobre sugestão da video aula
Pedro Lúcio Diz:
22/12/09 às 21:21
Isso aê meu amigo, era o que eu imaginava mais ou menos.
Valew mesmo. Como sempre, respostas precisas.
Obrigado e parabéns, meu amigo.
Valew.
Luiz Correia de Araujo Diz:
22/12/09 às 22:34
Bom Trabalho!
Resolvi o problema do layout do rodapé com:
position:absolute;
top: 530px;
No meu caso, 530 foi a altura somada de todas as (alturas) height das divs acima do rodapé. Não é uma solução dinâmica pois se houver aumento do conteúdo e consequentemente do height de alguma div além dos 530px, será preciso aumentar o valor do top na div rodapé,

[]s,

Luiz
Nilo Vieira Diz:
24/12/09 às 0:32
Muito Parabens….
Gostei pacas tou aprendendo pacas com vc’s….
Feliz NataL… E pROSPERO aNO nOvO
LUCASMCARLOS Diz:
16/01/10 às 18:03
Parabens Felipe Cardozo, essa video aula foi muito boa, realmente aprende, continue.. t+
Maurão Diz:
21/01/10 às 23:45
aquele esquema para explicar o margin: topo direita baixo esquerda

é mais fácil explicar que funciona igual o relogio !
Pedro Lúcio Diz:
31/01/10 às 15:46
Falaê meu amigo David CHC,
Puxa vida cara, vc já me deu um bizu com relação a um fundo que eu fiz com imagem, ou seja, eu criei uma imagem e coloquei como o meu background. Me deu o bizu porque eu não conseguia colocar nada em cima dele. Falou algo mais ou menos assim…me perguntou se eu coloquei dimensões na imagem que eu criei. Eu disse que sim e vc disse que talvez o problema fosse esse. Mas me diz uma coisa…porque é que eu não consigo colocar os blocos em cima dele e mais, até a minha imagem que eu criei, quando eu fatio, salvando apenas 1px. e depois abro lá no css, ela distorce, vira uma outra imagem, tamanha dostorção. Moral da estória, Há como eu criar um desenho pra colocar de fundo sem estabelecer um tamanho ? porque o meu site lá no css, eu tô fazendo fluído, sem WIDHT.
Deu pra entender o que eu expliquei meu amigo ? se não deu, eu escrevo de novo explicando de uma nova maneira.
Valew..
Obrigado desde já.
Um abraço.
Pedro Lúcio Diz:
31/01/10 às 15:52
Continuando…
Tipo, uma vez te mandei um site que eu gostei, mas mandei pra perguntar sobre outra coisa. Sobre um efeito que tem na foto dos telefones, que vc clica segura e arrasta que ele gira e ainda abre o flip. Mas o que eu escrevo hoje, é apena para fins de mostrar o layout mesmo que é arrojado, sem aquela coisa amarrada em 2 ou 3 colunas, topo e rodapé, sabe…ele é diferente. Ou será que ele é marcado em colunas e eu não tenho bagagem pra perceber ainda. Pode ser isso tb. Vou mandar o link só pra vc ter uma idéia do layout.
http://www.nextel.com.br/NextelWebSite/quero-nextel.aspx
É esse aí meu amigo.
Valew mais uma vez.
David CHC Diz:
31/01/10 às 16:06
@Pedro Lúcio, na verdade é dificil dizer o que ocorre, se não ver a página. Na verdade, quando colocamos o elemento via background css no body, não afetará nada no nosso documento, só se vc colocar a imagem direto, sem ser por CSS, q assim ele vai ocupar um espaço , sendo pelo css esse espaço não será ocupado. Exemplo de um site q estou fazendo:

http://mariliaweb.com.br/david/fatima/

São duas imagens de fundo, uma colocando pelo seletor html, e o outro body:

html, body{height:100%;}
html{
background:#122545 url(../images/bg-repeat-body.jpg) repeat-x center top;
}
body{
background:url(../images/bg-body.jpg) no-repeat center top;
}

Repare que ele não vai ocupar nenhum espaço, interferindo no fluxo dos outros elementos, como coloquei as divs para o posicionamento.

Ressaltar, se vc colocar via CSS, vc vai consegui colocar elemento “em cima dele”. Se vc colocar via codigo, com a tag img, vc terá q utilizar o position:absolute e o z-index para realizar essa tarefa.
David CHC Diz:
31/01/10 às 16:15
Não tinha visto sobre a outra pergunta, rs.

O layout realmente é bonito, mas trabalha com elementos blocos, só que na horizontal. Sabendo trabalhar com CSS vc consegue fazer qualquer coisa.

Um dica pra vc não ficar “amarrado” a essa estrutura, é pesquisar por galerias de css (gallery css), vc poderá ver como é flexivel trabalhar com CSS, e fazendo trabalho bonitos
Pedro Lúcio Diz:
1/02/10 às 1:40
Valew meu amigo…
Como sempre, RESPOSTA PRECISAS !
Mas tu viu o site ?
Vc vê que só tem uma imagem linda de background no body e os blocos todos soltos por cima.
Não segue aquele padrão, né ?!
Valew meu amigo..
Vou tentar aqui…
Abraços.
David CHC Diz:
1/02/10 às 7:08
@Pedro Lúcio a ideia ter uma imagem maior com efeito, e tbm com basicamente a mesma cor.
Pedro Lúcio Diz:
2/02/10 às 3:04
Falaí meu Amigo David CHC..
Tô te mandando aê um layout que tô desenvolvendo em html/css. Lembra que te falei dos blocos soltos, nãp tecnicamente falando, com o FLOAT..rsr mas visualmente mesmo, como um cliente/internauta que acessar. Assim, sem aquela regra de topo, menu barra lateral, box central e barra lateral direita e rodapé….mas algo aleatório. Uns blocos até colados um no outro mas soltos, outros separados, cada um com uma animação se for o caso ou um simples frame de fireworks mesmo. Enfim, mas sem aquele esteriótipo do site. Só que vou aproveitar tb pra te falar dos problemas que tô enfrentando. O “bloco direito”um que é o verdinho, eu não consigo levantar ele mais um pouquinho de jeito nenhum. Se bem que tô usando apenas as propriedades “float e margin”. Será que é aí que entra o seu bizu ? pra utilizar o “position” ?
file:///C:/Users/Pedro%20L%C3%BAcio/Desktop/css/site-arrojado/index.html
taí o layout meu amigo.
Uma abração.
Fica com Deus.
David CHC Diz:
2/02/10 às 7:51
@Pedro Lúcio, realmente pra te ter uma noção, eu terei q ver, pq é bem complicar saber o comportamento das coisas. Vc colocou um link para seu computador, vc terá q publicar em alguma hospedagem gratuita, ou enviar http://www.4shared.com/ ou outro similar pra poder baixar.
Pedro Lúcio Diz:
2/02/10 às 15:05
Ah..valew meu amigo..eu não sabia disso. Vou providenciar.
Brigadão mais uma vez.
Pedro Lúcio Diz:
5/02/10 às 1:06
Falaí meu amigo DAVID CHC…
Puxa vida cara, eu tava vendo uma aula do Ricardo Aleixo, de como criar um site diferente, no fireworks. Ele faz uma mesa com uma xícara, umas canetas, borracha e uma agenda em cima. Muito maneiro. Aí vai a pergunta. Eu consigo fazer um site exatamente assim, ou seja, criando tudo no fireworks, salvando em GIF ou JPG, de acordo com o que puder ser feito. Claro que fatiando jamais, afinal, já conversamos sobre isso. Vc me explicou muito bem e eu já entendi. Mas quero saber se é isso, se posso fazer isso…se basta abrir aquele background lá no css, depois Abrir um blocão com os cantos arredondados e depois colocar essa imagem da agenda emcima. a da xicara em cima, tudo no css, claro, enfim….
Deu pra entender a minha pergunta meu amigo ?
Valew…fico no aguardo.
Muito obrigado.
Um abraço.
David CHC Diz:
5/02/10 às 7:47
@Pedro Lúcio, vc pode fazer aquele layout, sem problemas.
Pedro Lúcio Diz:
6/02/10 às 1:37
Valew meu amigo.
Vindo só pra agradecer.
Brigadão mais uma vez.
Vou tentar aqui..
Valew..
Um abraço.
Pedro Lúcio Diz:
7/02/10 às 3:32
Puxa vida DAVID…
Esse troço deve estar de sacanagem comigo cara..rsrs
Olha só. Vou te dar o passo-a-passo do que eu fiz, com relação ao layout do Ricardo Aleixo.
Ok, vamos lá…
Primeiro, fiz um box do tamanho do meu palco. ISso, lá no fireworks. fiz um box de 900 por 800. Coloquei uma textura lá do pattern, fatiei com 1px e no IMAGE PREVIEW, salvei como JPG. OK, tudo bem até aí. Fica aquele filetinho pra poder abrir lá no navegador depois que colocarmos no código certo ? ERRADO..rss certo sim, no de vcs. No meu não fica DE JEITO NENHUMMM…pior que não dá nem pra dizer que não tento de tudo. Porque tento..rss
Tento colocar o “repeat, o repeat-x, o repeat-y, o no-repeat-x, o no-repeat-y” na width, eu coloco 100%, já que não quero que tenha um tamanho certo, mas siga o navegador. Enfim…
Reparou que o problema é logo no início ? com isso, não consigo caminhar..paro por ali memso tentando colocar o background.
Valew meu amigo.
Obrigado por qualquer ajuda que puder dar.
Um abração..
Pedro Lúcio Diz:
7/02/10 às 3:37
Carambaê..rss
Acabou que eu esqueci de dizer o que acontece, como é que fica.
Entrar a imagem entra, o problema é que ela se transforma em outra coisa…rss até bastante legal, meio surreal é verdade mas legal tb…rsr só que não foi o que eu escolhi, o que eu criei, tendeu ?..rsrs
Mas entrar entra, eu só não consigo expandí-la, tendeu ?
Vou nas aulas que vejo vcs expandindo esas imagens, faço igualzinho, te juro. Mas nãooooo vaiiiiiii..rsr comigo não..rsrs
Valew meu amigo…
Abração.
David CHC Diz:
7/02/10 às 8:32
@Pedro Lúcio fica complicado saber o que tá ocorrendo sem ver. Faz o seguinte, vá nesse site : http://www.110mb.com/ , e ele é uma hospedagem gratuita, e sem propaganda. Se cadastra, e coloca seu site lá, é bom pra vc fazer testes. O site é em inglês, mas usando o tradutor do google não fica tão dificil cadastrar
Pedro Lúcio Diz:
8/02/10 às 1:53
Valew meu amigo..
Vc tem razão, por isso já fui lá fazer.
Tenho que esperar agora 1 hora pra autorizarem.
Valew mesmo meu amigo..
Um abraço David.
Pedro Lúcio Diz:
9/02/10 às 2:18
Falaí David, meu amigo..
Tem como eu te mandar o PNG cara…
Porque eles até agora nã oentraram em contato comigo.
Eu faço o seguinte…faço a criação no fireworks e te mando. Te mando e te explico. Com certeza vc vai entender.
Pra onde eu mando ?
Valew meu amigo..
Um abraço.
David CHC Diz:
9/02/10 às 7:37
@Pedro Lúcio manda para david[arroba]videoaulasbrasil.com.br
Pedro Lúcio Diz:
18/02/10 às 3:43
Falaí David, meu amigo !
Te enviei o e-mail..
Recebeu aê ?
Valew meu amigo…
um abração e obrigado..
Alisson Diz:
6/03/10 às 17:16
Felipe, muito boa a video aula… gostei mesmo.
Mas queria saber como colocar um degradê pelo css pra dar uma melhorada no visual do site.
Se tiver como ajudar agradeço.

valeu!
David CHC Diz:
6/03/10 às 17:50
@Alisson, no seu editor de imagem preferido ( vc pode usar o photoshop, fireworks, illustrator ), vc cria uma imagem, como uma altura relativa, vai depender do seu site, se vc quer q o site fique em baixo branco, então na imagem, em gradiente lienar, vc colocar a com em cima, e em baixo coloca o branco. Depois fazer a sua imagem, vc recorta um filete, pode ser 5px de largura. E no CSS vc manda repetir a imagem na horizontal, exemplo:

body{
background:url(imagens/bg-fundo.jpg) repeat-x;
}
Marcio Diz:
5/04/10 às 23:31
Pô Felipe, muito bom cara, eu adoro as suas videos aulas, tanto as suas como as do David, show de bola mesmo! Assisti o video mesmo mas para ver a maneira que você iria montar essa estrutura, gostei! E apenas uma duvida. Se você ao inves de overflow:auto;, coloca-se assim:

html, body {height:100%}
#wrap{min-height:100%;}
* html #wrap{height:100%}

daria certo tbm né? Abraços
David CHC Diz:
6/04/10 às 9:13
@Marcio, eu nunca teste essa solução, eu sempre uso um elemento com a declaração clear:both, já que o intuito é anular o float de algum elemento. Mas é sempre bom encontrar outras alternativas.
Franklin Diz:
4/05/10 às 22:57
Pq nao consigo ver o video inteiro?
David CHC Diz:
5/05/10 às 8:25
@Franklin, tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o No Firefox, aperte CTRL + SHIFT + DEL, e deixe marcado apenas cache, e clique Limpar Agora. Veja se isso resolve. Caso isso não funcione, tente atualizar o flash player.
Franklin Diz:
9/05/10 às 12:29
@David CHC , Valew deu certo!! Brigadão!!
haa e é uma ótima video aula!
gosto de todas as video aulas dele!
(fã) rs

vlew Abraço a todos da MX!!!
Rafael Avelino Diz:
10/05/10 às 17:55
Excelente video aula tirou a maioria das minhas duvidas sobre tableless porque tinha assistido a outra video aula que ensinava em tabela mais sei qu edemora bem mais para carregar.
Continue asim Palmerense!!rsrsrsrs
Paulo Cesar Ramos Diz:
5/06/10 às 0:08
“Parabens!!!!!!!! Belissimo video aula sobre tableless e ao mesmo tempo como trabalhar com divs….. “
William santiago Diz:
5/07/10 às 19:02
mas se meu layout não for convencional
não tem como usar div né?
nesse caso só tenho q usar tabela?
David CHC Diz:
5/07/10 às 19:26
@William, vc pode desenvolver qualquer layout com div, e com elementos semanticos.
William santiago Diz:
6/07/10 às 9:24
se então eu desenvolver meu layout com div (layout não convencional) tera q ir tdo ele sem fatiar
pq eu uso fireworks na parte do design depois fatio e vou p/Dw usando tabela
embora eu só use tableless na formatação minima letras,cores.
pq dizem q hj não é tão utilizado a tabela? teria como eu fatiar tdo o site desenhado e usar tdo em div?
David CHC Diz:
6/07/10 às 9:49
@William, as tabelas tem q ser usadas pra seu verdadeiro fim, q é dados tabulares, e não estruturação de um site. O ruim de utilizar o fireworks pra fatiar e gerar o html, é q ele gera muito “lixo”, codigo desnecessário, deixando seu site pesado.

Perguntas e respostas:

Como vou fatiar meu site agora?

Na verdade, vc vai fatiar apenas as partes q interessante, a montagem será feita por vc, criando o HTML.

Mas pra q terei q criar o html, e o fireworks faz isso pra mim, isso é perder tempo?

Na verdade, se vc colocar na balança, deixar o fireworks criar para vc, ele criará um codigo sujo, cheio de imagens sem necessidade, deixando seu site pesado, dificil de modificar caso necessario. E a partir do momento q vc cria seu codigo, vc tem um controle maior, e deixa seu codigo limpo, logo mais leve.

Mas sites feitos assim são todos quadrados, são todos iguais?

Aplicação dos Padrões Web não força vc fazer sites quadrados, mas sim o conhecimento do desenvolvedor. Basta pesquisar por gallery CSS no google q vc verá exemplo de sites muito bonitos usando os Padrões.

E quem usa esse lance de Padrões Web?

Os grandes portais, como globo, ig, uol, terra, r7, entre outros já adotam os padrões para construções de sites.

O q tenho q aprender para utilizar tbm?

Aprenda HTML e CSS, principalmente digitando seu codigo, no começo pode aparecer dar mais trabalho, mas isso é compensado na hora da manutenção do seu site.

Como começo?

Veja a seção tableless do MxMasters – http://www.mxmasters.com.br/categoria/tableless-css/
E tbm do VìdeoAulas Brasil – http://www.videoaulasbrasil.com.br/categoria/tableless/
William santiago Diz:
6/07/10 às 10:44
brigadão ae kra mas…tipo
eu mexo com htm e css mas o q aconteçe é o seguinte:uso htm p/formularios e p/textos caixas divs tal e css formatação, mas fica feio pq não posso colocar um degradê ou efeitos visuais por isso gosto do fw
William santiago Diz:
6/07/10 às 10:47
po kra mas vlw pela ajuda
me add no msn ae napoleart@hotmail.com
faço curso tec de webdeveloper mas to achando mto superficial
David CHC Diz:
6/07/10 às 10:49
@William, vc pode continuar usando o Fireworks para criar a imagem, mas para criar a estrutura vc vai usar o HTML, e aparencia vc aplicar com CSS. Dá uma olhada nessas duas video aulas no VAB ( ela terá continuação) e ter dará uma noção melhor

CSS + XHTML 1.0 STRICT + VALIDAÇÃO – http://www.videoaulasbrasil.com.br/tableless/css-xhtml-1-0-strict-validacao/

CSS+XHTML 1.0 STRICT+VALIDAÇÃO – Parte 2 – http://www.videoaulasbrasil.com.br/tableless/cssxhtml-1-0-strictvalidacao-parte-2/
William santiago Diz:
6/07/10 às 10:51
vlw
José Carlos Diz:
23/07/10 às 13:33
to com um pequeno problema aqui, dentro da big-col-left, eu não consigo ajustar o width, por exemplo, a coluna feature e a little-col-left que estão dentro da big-col-left, elas seguen o width da big col left, por mais que no css eu coloque o width, ele fica o mesmo, como posso ajustar isso? OBS: estou usando dreamweaver. obrigado.
João Feck Jr. Diz:
26/07/10 às 14:50
Felipe, muito show essa sua video aula, porem estou começando agora com css e tableless e no meu layout a coluna sidebar esta repetindo as 2 ultimas letras na div wrap no IE6, pode me ajudar???
David F. Chavier Diz:
17/08/10 às 23:16
Excelente aula. Eu recomendo mesmo, afinal não é qualquer site que mostra como cria um layout com tres colunas.
Rodrigo Macedo Diz:
19/08/10 às 10:32
Excelente video-aula.
Até para não-designers, os conceitos foram muito bem explicados.
Meus parabéns, Felipe. Excelente trabalho!