13/12/2008 - 23:14 > 17.073 Visualizações > 103 comentários

Tableless – Curso básico – Aula 2 – Desenvolvendo o topo

Salve, salve rapaziada. Felipe Cardozo na área com mais uma vídeo aula. Nesta 2° parte do curso básico de tableless, iremos aprender a desenvolver o topo. Iremos ver funções interessantes como alinhamento do box no centro com o margin:0 auto; entre outros.

Conteúdo anterior para acompanhamento:

Boa aula!

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

103 respostas para 'Tableless – Curso básico – Aula 2 – Desenvolvendo o topo'

Leandro Santos - Fortaleza-CE Diz:
13/12/08 às 23:45
Cara Muito Show….
Tô louquinho para proxima aula… flw galera…

Abraços para equipe mx masters.
Leandro Santos - Fortaleza-CE Diz:
13/12/08 às 23:53
Cara vamos fazer campanhar para a votação do proximo dvd do mx masters ser com programação php, conto com vcs… flw… e muito bom as aulas de css.

vlw, galera…
Gabriel / 15 anos / Colniza - MT Diz:
14/12/08 às 0:14
Já to baixando para assistir a video aula
deve ta muito boa esta video
yahooooooooo!
Gabriel / 15 anos / Colniza - MT Diz:
14/12/08 às 0:55
Acabei de ver a segunda parte do mini curso de css
gostei muito só fiquei com uma dúvida.
Qual é a melhor opção cologar o topo com background no css externo
ou colocar o topo como imagem na pagina do index?
eu coloco na index,
mais ñ sei em qual fica mais leve ou melhora o alhinhamento depentendo do navegador ñ tenho ideia que qual a melhor
Felipe responde ai se puder bl

flw
Marcos Oliveira Diz:
14/12/08 às 1:00
Como sempre, Felipe Cardozo na área, com ótimas video-aula.
10/10

Mas Felipe, você pretende fazer as video aula, até concluir a montagem do layout com tableless. ou vai seguir endiante criando o site ?
Tony Moura Diz:
14/12/08 às 2:04
Caramba Felipão, as aulas estão cada vez mais interessantes, continue sempre assim.

Forte Abraço!
Fernando Félix/24/Serra/E.S. Diz:
14/12/08 às 2:11
Falaw Felipão …

Abençoado celular (rssss)…
Ótima vídeo aula parabéns.
Tô aguardando sua resposta dos DVD’S, abraços…

Fernando Félix
Antonielle Diz:
14/12/08 às 6:36
isso sim é vídeo aulas….parabéns felipe concerteza umas das melhores video aulas que já vi no mx masters, não que as outras não são boas mais esta e adas blends foram sensacionais, show este mx masters..brilhante, merece um oscar…abraçosssssss
Felipe Cardozo Diz:
14/12/08 às 7:42

Gabriel, beleza?

O mais correto é fazer tudo pelo CSS mesmo. Porém, caso você utilize uma logomarca em png ou jpg por exemplo, você pode colocar entre um h2 ou h1. Falarei mais na frente sobre isso.

[]´s
Felipe Cardozo Diz:
14/12/08 às 7:43

Marcos, pretendo concluir o curso com include em php, pois muita gente tem dúvidas sobre.

[]´s
Gilmar Majada - 22 anos - São Lourenço do Sul/RS Diz:
14/12/08 às 8:50
Vlw Felipones vc esta se superando, suas vídeo aulas estão ótimas..

Abço!
Victor Assis Diz:
14/12/08 às 11:25
Muito Massa Felipe,
Esse curso de Tableless vai ajuda muitas pessoas que estão começando!
Até eu que ja trabalho algum tempo com Tableless, estou assistindo, por que como diz um amigo meu “Conhecimento nunca é demais”

Abraços.
Felipe Pereira Diz:
14/12/08 às 11:39
Muito boa a video aula eu ja venho acompanhando as suas video aulas a augum tempo e é muito legal
Filipe Goes - 13 anos - SP Diz:
14/12/08 às 11:50
Eu estou votando para o DVD de php
E a video aula foi ótima, achei lindo essa nova maneira de exportar o layout..

