21/04/2009 - 20:06 > 14.554 Visualizações > 78 comentários

Tableless – Catálogo de produtos em listas

Salve, salve rapaziada. Felipe Cardozo na área com mais uma vídeo aula. Hoje, aproveitando a dúvida do internauta Josélito, irei mostrar como podemos resolver problemas que em princípio somente as tabelas do html resolveriam. Trabalharemos com listas (ul e li) e veremos que com uma boa prática no CSS podemos desenvolver projetos dinâmicos e nos padrões.

Bom estudo!

Errata: A list-style deve ser definida na UL e não na LI.

Posts relacionados

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

78 respostas para 'Tableless – Catálogo de produtos em listas'

Matheusk9 Diz:
21/04/09 às 20:15
bacanérrimo Valeuuuu..
fanzaço seu Felipones fuiisss…
Parabéns mesmo!!!
Matheusk9 Diz:
21/04/09 às 20:17
A propózito podem me matar uma duvida felipão, qual é o melhor formato e o mais rápido que o videolog pode assim converter ou melhor publicar ??? quanto tempo leva mais ou menos???
EU PUBLICO EM FORMATO MP4 E DEMORA MUITO QUAL VC ACONCELHA UM QUE DEMORE POUCO…. VALEU!!!
Joao carlos Diz:
21/04/09 às 21:25
Olaaa so o top aqui huahauhau eu to a todo momento no site.. vendo algo de novo !!! hauhauhau monta o chat em php … abração !!!
Marcos César Ventura Maciel - 18 anos - Brumadinho - MG Diz:
21/04/09 às 22:19
Ótima video aula! Muito bom Felipe!!! mais sei lá que tal alem de conteudo pra iniciantes… conteudos um pouco mais avançadosssss!!! super abç!

FORÇA SEMPRE!!!
Felipe Cardozo Diz:
21/04/09 às 22:22
Matheus, beleza?

Depende do tamanho físico do arquivo. Mas eu geralmente mando em wmv.

[]´s
Alex Rodrigues - 30 anos - Campinas-sp Diz:
22/04/09 às 2:33
E ai Felipão tudo bem cara, ótima video aula e parábens
Matheusk9 Diz:
22/04/09 às 10:52
Opa valeu ai felipe um abraço, sucesso em ….
Eduardo Oliveira Diz:
22/04/09 às 10:54
Olá Felipe, cara suas vídeos aulas são muito boas!!
Vc poderia tb postar algo sobre incompatibilidade de navegadores, estou com esse problema! Faço um site visualizando no ie7, porém qdo abro no ie6 ou no firefox sempre tem algo no lugar errado ou a pg fica toda bagunçada! Vê essa questão ai q garanto ser dúvida de muita gente! Abraço
Felipe Cardozo Diz:
22/04/09 às 12:13
Fala ae Eduardo, beleza?

Vou falar mais de hacks css nos próximos vídeos.

[]´s
Guilherme Diz:
22/04/09 às 12:29
Felipe… eu assisto suas aulas.. e eu adoro =)

É o seguinte, a tres meses atrás eu resolvi criar um site.. e ele está bem legal já.. não uso CMS e nem nada.. eu adquiri um sistema de hospedagem simples de 9,90.. tem suporte PHP etc..

Eu fiz minhas páginas em HTML somente, porém está muito legal! Mas eu tenho 1 problema.. eu quero apenas mudar o CENTRO (o conteúdo) da página.. e ter várias outras páginas iguais..
Eu tenho um TOPO, a parte de baixo, menus do lado esquerdo e direito.. e eu precisava mudar o CENTRO somente..

Eu procurei em diversos locais na web.. e encontrei os “CMSs”, (wordpress, drupal, joomla) e talz.. e facilitam a fazer isso.. e muito mais coisas..

O que eu faço Felipe? Como eu edito apenas o centro? Preciso usar CMS? Frames? É bom e importante usar CMS?
Eu tentei criar um CMS.. mas eu não quero perder a página que eu ja criei.. pois está muito legal!
Eu estou meio perdido hehe..

