25 anos, carioca, residente da cidade de Nova Iguaçu. Trabalha com web há 6 anos. Foi ouvidor e designer do grupo Telemar por 3 anos, onde desenvolveu projetos e intranets.
A empresa de tecnologia divulgou a criação de um componente capaz de alcançar até 40 gigabits por segundo e 20 ...
Publicado em 11/03/2010 - 16:26
O Google lançou na última quarta-feira, 10/03, um novo sistema para a visualização do Google Reader. A interface recebe o ...
Publicado em 11/03/2010 - 16:22
O que você faria se não pudesse usar nada da Google por uma semana? Fizemos a experiência e você lê ...
Publicado em 10/03/2010 - 8:51
Pouco menos de um mês após o Google anunciar seus planos de teste de uma banda larga ultrarrápida nos ...
Publicado em 10/03/2010 - 8:28
Acompanhe os últimos episódios desse programa que é sucesso na rede.
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!
Veja a Atualização nos blogs da equipe Mx Masters
R$ 40,00
R$ 79,90
R$ 59,90
13/12/08 às 23:45
Tô louquinho para proxima aula… flw galera…
Abraços para equipe mx masters.
13/12/08 às 23:53
vlw, galera…
14/12/08 às 0:14
deve ta muito boa esta video
yahooooooooo!
14/12/08 às 0:55
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
14/12/08 às 1:00
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 ?
14/12/08 às 2:04
Forte Abraço!
14/12/08 às 2:11
Abençoado celular (rssss)…
Ótima vídeo aula parabéns.
Tô aguardando sua resposta dos DVD’S, abraços…
Fernando Félix
14/12/08 às 6:36
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
14/12/08 às 7:43
Marcos, pretendo concluir o curso com include em php, pois muita gente tem dúvidas sobre.
[]´s
14/12/08 às 8:50
Abço!
14/12/08 às 11:25
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.
14/12/08 às 11:39
14/12/08 às 11:50
E a video aula foi ótima, achei lindo essa nova maneira de exportar o layout..
I ♥ Tableless
14/12/08 às 12:46
Vlw Abraços!
14/12/08 às 12:51
vlw msm suas aulas estão me ajudando bastante…….abraços
14/12/08 às 13:06
14/12/08 às 13:16
Preciso de um help.
14/12/08 às 13:30
14/12/08 às 13:40
14/12/08 às 14:33
FORÇA SEMPRE!
14/12/08 às 14:46
14/12/08 às 14:46
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
14/12/08 às 16:06
parabens cara estou esperando ansiosamente a 3º video.
Abraçosss!
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
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
14/12/08 às 17:19
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!!
14/12/08 às 17:30
e ótima video aula
abç
14/12/08 às 17:45
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
14/12/08 às 17:50
Abraço, Felipe!
14/12/08 às 18:10
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.
14/12/08 às 19:53
e oq sao aqueles margin e padding no começo do css?
vlw galera
14/12/08 às 20:30
estou aguardado a 3 video aula
14/12/08 às 21:38
E ótima video aula continue assim cara!!!
14/12/08 às 22:37
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.
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
15/12/08 às 7:32
15/12/08 às 9:07
vlw parceiro,
Abraços para equipe mx masters.
15/12/08 às 9:59
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.
15/12/08 às 14:43
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
15/12/08 às 18:29
Valeu FC!!!
15/12/08 às 19:49
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.
15/12/08 às 19:51
15/12/08 às 21:00
Abraços a todos que contribuem com este site. Vcs estam de parabens mesmo.
16/12/08 às 8:51
#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
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
17/12/08 às 2:43
o meu topo esta feito em flash
Abç!
17/12/08 às 8:06
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
18/12/08 às 18:44
20/12/08 às 11:11
Vamos pra Próxima!!
24/12/08 às 18:08
nunca tinha mexido com tableles…
exelente….
parabens Felipe..
25/12/08 às 3:34
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 ..
28/12/08 às 14:17
30/12/08 às 10:53
Aguardando as proximas aulas.
30/12/08 às 15:29
30/12/08 às 21:09
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??
5/01/09 às 11:55
5/01/09 às 16:35
5/01/09 às 19:52
6/01/09 às 0:11
do CSS. Também estou aguardando desde o ano passado.
Não vai esquecer da gente em Felipão.
12/01/09 às 20:35
14/01/09 às 15:05
14/01/09 às 23:19
14/01/09 às 23:31
Erick, beleza?
A sequência vai continuar sim. Estamos na correria, mas vai sair em breve…
[]´s
15/01/09 às 12:45
desculpa ae os comentarios percimistas.
28/01/09 às 11:50
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
30/01/09 às 12:43
parabéns
3/02/09 às 19:13
4/02/09 às 20:31
Só elogios pra dar !!
estou acompanhando as aulas e até agora todas foram de grande utilidade!!
abraço!!!
11/02/09 às 14:41
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!!
11/02/09 às 16:51
E aí Edgar, beleza/
Obrigadão pelos elogios.
[]´s
12/02/09 às 17:45
fazer a terceira video aula, Estamos aguardando ok?
Abraço!!!
13/02/09 às 15:20
Pessoal. prometo que sairá em breve.
Tá corrido aqui, mas vai sair.
[]´s
13/02/09 às 20:20
abraço.
14/02/09 às 15:46
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?
15/02/09 às 0:17
Antes do carnaval, esta vídeo aula estará no ar.
[]´s
20/02/09 às 22:56
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.
28/02/09 às 14:47
28/02/09 às 15:08
mas como eh gratis nao posso exigir,
6/03/09 às 14:36
Aquele Abraço!
8/03/09 às 14:21
Quem dera que ele fosse meu prof de matematica!! ( rsrsrs )
Parabens cardoso boas videos aula, to aprendendo muinto vey. brigadao msm. bjunda
10/03/09 às 20:07
14/03/09 às 17:38
14/03/09 às 20:41
17/03/09 às 17:07
Abraços e vamo q vamo!!!@
24/03/09 às 18:06
24/03/09 às 20:31
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
25/03/09 às 10:33
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
25/03/09 às 13:29
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
25/03/09 às 16:58
Abração!
23/05/09 às 23:43
mx master eh o melhor site de tutoriais!!
muito bom mesmoo
continuem assimm!
18/07/09 às 18:49
A aula 2 está cortando na metade, finaliza do nada, tua aula é show de bola
18/07/09 às 19:49
3/08/09 às 18:57
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
10/11/09 às 4:16
Você fez curso aonde?
Vou começar daqui 2 meses um curso de web design na Microcamp, vai durar 2 anos, sera que é bom?
10/11/09 às 7:16
12/11/09 às 15:47
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.
13/11/09 às 7:39
#conteudo {
width:779px;
height:600px;
margin:0 auto;
text-align:center;
}
14/11/09 às 18:16
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.
14/11/09 às 18:56
5/01/10 às 0:17
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