I ♥ Tableless
Abraão Levi // 17anos // São Paulo Diz:
14/12/08 às 12:46
Boa Felipe! Parabens!

Vlw Abraços!
andrei Diz:
14/12/08 às 12:51
boa felipão,agora me diz uma coisa,não é preciso colocar display table na div pai?!
vlw msm suas aulas estão me ajudando bastante…….abraços
Emanuel Pedroso Diz:
14/12/08 às 13:06
Como sempre, grandes video aulas felipao!! estou aguardando ancioso para a prox =)
Jardel Nadolny - Paraná Diz:
14/12/08 às 13:16
Diga lá Felipe, seguinte no Firefox ficou beleza, já no IE o topo ficou com uma cor sólida por traz.
Preciso de um help.
KLeber santos Diz:
14/12/08 às 13:30
Ah… muuuuito obrigado =D
Huily Diz:
14/12/08 às 13:40
Olá…Bom, e se eu quisesse colocar a imagem do background à frente do conteúdo, o procedimento seria ao contrário?
Marcos César Ventura Maciel - 18 anos - Brumadinho - Minas Gerais Diz:
14/12/08 às 14:33
Muito Bom Felipão, já tô louco pra ver a próxima video-aula… até a próxima… abração!
FORÇA SEMPRE!
FONTENELE Diz:
14/12/08 às 14:46
Muito show felipe, parabéns ja to esperandoooo o proximo video rsrs abraços.
Netto Ramalho - Curitiba - 15 anos Diz:
14/12/08 às 14:46
Fala Felipe !
Cara Otima video Aula !
Meu proximo web site Irei fazer com css
O que estava faltando mesmo era entender mais do assunto

A uma duvida, tem como fazer as imagens pngs Ficar sem o fundo cinza no ie ? eu acabo opitando em salvar com o fundo por causa disso

Vlw Cara e parabens, amanha tem Mx Web Tv xD ! xD
Flws
Renan Bellini Diz:
14/12/08 às 16:06
[b]Salve, SAlve, feliponesss..

parabens cara estou esperando ansiosamente a 3º video.

Abraçosss!
Felipe Cardozo Diz:
14/12/08 às 16:24

@Jardel, tudo certo? Provavelmente você está usando o IE 6.0. Para corrigir isso, tem que usar um hack. Falarei disso.

@Andrei, não necessariamente.

[]´s
Felipe Cardozo Diz:
14/12/08 às 16:27

Huily, não tem como colocar o background na frente do conteúdo via CSS. Ele sempre ficará abaixo do texto. Ele pode até ficar por sobre o bloco, mas seria o mesmo processo. Neste caso, o BG teria que ser inserido na div #centro que iremos ver nas próximas partes.

[]´s
Roberto Francisco Diz:
14/12/08 às 17:19
Olá Felipe…

Se eu quisesse que o logo do site (neste layout que está a ser construido) se pudesse linkar para a home da página, como fazia? Criava outra outra div dentro da div topo e recolocava essa div?

Cumps!!
Leonardo Diz:
14/12/08 às 17:30
Tem como eu colocor um arquivo swf para ser o background??

e ótima video aula

abç
Saymom Diz:
14/12/08 às 17:45
olá Felipe Parabéns pelo Mx masters.
estava assistindo este seu mini curso de css tableless Muito massa, fiquei com uma duvida. Este layout usando somente margin: 0 auto; text-align:center na div conteúdo, não fica centralizado no Internet Explorer.