Valeu! Aguardo resposta!
Marcio Diz:
22/04/09 às 13:08
Felipe
Todas as video aulas são dez e essa e uma delas e sendo iniciantes aprendo bastante coisa com o conteudo que o site apresenta. E se não for incomodo pedir uma video aula com conceitos basicos de php com orientção ao objeto + css.
Douglas Miranda de Araújo Diz:
22/04/09 às 13:11
Muito Bom suas videos aulas Felipe,
Parabens aprendi muito com os seus videos,
Obrigado.
Leonardo™ Diz:
22/04/09 às 14:05
Eduardo Oliveira, tem um método para se colocar hack no IE 6, que consiste em:
Por exemplo, se no IE 7 uma margin-left de um Box esteja sendo visualizada corretamente, e sua dimensão seja margin-left: 10px; e no IE 6 fique um pouco menor basta colocar um underline na frente da nova margin para se adequar no IE 6.
Então seu código ficaria assim:
margin-left: 10px; /* Margin correta */
_margin-left: 20px; /*aqui você colocaria o valor correto para o IE 6 */
Só que tem alguns problemas em usar esse tipo de hack, seu código Css não fica valido. Tem algumas maneiras para se contornar isso fazendo, por exemplo, uma folha de estilo somente para os hack de IE. Seria interessante o Felipe explicar todo esse processo em uma vídeo aula em especial, não seria uma boa idéia?
Espero ter ajudado…
Abraço
Leandro Diz:
22/04/09 às 14:30
Show de bola Felipe, parabens pela video aula

abraço!!!!
Felipe Cardozo Diz:
22/04/09 às 16:16
Oi Guilherme, tudo bem?

Procure por include no google. Creio que isso lhe ajude a fazer esse processo.

[]´s
Felipe Cardozo Diz:
22/04/09 às 16:20
Leonardo e Eduardo Oliveira, para resolver o problema das margens duplicadas no ie6 deixando a folha de estilo válida, basta inserir o “display:inline” na div que ta duplicando o margin.

[]´s
Sergio Araujo - SP Diz:
22/04/09 às 19:52
Fala aew Felipe blz…..

Kara fantastica essa video, para mim que não conheço tablelles estou achando isso fantastico, pois aki no mxmasters estou aprendendo muita coisa que eu nem imaginava ter que aprender para construir Sites.

Obs: Por onde anda o Titio Aleixo, estou sentindo falta das videos aulas dele tbem.

Continue assim nos ensinando cada vez mais.
Adriano Laurindo Diz:
22/04/09 às 20:28
Fala Felipe, seguinte, parabéns pelas suas vídeos aulas.
Espero que meu comentário não seja excluido novamente.
Seguinte, é ótimo aprendermos como se faz isso com CSS, mas o pessoal esta crucificando as tabelas, e não é bem por aí. webstandard não é tirar tudo quanto é tabela e colocar tudo em CSS. Na verdade, o W3C recomenda que NÃO seja usada tabelas para o desenvolvimento do LAYOUT, e indica o uso delas (das tabelas) em dados Tabulares, como uma lista de preço, notas de alunos, etc. Ótimo seu tutorial, mas é sempre bom deixar bem claro onde devemos usar tabelas ou não.

é isso ae, abraços e sucesso!
kleber Diz:
22/04/09 às 20:48
MARAVILHAAAASSSS tava passando hrs fazendo errado³ segunda vez q venho e tem o que eu tava procurando ^^

vlw felipão!!
Douglas Miranda de Araújo Diz:
22/04/09 às 20:53
Felipe , da para você fazer um video aula explicando mais sobre CSS ?
se der muito Obrigado!
Paulo Ricardo Diz:
22/04/09 às 22:42
Olá..

eu tenho uma dúvida.. tipo, eu qru criar páginas.. porém sem modificar tudo.. somente modificando o conteúdo no centro como no site do mxmasters.. como eu faço isso? valeu..
Wagner Quedi Diz:
22/04/09 às 22:52
Ola Felipe, parabens pela video aula, estou aprendendo muito, estou iniciando a pouco em tableless e tenho algumas duvidas, assisti todas as video aulas e as duvidas persistem, se puder fazer uma video aula com o seguinte conteudo:
- como montar um site onde o conteudo seja sempre o mesmo, e se possa escolher o layout .. tipo ..
estou desenvolvendo um sistema onde o conteudo dinamico para todos os clientes são os mesmo, o que muda é o layout de cada pagina, entao assim .. crio um html ou php todo em com css, ai o novo cliente contrata e eu faço só o .css e as novas imagens e pronto .. o novo layout ja esta pronto .. sem precisar alterar NADA no html
Obrigad…
Kassio Diz:
22/04/09 às 23:18
otima video aula felipe!!!!!!!!!