“Eu fiz o seguinte:
Criei uma nova div “corpo” coloque antes da div “conteúdo”,
ficou assim:
body{background:#630E34 url(../imagem/bggeral.jpg) no-repeat top center;}
#corpo{width:auto; height:auto; margin:0 auto; text-align:center;}
#conteudo{width:779; height:600; margin: 0 auto; text-align:center;}
#topo{background:url(../imagem/topo.png); height:224px;}”
aparentemente deu certo, mais tem alguma outra forma de resolver isso?

vlw Felipones
Julio Coronel Diz:
14/12/08 às 17:50
Parabéns pela iniciativa, perfeita vídeo aula, aqui consegui fazer certinho. Estamos aguardando a próxima.

Abraço, Felipe!
Thiago Retondar | 15 anos | São Paulo - São Paulo Diz:
14/12/08 às 18:10
Felipão, excelente vídeo aula! Parabéns!

Para o pessoal entender melhor o funcionamento do CSS, seria mais legal fatiar aquele topo, mas está show de bola o jeito que você fez.

***********************************************************************************
PESSOAL, tem um tutorial no fórum sobre isso: http://www.mxmasters.com.br/comunidade/viewtopic.php?f=20&t=17
***********************************************************************************

Abraços, Felipão.
Alexandre Diz:
14/12/08 às 19:53
boa aula semple arrumo mo rolo com essas div mas agora ja to acostumando so uma duvida e obrigatorio ter a div pai? eu normalmente faço divs separadas e como faria pra um conteudo maior por exemplo almento o tamanho tipo de 779 pra 1024 pixel pro site tomar a tela toda?
e oq sao aqueles margin e padding no começo do css?
vlw galera
caio rodrigues Diz:
14/12/08 às 20:30
muito bom contunie assim
estou aguardado a 3 video aula
Alex Rodrigues Diz:
14/12/08 às 21:38
E ai Felipãp belezera, Cara eu salvei o PNG sem o background mas na hora de puxar pelo css o fundo fica branco. Ai eu tive que salvar com o background para sumir o fundo branco, o q será?

E ótima video aula continue assim cara!!!
Leandro Santos - Fortaleza-CE Diz:
14/12/08 às 22:37
Caamba, galera, como uma vídeo aula bem elaborada, tem tantar repercusão assim, muito bom isso, é assim que se faz felipão.

Cara só uma Dica para o site:
Como sempre o site mxmasters tem vários usuários online diariamente, porque não criar um espaço, por exemplo um chat online com pessoas cadastradas no site e assim a galera sempre se comunicar e tirar com outros internautas pequenas dúvidas como no post dessa aula, creio que os amantes do mx masters tem várias pessoas de vários niveis, deste do iniciante até um grande profissional na área que sempre acessar o site para está bem informado com a tendência da web.

Fica ai a minha sugestão Felipão, Criar um Chat online, Tira dúvidas dos Internautas.

Abraços para equipe mx masters.
Felipe Cardozo Diz:
14/12/08 às 23:52

@Roberto Francisco, neste caso, terá um link “home”, mas se você quiser colocar o link da home na logo, tem que fazer como imagem sobreposta e não como background.

@Leonardo, não tem como.

@Saymom, qual a versão do seu IE?

@Alexandre, criando divs separadas, pode dar problemas em projetos maiores. Sobre o height fluido, explicarei no passar das próximas aulas. Tem um macete para resolver um problema com o background nesses blocos. Explicarei.

@Alex Rodrigues, não entendi.

@Leandro Santos, a idéia é legal, mas pode ter certeza de que vira bagunça. Os comentários daqui só são organizados porque são moderados. Não queremos perder a identidade do MX que são vídeo aulas. No máximo comentário e fórum para “discussões”. Mas obrigado mesmo pela idéia.

[]´s
Denis Felipe Nunes Itai SP Diz:
15/12/08 às 7:32
vlw Felipones mais uma aula ai de css pra sanar minhas duvidas q comecei a bolar um site inteiro em css e travei no meio então espero vc continuar com essas video aulas ai pra me ajudar assim como a mta gente ve se vc consegue bater em cima de posicionamento de boxes pq foi nisso q eu travei eu queria fazer uma siderbar de cada lado e por o conteudo principal no meio mas nem rolo de eu conseguir organizar os boxes tenho certeza q se vc falar sobre isso ajudara mta gente , putz nao vejo a hora q chegar no include vlw e mais uma vez ótima video aula.
Leandro Santos - Fortaleza-CE Diz:
15/12/08 às 9:07
OK Felipão, tudo bem parceiro, deixa essa dica para outro lançamentos de vocês ou até mesmo para um dvd de php, contruindo um ‘bate-papo” na sua homepege.

vlw parceiro,

Abraços para equipe mx masters.
Lucas Corrêa Diz:
15/12/08 às 9:59
Mutoooo bommmm!!!!
Vocês do MXmasters podiam fazer um mini curso de php e flash também né….tipo desenvolvendo um site completo em flash ou
desenvolvendo um site completo em php.
monster Diz:
15/12/08 às 14:43
Gostei da video aula Felipe, to esperando ancioso as proximas partes, tomare que venham logo hehehe.
Também gostaria dum mini curso de um site feito em flash… ou melhor um layout produzido no fireworks para ser dps manipulado no flash.
abraço vlw mx masters
Mauricio Stange(Curitiba) Diz:
15/12/08 às 18:29
Muita bacana essa série sobre tableless, agora qdo tiver que tratar um layout do Joomla por exemplo, vai ficar mais fácil interpretar o que está acontecendo.
Valeu FC!!!
Adir Renato Diz:
15/12/08 às 19:49
Olá pessoal eu uso java script para corrigir esse bug do ie 5 e 6
basta colocar esse codigo entre as tags

function correctPNG() {
if (navigator.appName == “Microsoft Internet Explorer”) {

for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”) {
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “”
img.outerHTML = strNewHTML
i–
}
} // FECHA FOR
} // FECHA IF DO TESTE DE BROWSER
}

if (navigator.appName == “Microsoft Internet Explorer”) {
window.attachEvent(“onload”, correctPNG);
}

grande abraço ao pessoal… todo dia visito o site e aprendo muito.
Adir Renato Diz:
15/12/08 às 19:51
Esqueci de completar ali em cima entre as tags
Thiago Maciel Diz:
15/12/08 às 21:00
Boa Felipe, vc esta de parabens pelo tutorial, cara cada vez mais abrendo com os seus tutoriais.

Abraços a todos que contribuem com este site. Vcs estam de parabens mesmo.
Tony Lopes Diz:
16/12/08 às 8:51
Bom dia Felipe, super legal sua video-aula, só um detalhe qdo diz prá colocar um no-repeat depois do background, eu estou fazendo algo errado ou tem um pequeno detalhe, pois comigo só funcionou colocando depois background: no-repeat, e não somente n0-repeat.
#topo{background-image:url(../img/topo.png); no-repeat;height: 224px;}NÃO FUNCIONOU
#topo{background-image:url(../img/topo.png); background-repeat:no-repeat;height: 224px;}// FUNCIONOU
Vc Felipe, e seus colunistas me ajudarão bastante e continuam me ajudando
UM ABRAÇÃO
Felipe Cardozo Diz:
16/12/08 às 11:19

Tony, beleza?

Da forma que vocês fez não está incorreta, apesar de ser extensa. Mas o erro que aconteceu na forma que não deu certo foi que você colocou o “no-repeat” depois do ponto e vírgula, quando na verdade deveria ficar depois do fechamento de parênteses e antes do ponto e vírgula, conforme o exemplo abaixo:

// #topo{background-image:url(../img/topo.png) no-repeat ; height: 224px;} //

[]´s
Leonardo Silva Diz:
17/12/08 às 2:43
Como eu coloco um arquivo swf dentro de um box??
o meu topo esta feito em flash
Abç!
Márcia Bardaro / Rio de Janeiro Diz:
17/12/08 às 8:06
Mt boa a vídeo aula!
Felipe te manderei um e-mail com um .png de um site que estou desenvolvendo e estou evitando o máxima em ñ usar tabelas, mas ñ estou fazendo o css…ou melhor.. estou refazendo com como tabless…ñ deixe de dar continuidades a esse assunto, pos só pelas quantidades de posts já deu para perceber o quanto esse material está sendo valioso para os amigos e frequentadores do blog… bjão fiquem com Deus
Wesley Diz:
18/12/08 às 18:44
Felipao, o meu topo nao ficou transparente no browser, mas no dreaw ficou. Ond esta o erro?!Um abraço
Kleberson Leite Diz:
20/12/08 às 11:11
Show de Bola ^^
Vamos pra Próxima!!
Willian Alves - Jaru - Rondonia Diz:
24/12/08 às 18:08
nossa,,cada dia me surpreendo mais com nossa profissão..
nunca tinha mexido com tableles…
exelente….
parabens Felipe..
Guilherme Souza Diz:
25/12/08 às 3:34
Felipe ..
gostaria de pedir para que na proxima aula você colocasse a melhor opção para fazer com que esse site em tableless funcionasse bunitinho no internet explorer 6.0 usando o png sem fundo ( transparente) ..
e sem trocar por gif .. pq senaum é feio neh ?! .. .