a propozito vc pode passar seu msn?
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum MX - ochii Diz:
22/04/09 às 23:45
Felipe tu ñ colocou duas mensagens minhas a do downlaod tudo bem
mais ade tableless ñ sei pq
me esplica ai
flw

(@_+) – ochii
Felipe Cardozo Diz:
23/04/09 às 0:20
Wagner, tudo bem?

Não entendi bem sua dúvida! Mas creio que você mesmo já tenha dado a resposta.

Basta só mudar o CSS e as imagens. E a estrutura permanece a mesma.

[]´s
Trambulhao Diz:
23/04/09 às 8:52
O correto não seria definir o tipo de lista dentro do UL?

tipo:

ul { list-style-type: none; }
Felipe Cardozo Diz:
23/04/09 às 12:02
Trambulhão Você tem razão… N]ao havia percebido isso.

Vou colocar uma errata lá!

[]´s
Monster Diz:
23/04/09 às 12:11
Felipe muito boa a video aula, mas eu fiquei com umas duvidas que não deram certo e gostaria de uma resposta sua breve se possivel.
Os box(as caixas dos produtos) ficaram grudadas no topo da div produtos mas está com margin:0 auto, o que poderia ter ocorrido ai?
Outro problema que eu observei foi que o nome do produto é o preço do mesmo tem um espaçamento um ENTER,. no seu isto não ocorre.
Vlwwww abraço
Guilherme Diz:
23/04/09 às 12:42
Por favor… uma video aula de include no HTML.. por favorrrr!!!!

Urgente Felipeee =*
Mr. X® Diz:
23/04/09 às 12:47
Por favor Felipe, cria ae uma loja virtual em PHP, CSS, E JAVASCRIPT.
PLEASSSSSSSSSSSSSSSSSSSSSSSSSSSSSE
Alex Rodrigues - 30 anos - Campinas-sp Diz:
23/04/09 às 15:47
E ai Felipe tudo bem òtima vdeo aula parábens, bom eu estou instalando uma galeria de fotos com o plugin nextgen-gallery para um site de um cliente http://www.rsrepresentacoes08.com.br mas esta dando o seguite erro
The server setting Safe-Mode is on !
If you have problems, please create directory wp-content/gallery/telhas and the thumbnails directory wp-content/gallery/telhas/thumbs with permission 777 manually !
Unable to create directory wp-content/gallery/telhas/thumbs !

E o servidor de hospedagem que estou usando eo da http://www.comunidadeweb.com.br
Eu ja dei permissão no servidor de ftp mas ainda não deu certo. Felipe o que devo fazer?
No aguardo!!

Alex Rodrigues
Josélio Diz:
23/04/09 às 16:17
O trabalho de vocês é simplesmente maravilhoso. Obrigado pela resposta a minha dúvida e quero aproveitar para parabenizá-lo pela qualidade das suas aulas.
Vocês realmente estão inovando e fazendo a diferença ao transmitir conhecimento de forma tão simples e ao mesmo tempo tão profissional. Com certeza o meu trabalho tem melhorado muito através das aulas do MXMASTERS (meus clientes agradecem).
Valeu!
Italo Bruno Diz:
23/04/09 às 18:25
Excelente aula Felipe!!! Tendo em vista que vc é otimo em ensinar e muito minucioso e admiro isso em vc gostaria de te dar uma dica para a explicação da formatação da padding e margin normalmente vc diz EM CIMA LADO EMBAIXO LADO seria talvez de melhor memorização dizer que elas respeitam o sentido do relogio assim talvez se torna mais vacil para apredizes como eu memorizarem abraço curto muito suas aulas e to sempre aqui . . .
José Diz:
23/04/09 às 23:42
cara essa video aula ficou show de bola.. estou queredo criar uma mini-loja virtual e estava pensando em criar em tabelas, mais agora depois dessa video aula mudei totalmente de ideia.. vou criar em tableless
Adir Renato Diz:
24/04/09 às 9:02
Nossa !!! queria ter visto este video a um pouco tempo atrás.. Assim me pouparia madrugadas de sono. ( kkkk )
Parabéns Felipe!!!!
CSS’ s all
Joao Paulo Diz:
24/04/09 às 16:36
Felipe… salva nos…
o site ta com erro ao executar os videos… os videos hospedados no youtube.. da pra ver la no youtube.. e no mxmasters nao..
e os do videolog.. ta dando erro.. tanto aqui.. como la no videolog.com.br
:S
ajuda nos
Saulo Brito Diz:
24/04/09 às 17:40
Só espero que um dia vocês respondam os e-mails ….
Felipe Cardozo Diz:
25/04/09 às 0:38
Fala ae Alex, beleza?