desde já agradeço ..
parabens para você e toda a equipe
acompanho vcs a um bom tempo gosto bastante das videoaulas ..
apesar de ja saber bastante coisa gosto de ver por não ter tempo de praticar então assim eu não enferrujo e gosto da maneira como o pessoal explica .. principalmente você ..
valew mesmo ..
Almir Diz:
28/12/08 às 14:17
tenho uma duvida, os PNG que vcs dão foi feito no fireworks , ok , mas aqui no meu PC estou trabalhando com o photoshop e editando o código no notepad++ , mas ao abrir o png no photoshop ele não vem com as imagens separadas ( layers) , gostaria de saber se existe algum programa ou alguma formar de converter PNG do fireworks, para photoshop, herdando os layers.
Erick Fernando - Bern Suíça Diz:
30/12/08 às 10:53
Parabéns Felipe, mas uma vez se superando.
Aguardando as proximas aulas.
Patrick Brito - Imperatriz/MA Diz:
30/12/08 às 15:29
Muito Bom Felipe, estamos esperando ansiosos a última aula, que como as outras será um show!
Danilo Diz:
30/12/08 às 21:09
Parabéns pela vídeoaula, está realmente mto boa.

Eu soh tenho uma dúvida de Tableless..não sei como colocar uma Box ao lado da outra…
Um site com tables eu usaria duas colunas…mas em tableless, como se faz??
Erick Fernando - Bern Suíça Diz:
5/01/09 às 11:55
será q ainda vem esse mês as outras video aulas? tô so no aguardo pra terminar um projeto aqui. + uma vez parabéns pelo ótimo trabalho desenvolvido.
Thiago Diz:
5/01/09 às 16:35
tabem to querendo saber quando sai a proxima video aula
Rodrigo Martinelli / 31/ Bom Jesus dos Perdões / SP Diz:
5/01/09 às 19:52
aewww felipão .. manda a aula 3….. to esperando desdo ano passado…..
Julio Coronel Diz:
6/01/09 às 0:11
Felipe, estamos aguardando esta conclusão dessa sequencia de aulas
do CSS. Também estou aguardando desde o ano passado.
Não vai esquecer da gente em Felipão.
Erick Fernando - Bern Suíça Diz:
12/01/09 às 20:35
axo q n vem mas n, a parte 3, q pena, fiquei todo animado axando q ja podia fazer um projeto sem tabela… vlw
wagner Diz:
14/01/09 às 15:05
muiiiito bom estou aguardando as proximas, mxpasters esta se tornando uma verdadeira escola de webdesign on-line, parabens
Luis Paulo RIbeiro Diz:
14/01/09 às 23:19
puxa cara tu tem que continua com este tutorial tah dimais! só tenhu a agradece a este site meo. aprendenu muito.
Felipe Cardozo Diz:
14/01/09 às 23:31

Erick, beleza?

A sequência vai continuar sim. Estamos na correria, mas vai sair em breve…

[]´s
Erick Fernando - Bern Suíça Diz:
15/01/09 às 12:45
Vlw Felipão, só queria essa segurança… agora é só alegria!

desculpa ae os comentarios percimistas.
Arailton Camargos Diz:
28/01/09 às 11:50
Vlw Felipe… estou acompanhando o site já faz um tempo e vc é o cara (hehe)
aqui só uma dúvida… se eu for colocar duas colunas? como o código vai ficar? (desculpe mas estou começando nessa area agora… desde já agradeço… abraços
wesley Diz:
30/01/09 às 12:43
valewwwwwwwwwww

parabéns
Clayton Feliciano Diz:
3/02/09 às 19:13
cara, muito boa suas aulas.. olha aprendi muito ainda mais sobre css, quando sai a proxima aula? obrigado e sucesso.
Adriano Diz:
4/02/09 às 20:31
Cara muito bom !!!

Só elogios pra dar !!

estou acompanhando as aulas e até agora todas foram de grande utilidade!!

abraço!!!
Edgar Diz:
11/02/09 às 14:41
E ai Mestre Felipe BLZ.

Parabens pelas aulas acho que ja vi todas as suas em menos de uma semanas cara to tendo uma overdose de informação.
agora sim to conseguindo fazer meu site do jeito que eu quero.
parabens para toda a equipe MX MASTERS pelo terceiro lugar conquistado logo logo serão o primeiro voces merecem
obrigado pelo rico conteudo fornececido.
Que DEUS os iluminem
valeu mesmo!!
Felipe Cardozo Diz:
11/02/09 às 16:51

E aí Edgar, beleza/

Obrigadão pelos elogios.

[]´s
Julio Coronel Diz:
12/02/09 às 17:45
Olá Felipe acha um tempinho, no seu precioso tempo para
fazer a terceira video aula, Estamos aguardando ok?

Abraço!!!
Felipe Cardozo Diz:
13/02/09 às 15:20

Pessoal. prometo que sairá em breve.

Tá corrido aqui, mas vai sair.

[]´s
Alexandre Diz:
13/02/09 às 20:20
Muito bom! fico no aguardo da próxima aula…

abraço.
Leo™ Diz:
14/02/09 às 15:46
Parabéns Felipe, essa vídeo aula vale ouro.
Daqui quanto tempo você irá concluir esses vídeos sobre Tableless e Css na criação de um site de acordo com as normas? É que to com um problemão eu combinei com um amigo meu que é DJ de fazer um site para ele, (Combinei quando estava vendo as aulas e não tinha visto que não estavam terminadas) to com um problema dos grandes você não acha? O fato é que o layout ta pronto, e de acordo com o gosto do tal DJ, fiz tudo no Fireworks, sei o necessário de Css mais meu problema é que não sei colocar em pratica no Dreamweaver pra fica tudo certinho, teria como você concluir essas aulas? Sei que é pedir muito, pois acredito que você sempre esteja muito ocupado. To querendo comprar o DVD Criando um site completo volume 2, pois acredito que ira resolver minhas duvidas sobre o Dreamweaver, teria como você entrar em contato comigo pelo meu e-mail para me explicar como posso comprar pela loja virtual?
Felipe Cardozo Diz:
15/02/09 às 0:17
Olá Leo™, tudo bem?
Antes do carnaval, esta vídeo aula estará no ar.

[]´s
Julio Coronel Diz:
20/02/09 às 22:56
Adoro o MXMasters, acho um site extremamente útil
e utilizo este para minha aprendizagem, mas promessa é divida
a se cumprir. (Antes do carnaval) na boa o Carnaval já começo!
Conto com vocês preciso desta video aula.
Leonardo™ Diz:
28/02/09 às 14:47
Kevin Couto Diz:
28/02/09 às 15:08
Tbm to loko pela videoaula…
mas como eh gratis nao posso exigir,
Aline Diz:
6/03/09 às 14:36
Olá Felipe!Tenho acompanhado bastante as suas vídeo aulas,parabéns!Muito bem desenvolvidas,tenho aprendido bastante e usado todas as informações nos meus trabalhos.Vale muito a pena.Bem comecei a desenvolver um layout,da mesma forma que vc está ensinando,mas quando coloco o topo através da div,ele aparece somente como uma faixinha do Dreamweaver,mas no navegador não aparece nada.Ele só aparece no Dream,dando enter dentro da div.O que pode estar acontecendo?Muito obrigada!
Aquele Abraço!
Laion Vasconcelos Diz:
8/03/09 às 14:21
Poh, esse felipe ensina muuinto bem cara….
Quem dera que ele fosse meu prof de matematica!! ( rsrsrs )

Parabens cardoso boas videos aula, to aprendendo muinto vey. brigadao msm. bjunda
Tableless - Curso básico - Aula 3 - Desenvolvendo o corpo do site | MX masters - Sua central de vídeo aulas na web Diz:
10/03/09 às 20:07
[...] Tableless – Curso básico – Aula 2 – Desenvolvendo o topo [...]
Tableless - Curso básico - Aula 4 - Flutuando blocos | MX masters - Sua central de vídeo aulas na web Diz:
14/03/09 às 17:38
[...] Tableless – Curso básico – Aula 2 – Desenvolvendo o topo [...]
Leonardo™ Diz:
14/03/09 às 20:41
André Nascimento Diz:
17/03/09 às 17:07
Muito mais muito boa mesmo ja estou indo para a próxima aula…

Abraços e vamo q vamo!!!@
Andréa Duarte Diz:
24/03/09 às 18:06
Oi, Felipe! Bacana sua aula, estou gostando de aprender a fazer sites mais rápidos de carregar, mas tenho uma dúvida: quando eu coloquei no CSS a imagem do topo ela apareceu duplicada lateralmente, vc sabe me dizer o pq? Como vc é o mestre, pensei que pudesse me ajudar.. desde já agradeço! Grande abraço!
Felipe Cardozo Diz:
24/03/09 às 20:31
Olá Andréa, tudo bem?

Digo que sem ver um print ou os arquivos é quase impossível saber o problema…rs

Mostra pra gente o que ocorre.

No aguardo!

[]´s
Andréa Duarte Diz:
25/03/09 às 10:33
Eis o index: http://www.makecenter.com.br/testes
E o estilo.css: /* CSS Document */

body {background:#630E34 url(../img/bg-geral.png) no-repeat top center;}
#content {widht: 779px; height: 224px; margin: 0 auto; text-align: center;}
#top {background:url(../img/topo.png); height: 224px; margin: 0 auto; text-align: center;}

E o código HTML:

Tableless

Aguardo resposta.
[]´s
Felipe Cardozo Diz:
25/03/09 às 13:29
Oi Andréa já identifiquei o problema.

Você esqueceu de colocar o “no-repeat” para o background do meio em:

#top {background:url(../img/topo.png); height: 224px; margin: 0 auto; text-align: center;}

O correto é:

#top {background:url(../img/topo.png) no-repeat center top; height: 224px; margin: 0 auto; text-align: center;}

[]´s
Andréa Duarte Diz:
25/03/09 às 16:58
Obrigada, Felipe! Ficou certinho.. foi orelhada minha mesmo! rs
Abração!
Arthur Warmling Diz:
23/05/09 às 23:43
Caraaa parabenss
mx master eh o melhor site de tutoriais!!
muito bom mesmoo
continuem assimm!
Valtencir Leal Diz:
18/07/09 às 18:49
Felipe
A aula 2 está cortando na metade, finaliza do nada, tua aula é show de bola
David CHC Diz:
18/07/09 às 19:49
@Valtencir Leal, 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.
lindemberg Diz:
3/08/09 às 18:57
Felipão tu é o cara mesmo!!!!

Vou falar algo para crescimento

Eu ja fui cliente de um outro site “masters” o qual larguei de mão pois perdi minha senha e há um ano eles não respondem email, ai tive a felicidade de saber por um amigo que vcs existem, portanto quando alguem falar que a aula é uma “m”, liga não tenho certeza que se colocarem o site nos prêmio ibest, ganharão ano após ano, fique tranquilo que vcs estão no topo de ensino via web.

ah e que aula hein! me perdi um pouco na hora de criar e alinhar mas valeu que sozinho eu consegui resolver tudo

att
Lindemberg Aguiar
Mauro Oliveira Diz:
10/11/09 às 4:16
Olá Felipe cardozo,

Você fez curso aonde?
Vou começar daqui 2 meses um curso de web design na Microcamp, vai durar 2 anos, sera que é bom?
David CHC Diz:
10/11/09 às 7:16
@Mauro Oliveira, antes de fazer qualquer curso veja grade dele, e visite instituição e converse com o professor ou alguém responsável, pra saber o q vc vai aprender.
Fábio Diz:
12/11/09 às 15:47
Boa tarde.

Antes de mais nada eu gostaria de agradecer ao Felipe Cardozo pela excelente video aula.
Mas estou tendo problemas.
Eu uso o Dreamweaver CS3, fiz um layout próprio bem parecido com o da aula pq não consegui baixar o arquivo da imagem q vc colocou. Acontece que o meu topo não fica centralizado com a imagem de fundo de jeito nenhum. No dreamweaver até fica, mas quando eu aperto F12 e abre o IE ou o Firefox o topo simplesmente fica mais a esquerda do que a imagem central. Vou colocar meu CSS que eu fiz até agora para vc poder ver que fiz exatamente como vc fez.

@charset “utf-8″;
/* CSS Document */
{margin:0; padding:0}
body {
background: #006600 url(layout/bg-geral2.jpg) no-repeat center top;
}
#conteudo {width:779px;
height:600px;
margin:auto 0;
text-align:center;
}
#topo {
background:url(layout/topo3.png) no-repeat;
height:363px;
}