Respondi seu e-mail. Isso é problema no servidor.

[]´s
Felipe Cardozo Diz:
25/04/09 às 0:47
Saulo, tudo bem?

Acima do formulário de contato tem uma informação bem intuitiva onde falamos que as dúvidas com relação ao conteúdo do MX devem ser redirecionada aos comentários ou ao fórum.

Coloque sua dúvida em um dos meios citados acima, que terá a resposta…

[]´s
Dimas Diz:
25/04/09 às 10:35
Sensacional…Parabéns!
Hugo Diz:
25/04/09 às 12:02
Espetacular, Felipão, seria bom um DVD fazendo o site completo em Tableless/css

Essa vídeo aula está excelente, parabéns. vlw
Felipe Cardozo Diz:
25/04/09 às 12:16
Hugo, já está saindo do forno!

[]´s
Eduardo Diz:
25/04/09 às 15:01
Esse é um exemplo clássico onde acredito que seja melhor usar uma tabela, e não uma lista. As lista são usadas pra listar itens, mas nesse caso você está relacionando um título e a forma de pagamento a um valor. Na minha opinião a forma de pagamento e o título ficariam como ‘table headers’ e os valores como ‘table data’. Quem diria, as famosas tabelas estão sendo esquecidas….. rs
Hansley ;) Diz:
27/04/09 às 15:09
Felipe, cara aquele problema ja consegui resolver, mas agora estou com outro problema.
os acentos… aki fica normal mas quando coloco no site fica com aqueles erros…
se quizer ver: http://josewalter.com/projeto2

novamente agradeço a atenção!
Paulo Jorge Diz:
29/04/09 às 23:32
Oi
Tudo blz?
Parabens pela video aula, comecei a aprender css faz um mes e ja quase sei fazer um site completo em css, gracas as video aulas do mx masters.
Espero que continuem assim por muintos anos
Mais uma vez parabens
Abracos a tods
xau
Arlington Diz:
1/05/09 às 15:21
Excelente video aula, mal posso esperar pelo DVD em Tableless.
Rafael Diz:
9/05/09 às 2:04
Felipe!!
meus parabens pelo seu trabalho! tem ajudado muito todos web designers do mundo inteiro, eu moro no jp e sempre estou aqui no mxmasters aprendendo.
ficou bom o novo design layout do site, mas creio que vou precisar de um tempo pra me adptar a usabilidade que foram super drasticas! imagino que tudo tenha um motivo, seria legal ate uns comentarios nas video aulas!
to com uma duvida…
nao consigo colocar um link tipo <a href=”http….. no meu site de um site externo tipo google ect, qnd abre, no navegador aparece o endereço do meu site barra o endereço do link, da uma olhada http://www.assembleiadedeusnojapao.org/templo.html
valeww abraco
wallax Matos / Porto Seguro / 19 anos Diz:
9/05/09 às 13:41
e ai nego td bem!!!
parabens filipe otiam video aula
Ricardo Marangoni Diz:
11/05/09 às 19:30
Show de bola!!

Outra video aula perfeita de Tableless

Abraços
Alexandre Diz:
12/05/09 às 19:51
show de aula ei Felipe qnd for possivel faça uma aula de como criar divis com cantos arredondados se possivel.
vlw
Hugo Luiz Diz:
14/05/09 às 23:47
show de bola. gostei do programinha ééééé. Vlw ai Felipe. ta de parabéns o seu site… vlwww
Rogerio Diz:
18/05/09 às 17:56
Muito bom, primeira vez que entro no site e ja gostei.
Lucas Tomasi Diz:
19/05/09 às 12:01
Eae felipe.. muito interessante, mas tenho algumas dúvidas…

O overflow também serve para aparecer o background quando é dado o float? Porque para corrigir esses erros eu crio uma div e do clear:both.

E outra coisa.. não é necessário dar o display:inline para colocar a lista na horizontal né?

Abraço.
Jober Costa Diz:
28/05/09 às 20:07
Fala Felipe!!! tudo bom!
Não sou muito de comentar nos post´s mas sou viciado no mxmasters e assisto tudo que á de novo aqui! rs
Gostaria de saber se posso agregar esse esquema no wordpress?
um abração!!!
Thiago Melo Diz:
29/05/09 às 13:57
Cardozo,me esclarece uma dúvida por gentileza.
Como eu faço para inserir o meu ícone como favicon, no meu site. Já tentei de várias maneiras mas… Tá osso!!
ufffff…
Atenciosamente.
edu Diz:
2/06/09 às 10:26
olá felipe tudo bem.
não sei si ja te disseram isso mais você é o cara.
suas videos aulas são demais parabens mesmo cara.
eu tenho uma duvida muito serio.
como fazer um site no flash que oculpe 100% do browser
e se adapte a cada resolução de monitor.
falou cara um abraço.
Gledson Diz:
4/06/09 às 18:13
Felipe Cardozo sempre detonando por aqui, parabéns Parcero!!
Alexandre Diz:
25/06/09 às 22:43
Fala Felipe…muito legal…mandou bem, sempre passando dicas quentes…valeu…abraço.
Eddie Castellano Diz:
27/06/09 às 9:30
Poxa!Meus Parabéns Felipe!Realmente as vídeo aulas postadas no MX Masters são de altíssimo nível,mesmo as vezes sendo noções básicas ajudam e muito mesmo pra quem já tem um certo conhecimento como no meu caso.Sempre que tenho alguma dúvida ou mesmo qdo quero ampliar conhecimentos venho aqui em busca de informações!Estão todos de Parabéns por essa ótima iniciativa!!Grande Abraço!
Gildvan Arley Diz:
11/07/09 às 3:25
Gosto Muiiiiiiiiiiiiiiiito
do MX todos os dias, uma coizinhas novas parabens.
Márcio Seabra Diz:
3/09/09 às 1:30
As video-aulas desse Felipe são D+

Num tem como não aprender desse jeito… quisera eu ter tido um professor desse jeito!

Aproveitando aqui…

Felipe, tem algo que eu não encontrei em PERTE NENHUMA DA WEB, talvez por exigir mesmo uma maior leitura, mas sinceramente nao sei se aguentaria ler 205 páginas do manual do PHP pra tentar isso.

C pode fazer uma video aula ensinando COMO CRIAR CATEGORIAS E SUBCATEGORIAS COM PHP + MYSQL?

Tenho procurado a muito tempo e não encontro nada didádico assim como suas aulas!
wiliam Diz:
18/09/09 às 11:37
oloco meu….voce é o cara !!!
me ajudo muito..
mais poderia ditar uma duvida/
eu crie o maisn que se refere ao topo do site
e um menu
apos o menu é um iframe
como faço meu menu carregar os liks dentro do meu iframe?
http://www.portalfazenda.hd1.com.br
David CHC Diz:
18/09/09 às 21:16
@wiliam para fazer isso, vc deverá colocar um name no iframe (name=”pagina”), e no link vc colocar um target=”pagina”
Alisson Souza Diz:
19/09/09 às 0:51
Muitos boa sua video aula Felipe, ta de parabéns.

Queria saber de uma coisa que vejo em algumas video aulas sua.

No seu Windows Vista tem aquela barra igual como é no Mac, tipo o menu de navegação aqui do seu site, quando vc passa o mouse o ícone fica maior.
Queria saber como vc fez pra colocar ele assim no Vista.
E aproveitando, vc podia fazer uma video aula ensinando esse efeito.