OBS.: Meu layout ficou com o topo de 363px de altura, mas com 779px de largura como no original.
Por favor, me ajude Felipe Cardozo pq já fiz e refiz essa video aula 3 vezes.

Obrigado.
David CHC Diz:
13/11/09 às 7:39
@Fábio, o margin pra centralizar será assim: margin:0 auto.

#conteudo {
width:779px;
height:600px;
margin:0 auto;
text-align:center;
}
Fábio Marcolino de Lima Diz:
14/11/09 às 18:16
David eu nem tenho palavras para agradecer a você. Cara, deu certo agora. Poxa, que felicidade que eu estou. Parece besteira isso que estou falando mas acontece que eu não tenho dinheiro para fazer curso e nem para comprar as video aulas aqui do site, então eu estou tendo que aprender tudo sozinho. Só pesquisando na internet e não tenho ninguém para me orientar. Mesmo assim já consegui aprender Dreamweaver CS3, Fireworks CS3, HTML, um pouco de Joomla e agora estou no CSS. Ainda quero aprender PHP, Javascrip e Flash.
Se não for pedir muito, eu gostaria que alguém pudesse me auxiliar em certas coisas pelo MSN. Eu prometo que não serei chato, só quero mesmo é um pouco mais de informação.
Quem puder e quiser me ajudar basta me add no MSN fabio_lojapc@hotmail.com