Espero que tenha conseguido me entender xD.
Fico aguardando resposta.

Agradeço desde já.
SIlvio Diz:
21/09/09 às 19:39
Felipe sou teu fã já Cara vlw…
PH Diz:
23/09/09 às 1:27
Parabéns Felipe, é bom ter pessoas assim nessa área de web, pessoas que compartilham seus conhecimentos. As vezes pensamos…”Caráca é muito fácil…”
mais cara toda vídeo aula ensina muito não só a mim mais a outras pessoas… e CSS é o cara, dá pra brincar muito com ele… eu programo em JAVA, e é muito bom aconselhar CSS com JAVA…e a MXMASTER é uma grande colaboradora para formar novos talentos profissionais. Eu tento fazer animação em flash, desenhar layout no fireworks, fazer tota a parte de exportação para o dreawn, e aí tem a parte da programação que insere JAVA SERVER FACES, BANCO DE DADOS, MYSQL, é uma loucura, a gente as vezes acaba esqueçendo de alguma coisa e temos que sempre estar dando uma olhada nestes vídeos que estão de parabéns… continue assim garoto.. abração, sem palavras MESTRE
Wilson Diz:
29/09/09 às 8:54
E ae felipão me ajuda a criar um portal de mu tipo esse aew

http://mu.aprendizmuonline.net

se criar um video aula agradeço

flw
David CHC Diz:
3/10/09 às 10:16
@PH, se vc estiver disposto enviar video aulas sobre JAVA para o VAB, basta ver como proceder (http://www.videoaulasbrasil.com.br/video-aulas/), não deixe de ler as condições.
Carlos Neto Diz:
13/10/09 às 13:19
Felipe, gostaria de saber qual o nome do skin que vc usa, que fica os icones dos programas no topo. Obrigado
Christiano Diz:
1/12/09 às 11:24
Esse tutorial merece uma versão dois só que mostrando a mesma coisa quando as fotos variam de altura e largura (dentro de um limite máximo é claro) assim como a quantidade de texto abaixo da foto. Isso levando-se em consideração o IE 6 é claro.
Rafael Costa Diz:
3/12/09 às 16:02
Felipe,

Baita video aula, mas pra mim ocorreu um problema, possuo no site que criei um menu dropdown com UL LI, e o que acontece quando clico no menu ele carrega a listagem, só q dai quando passo o mouse pelo menu os itens ficam escondidos pelo listagem, como posso resolver isto?

Obrigado.
Diego Diz:
4/02/10 às 13:06
Olá Felipe, estou a dias com um problema coma lista quando coloco pra ser gerada com while poderia me ajudar a identificar o problema o codigo esta logo abaixo, obrigado aguardo retorno.

http://diegoguedes.com/loja/lista.txt
David CHC Diz:
4/02/10 às 13:12
@Diego, o que ocorre?
Diego Diz:
4/02/10 às 15:26
A lista não carrega como no exemplo colocando php genrando a lista junto com o css veja o codigo e o exemplo em funcionamento abaixo.

Codigo:
http://diegoguedes.com/loja/lista.txt

Pagina em funcionamento:
http://diegoguedes.com/loja/lista.php

Obrigado.
David CHC Diz:
4/02/10 às 15:52
@Diego a página do exemplo não existe, dá um conferida
Aguiar Diz:
3/03/10 às 12:11
Bom dia!!!

Sera que vc pode me dar um dica fiz um catalago de produto mas no internet
6.0 fica desconfigurado.

grato!!!
Marcos Moreira Diz:
23/04/10 às 9:14
muito bom caraaa. estou aprendendo muito aqui, estou cirando um site para uma loja, e estava louco aqui jaa, tentando criar um sistema assim mais dinamico, muito obrigado caraaa, show de bolaa, agora só falta eu aprender a fazer a paginação dos produtos,hehe

vlw abçs!
Guilherme Guedes Diz:
21/07/10 às 15:33
Fala Felipe, blz???

Essa video Aula me ajudou muito a compreender essa e a usar listas…

Mas assim como outros que ja comentaram, gostaria de ver mais conteudo dentro de uma página !!!!!!

Um abraço Prabéns pelo trabalho!!!!!!

Falowww