Obrigado David, Felipe Cardozo e a todos que puderem me ajudar.
David CHC Diz:
14/11/09 às 18:56
@Fábio, eu aprendi tbm assim, sozinho, caçando tutorial na net, na epoca q nem existia vídeo aula sobre tableless. Mas garanto q vc ter resultados satisfatorio, pode demorar um pouco, mas vc consegue. Sobre adicionar o msn, eu mal uso, então nem poderia te ajudar. Será mais facil, vc postar suas duvidas no Forum do Mxmasters, pq caso eu não consiga ajudar, outras pessoas poderão.
Dário Junior Diz:
5/01/10 às 0:17
Olá, gostei muito da video – aulas, e estou olhando todas essas do mini curso… só queria deixar uma observação que naum tem como centralizar à esquerda… hehehehehehe

E Felipão, naum sei o que esta acontecendo mas cada vez q eu tento baixar o png ele corrompe o arquivo rar… sera q tina como me mandar por email ou ver pq isso? formatei meu pc a pouco tempo, naum acho q é erro dele.. ;/

agradesso desde já, vlw
Dyogo Nascimento Diz:
20/04/10 às 2:41
Oi Felipe,esse curso pra mim foi ÓTIMO,suas aulas estão cada dia melhor!

Felipe é o seguinte,eu já mandei um email pra vocês e não me responderam ainda,eu queria comprar um curso de vocês,só que não sei o melhor.
Gostaria de um curso que me ajuda a organizar o meu layout no DW não sei se é melhor tableless…E também como que eu faço pra organizar o layout feito no FW e colocar algo feito no flash junto,ai como organizar esse layout,você pode me ajudar,me indicando o curso certo?
Obrigado pessoal da MX,boa semana pra vocês!
Ah aguardo sua resposta se possivel responda no meu email?Obrigado mais uma vez
David CHC Diz:
20/04/10 às 8:55
@Dyogo Nascimento, o DVD Desenvolvendo sites nos padrões web com Tableless , vc irá aprender a criar um site utilizando tableless. Vc vai aprender a exporta os conteudo do layout, e montar, apenas utilizando linha de código, sem a utilização do modo visual do Dreamweaver. E com será em linha de código, vc não se preende a programas, vc pode fazer em qualquer editor.