14/03/2009 - 17:35 > 11.128 Visualizações > 57 comentários

Tableless – Curso básico – Aula 4 – Flutuando blocos

Salve, salve rapaziada, nesta 4° vídeo aula de tableless, iremos aprender como organizar nosso layout utilizando float, ou seja, iremos “flutuar” nossos blocos para esquerda e direita, deixando nosso projeto mais organizado.

Espero que gostem do conteúdo!

Boa aula!

Aulas anteriores

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

57 respostas para 'Tableless – Curso básico – Aula 4 – Flutuando blocos'

wanderson - 19 anos RIACHO FUNDO/ DF Diz:
14/03/09 às 17:58
HIhi, o primeiro…
Michel Araújo Diz:
14/03/09 às 18:11
Super video aula!
Essa nova abertura das video-aulas também ficou ótima! Além de bem feita, durando menos tempo, dando mais importancia a video aula mesmo.

[]’s
Leonardo™ Diz:
14/03/09 às 18:13
Primeiro queria te dar Parabéns essa vídeo aula esta maravilhosa!
Felipe teria como disponibiliza uma aula de como fazer um player (de uma radio) com o flash, e depois ensinar a colocar no topo do site? Nesse exemplo seria só na pagina index, que o player ficaria e nas sub-paginas não teria o player. Se tiver como fazer ficaria eternamente satisfeito já procurei na internet e não achei algo que esclarece minhas duvidas…
Abraço Equipe MX!
Jonathan Dos Santos Diz:
14/03/09 às 18:38
Achei que você se enrolou um pouco na explicação… só não gostei do modo como você tá escrevendo as linhas de CSS fica díficil de entender assim… sei que para sites com um porte muito grande de visitas 2kb multiplicados por milhões ai sim é melhor deixar o codigo em uma linha….so acho que para entender melhor para quem é leigo no assunto em modo “cascata”

body{
padding:10px;
background-color:#CED0D0;
}

fica bem melhor de entender…

“Se você escreve o código de acordo com os Padrões, já economizou código suficiente. Não prejudique a manutenção do site por conta dessa neura. Escreva código legível!”

link: http://www.tableless.com.br/nao-otimize-seu-codigo

essa é minha opnião abração! =]
Felipe Cardozo Diz:
14/03/09 às 18:39
Fala ae grande Michel!

Justamente. Essa foi a intenção nesta nova abertura. Deixá-la menor, porém, com um efeito legal!

[]´s
Felipe Cardozo Diz:
14/03/09 às 18:40
Fala ae Leonardo, beleza?

Vou falar se o Michel pode fazer esta aula, ok?

[]´s
Felipe Cardozo Diz:
14/03/09 às 18:42
Jonahtan, beleza/

Cada um com seu cada um!

Todos temos nossas particularidades e formas de ensinar.

O importante e digo, MAIS UMPORTANTE, é todos conseguirem aprender com os conteúdos ensinados. Enquanto isso acontecer, continuo compartilhando o que aprendo

[]´s
Jonathan Dos Santos Diz:
14/03/09 às 18:52
Felipe sua resposta é totalmente plausível….so acho que fica mais fácil aprender em modo cascata…do que em linhas e também acho que o código mais legivel…MAS como você mesmo disse

Cada um com seu cada um!

abraço’

ahh e o Mx Web TV quando volta?
Felipe Cardozo Diz:
14/03/09 às 19:05
Claro Jonathan!

Antes de mais nada queria informar que quando disse “Cada um com seu cada um” em momento algum quis ser ignorante, mas sim dizer que cada um tem suas particularidades. Digo isso antes que apareça um me chamando de ditador, ignorante, etc…rs

Mas, essa questão é debate para mais de mil comentários. Já rolou isso no site tableless.com.br, no site do Bruno Dulcetti, etc… Creio que isso não influencie na forma de absorver o conteúdo, mas gosto dessas dicas, pois me incentiva a desenvolver vídeo aulas explicando os dois lados da moeda e deixar que os visitantes postem a melhor forma de ensinar.

Ta aí. Gostei desse desafio. Farei vídeo aula de tableless e colocarei essas questões em pauta e deixar rolar um debate!

[]´s e bom fim de semana!
David CHC Diz:
14/03/09 às 19:50
Acho q escrever CSS com tabulação ele facilita para quem está começando, porque vê cada elemento isolado, assim fica mais fácil de identificar. Quando você criar um css linear, para quem já conhece, pelo menos um pouco, não sente muita diferença (nos meus códigos eu tenho hábito se tiver poucas propriedade, em torno 3, eu coloco linear, quando tem mais, ai colocar tabulado, mas é questão de gosto, como falei tbm no post da outra video aula de tableless, vai depender do padrão que a pessoa segue).

Só pra deixar claro, sobre o CSS com tabulação, não estou dizendo em otimização do código, tamanho de arquivo, economia de largura de banda, e sim, a melhor maneira dos iniciantes aprenderem e identificarem as propriedades e valores, é sem duvida com tabulação.
Gabriel Bruno Meira / 15 Anos / Colniza - MT / Forum MX - ochii Diz:
14/03/09 às 19:50
Ai povão do MXmasters!
Mais uma ótima aula Felipe como sempre muito boa e explicativa.
Mais falando sobre o conceito “CASCATA” e o “LINHA” primeiro sempre fazia em cascata e ñ sabia da importância de fazem em linha ate que vi algumas aulas aqui no MX. Mais importante que isso é porque só comecei a fazer em linha, com o Jonathan disse é meio confuso para algumas pessoas como era pra mim mais com pratica e esforço tudo fica mais fácil neh =).
E ainda pessoas que se profissionalizam em WEBDESIGN OU WEBMASTER praticamente todas gostariam de trabalhar para um empresa grande como a Globo.com que tem milhões de pessoas acessando o site, ai se você não gostasse de fazer porque é muito complicado, como você ñ tem pratica mesmo você sendo um dos melhores WEBDESGIN do mundo não é a mesma coisa.
Mais como você disse Cada um Com o seu Cada um.
Leonardo™ Diz:
14/03/09 às 22:06
Antes eu colocava os códigos em cascata, depois das dicas do Felipe pensei sobre e achei melhor colocá-las em linha. Mas cada projeto penso e faço de um jeito, se for algo que necessita de revisão freqüente coloco em cascata caso o contrario eu uso em linha. Essa questão fica a gosto de cada um…
Abraço Felipe e a toda equipe MX um bom final de semana!
Nilmaier Diz:
14/03/09 às 22:50
Felipão ta de parabens se um dia eu tiver 5% de sua iamginação fertiu hahaha eu te pago um shop ….
Brincadeiras a parte .. cara muinto boa a video adorei tava precisando mesmo me ajudo muinto cara valeu forte abraço
Jairo Fontes / 20 anos / Viçosa - MG Diz:
14/03/09 às 23:07
MX masters 2000 inove com a bola toda!!!
ótimas vídeo aulas, parabéns Felipe !

bom, assim como o Jonathan Dos Santos comentou, eu também acho mais fácil de entender colocando o código da outra forma.
mas o que vale mesmo é aprender, e eu estou aprendendo bastante aqui no site.
valeu, grande abraço!!!
Márcia Bardaro Diz:
15/03/09 às 8:18
Olá Felipe! mt boa vídeo aula!
então… estou começando a entender um pouco melhor o tabless por conta de sua vídeo aulas, mas confesso que em algumas partes se vc colocasse em cascata eu percebeira melhor!
então… tem como mostrar em cascata e depois dando back space para uma linha???
Se ñ me engano, suas primeiras vídeo aulas de tabless foram em cascata, mas foi mt no início!
e… acabamos com o problema do cada um com cada um… kkkkkkkk
bjão
kleber Diz:
15/03/09 às 8:30
Muito boa a aula!!

Abraço!!
Mauricio Stange(Curitiba) Diz:
15/03/09 às 9:44
Felipe show de bola esta vídeo.
Quanto a discussão sobre o css otimizado ou não, vou dar meu “pitaco”.
No desenvolvimento é interessante trabalhar em cascata, aí vc testa, corrige, acerta, etc, etc, etc.
Depois vem a questão da otimização, onde temos algumas ferramentas online que “convertem” o código em cascata para linha, ou seja, temos um formato de código em tempo de desenvolvimento e outro em produção, sem qualquer prejuízo ao produto final.
Costumo uitilizar a ferramenta do CSSDrive no endereço http://www.cssdrive.com/index.php/main/csscompressor/
Quanto ao artigo do site tableless.com.br “não otimize seu código”, posso até concordar desde que soubesse que a maioria dos usuários utiliza-se banda larga, mas como a maior realidade tupiniquim ainda é linha discada vou continuar a otimizar.
Hugo Luiz Diz:
15/03/09 às 10:15
a vídeo aula ta de parabéns, bem explicado, sobre as linhas, é bom saber utilizar ambas assim uma mão lava a outra.
Emerson Diz:
15/03/09 às 12:43
Ola, a todos ??? Olha sei que o FOCO é TABLELESS, mais essa abertura é LOKA, ela foi feita no AFTER EFFECT ???, alguem manja de AFTER EFFECT no MXmasters, sou loko para aprender falta é conteudo, ainda sera lançado um CURSO de AFTER EFFECT no MX ??? e a AULA esta ÓTIMA sempre aprendendo, abraços …
Felipe Cardozo Diz:
15/03/09 às 13:04
Olá Emerson, tudo bem?

Esse efeito foi feito com Particle Illusion (temos vídeo aulas no MX) e seu autor é Ricardo Aleixo!

[]´s
Leleski Diz:
15/03/09 às 18:16
HUUHehuehue que preguiça em Felipe xD
uma continha dessas :X (tbm faço isso)

ótimas aulas tomara que esta aula chegue até a 15ª edição ou mais
e quero pedir para que você pense sobre uma sujestão de vídeo aula que eu mandei sobre um sistema de news integrado na página, mas de fácil de atualização para que os clientes possam atualizar sem problemas.
Jonathan Dos Santos Diz:
16/03/09 às 4:02
Concordo com você Mauricio Stange(Curitiba)
porquê no desenvolvimento de um website ainda mais se for uma equipe e tals é bem melhor fazer em modo cascata porque fica mais fácil de achar algum erro….

quanto à ” posso até concordar desde que soubesse que a maioria dos usuários utiliza-se banda larga, mas como a maior realidade tupiniquim ainda é linha discada vou continuar a otimizar.”

Também concordo, porque quando agente pega um projeto e faz corretamente um brifing, normalmente se pergunta qual é o seu público álvo…e por ai nós já podemos ter uma ideia e pensar em customizar ou não o css… mas tem uma coisa ai que ainda me deixa encabulado… que é isso:

” Há outro ponto que devemos levar em consideração: imagine que o site pese 40Kb. Estes 40Kb são compostos por 20Kb de CSS e 20Kb de HTML. O CSS tem uma característica interessante: ele é cacheado pelo browser quando visitante entra no site.
Na primeira visita do usuário ele baixará 40Kb de uma vez. Já na segunda visita ele baixará apenas 20Kb relativos ao HTML. Ele não precisará baixar os 20Kb de CSS porque o arquivo já está cacheado pelo browser. “ se isso é real eu acho que escrever em modo cascata seria a melhor opção ever…..

Eu particularmente escrevo o css em modo cascata, acho bem melhor porque assim consigo indentificar melhor algum erro ou encontrar algo. e na parte da customização faço como o David CHC disse: “ nos meus códigos eu tenho hábito se tiver poucas propriedade, em torno 3, eu coloco linear, quando tem mais, ai colocar tabulado “.

Mais ai tem a parte do gosto…porquê gosto não se discute

Mas particularmente eu prefiro em modo cascata quando são várias propriedades. Mais se são poucas faço em linhas….

seletor { propriedade: valor; segunda_propriedade: valor; }
David CHC Diz:
16/03/09 às 12:38
Sobre essa parte , dita Mauricio Stange

Quanto ao artigo do site tableless.com.br “não otimize seu código”, posso até concordar desde que soubesse que a maioria dos usuários utiliza-se banda larga, mas como a maior realidade tupiniquim ainda é linha discada vou continuar a otimizar.

A otimização do CSS, retirando os espaços e colocando linear, o usuário final não seria o foco, esses procedimentos são utilizados mais pra economia de banda, se vc tiver um tráfego de dados muito grande, isso é bem significativo. Sobre o artigo do tableless, o que Diego coloca é q vc usar o CSS, seguindo os padrões, seu site está otimizado.

Adotar os Padrões, isso sim faz a diferença para usuário final. Acho q discussão nesse caso de usar css linear ou em “cascata” está mais ligado se as pessoas que estão aprendendo vão se sentir confortaveis ou não. Mas temos que levar em conta (sei q tô sendo repetitivo), q cada um trabalha com metodologias e padrões diferentes.

Acho q foco nesse caso especifico, seria se é mais fácil aprender CSS em “cascata” ou linear, isso vai de cada um, na minha opinião, acredito q em Cascata (tabulado) é mais facil para os iniciantes. Então o q seria importante, são as pessoas q estão acompanhando as videos aulas dizerem q é mais fácil para elas.
Jota Diz:
18/03/09 às 0:01
Olá Felipe Cardozo, venho acompanhando suas video aulas de tableless há tempos. Elas tem me ajudado bastante no meu trabalho. Gostei de todas, mas estou com uma “super dúvida”, se eu quiser fazer um layout com 3 colunas, como faço pra posicionar as DIVs?
Sendo que não existe um “FLOAT MIDDLE”, como posicionar a “coluna” do meio?
Grande abraço
Vinícius Diz:
19/03/09 às 13:39
Eu não estou conseguindo assistr a esta aula até o fim… chega até aos 9 minutos, depois finaliza. Alguém sabe me reponder o que pode estar havendo?
Vinícius Diz:
19/03/09 às 13:40
Aliás, a aula para aos 6 minutos…
Juliano Baltazar Diz:
19/03/09 às 15:05
Parabéns ao MX e aos seus colunistas, sempre com ótimas video aulas…continuem sempre sendo esta fonte de estudos!!!

Grande abraço
David CHC Diz:
19/03/09 às 15:41
Jota, nesse caso com 3 colunas, vc vai usar o float:left, o float:right, exemplo:

#esquerda{
width:200px;
float:left;
margin:5px;
}
#meio{
width:500px;
float:left;
margin:5px;
}
#direito{
width:200px;
float:left;
margin:5px;
}

Repare, vc poderia fazer todos irem para esquerda, ou vc poderá fazer dois pra esquerda, um para direita como float:right, ou colocar um float para esquerda e outra pra direita, e o do meio ele vai se ajeitar entre os dois, ai vc escolhe a melhor e a opção mais facil.

Tendo duvidas, poste no forum do mxmasters na seção tableless.
Robson Alves/29 anos/ brasilia Diz:
19/03/09 às 16:46
Fala ai felipe meu velho….
show essas video aula sobre tableless.
Qdo vai sair a 5 video aula……
estou ansioso para continuar com as aulas….
ta sendo proveitosas para mim….
quero fazer mudanças no meu blog e preciso aprender isso rapi10…
Porem aki no MXmasters e mais facil de aprender…
fico no aguardo e qualquer coisa me avise pelo -email se puder!
abraços e sucesso…..
Fuisssssssss
Felipe Cardozo Diz:
19/03/09 às 23:12
Isso aí David. E não vamos esquecer de usar o clear dependendo da posição do box com os floats. Falarei disso nas próximas vídeo aulas
Tableless - Curso básico - Aula 5 - Criando menu e organizando a capa | MX masters - Sua central de vídeo aulas na web Diz:
20/03/09 às 6:37
[...] Tableless – Curso básico – Aula 4 – Flutuando blocos [...]
David CHC Diz:
20/03/09 às 8:51
Claro Felipe, a utilização para anular a fluatuação dos elementos usando o clear, é necessário, e é das coisas que as pessoas tem dificuldade com usam o float. Só pra constar:

clear:left; => Anula a flutuação da esquerda
clear:right; => Anula a flutuação da direita
clear:both; => Anula a flutuação da esquerda e da direta,fazendo o elemento ficar embaixo dos demais q usaram o float..
Mateus Diz:
21/03/09 às 11:04
O meu nao ta ficando dentro do content .
Pq será . e eu to colocando as div dentro da div content.
valew
Felipe Cardozo Diz:
21/03/09 às 23:11
Matheus, coloca os arquivos para download aqui para eu analisar.

[]´s
Fabiano Miranda Diz:
26/03/09 às 2:09
grande felipe, parabens pela aula.
Luan Couto Diz:
29/03/09 às 1:47
Acredito eu que o modo cascata seja mais fácil de aprender, sou visitante assíduo do site e estou dando minha opinião para que o site fique cada vez melhor, abraços !
Renato Machado Diz:
24/04/09 às 18:42
Felipe tenho um problema e gostaria que vc me ajudasse, é o segunte

trabalho com css e php e quando uso flash em minhas páginas no IE 6 em especifico ao carregar a página aparece uma mensagem dizendo pressione ok para carregar o conteudo desta página, porque vc sabe? Percebi que em algumas páginas não desenvolvida por mim isto tb ocorre..aguardo uma resposta valeu…
Felipe Cardozo Diz:
25/04/09 às 0:47
Renato. Além do CSS, você está usando algum script?

[]´s
Moacir Diz:
1/05/09 às 12:39
Olá,
Primeiro gostaria de agradecer e parabenizá-lo Felipe, e a todos do MxMasters pelo excelente trabalho, aprendi muito com ele.

Bem, ao tentar colocar em prática o que aprendi nesta aula, me deparei com um problema com IE6. Ele parece que considera sempre margin-left ou margin-right com o dobro do espaçamento colocado. Então, fui a busca da solução, e a encontrei no fórum http://www.webmasterworld.com/css/3459772.htm, com a utilização de “display:inline”. Se possível, gostaria que você Felipe, ou algum outro participante coloca-se um comentário a respeito deste “comando”.

Obrigado.
Felipe Cardozo Diz:
1/05/09 às 18:44
Moacir, tudo bem?

Obrigado pela dica. Eu já estava ciente do problema e até esperava que acontecesse. Eu iria fazer as considerações finais desse curso de tableless e falar dos hacks css. Por isso, não havia falado antes.

[]´s
Ricardo Marangoni Diz:
11/05/09 às 22:17
Sem comentários!!

Nota 100000000000000

Abraço!!
João Paulo Vasconcelos Diz:
12/05/09 às 18:55
Olá felipe…
parabens pelas suas video aula sobre tableless,
meu site estava praticamente todo pronto em tabelas… dai resolvi deletar tudo e comecei tudo de novo em tableless com suas aulas..
e tenhu ctz q vai fikar nota 10.

to enfrentando um probleminha aqui.. e vou tentar explicar:
eu fiz uma div “geral” para todo o site (topo, content, menu, etc..)
dentro dela.. eu colokei a div topo.. e colokei meu topo do site (nao fatiei ele pq eh muito levinho nao achei a necessidade e tbem pq era apenas um teste).
até ai tudo bem.. o problema foi qdo chegou nos menus..
sao 8 imagens.. e elas estao fikando com um espaçamento entre elas… como faço para retirar esse espaçamento? ja tentei o padding e nao deu certo…tem alguma forma de usar o float para essa operaçao? caso nao entenda meu problema… gostaria de saber se posso lhe enviar um e-mail para que vc possa analizar e esclarecer essa duvida… fico grato…
\\ JP
Felipe Cardozo Diz:
12/05/09 às 18:58
JP, beleza?

Tem como você upar a folha de estilo em txt pro seu server e colocar o link aqui para a gente analisar?

[]´s
João Paulo Vasconcelos Diz:
12/05/09 às 19:02
Opa… desculpa ai felipe….
eu postei ai a minha duvida anterior.. mas resolvi fazer uns testes aqui… e descobri que era pq la no codigo html eu havia dado espaços de 1 img para outra… dai refletiu la no browser…
mesmo assim vlw a atençao ai
Felipe Cardozo Diz:
12/05/09 às 19:21
Valeu JP!

[]´s
Saulo Diz:
10/07/09 às 16:56
Felipe fiz um site que está funcionando no mozilla… mas nao funciona no internet explorer.. porque???
mANNN;Q Diz:
14/07/09 às 23:49
só pra deixar claro o erro do ‘Renato Machado’ o erro que ocorre com ele, é em exibição local, abrindo o site diretamente do PC, o que é normal, enviando pra um servidor de hospedagem ou executando a pagina a partir de um apache, esse erro some.
mANNN;Q Diz:
14/07/09 às 23:49
ah, esqueci de parabenizar o Felipe, muito obrigado, estou voltando com web, e aproveitando pra refrescar a memoria aqui, abraço!
viConcursos Diz:
16/07/09 às 16:17
Nossa demais da conta esse artigo seu parabens aprendi muito…!!
Pedro Lúcio Diz:
20/01/10 às 1:48
Puxa vida meus amigos, me tire uma dúvida terrível aqui..rss
Eu fiz uma imagem de background para o corpo do meu site, para o “body”. Beleza, só que nada mais cai em cima dele…rsrs
Todos os blocos que eu coloco caem embaixo do body. Fiz um bloco esquerdo e um direito. Estão um na direita e outro na esquerda, legal, mas só que láááá embaixo…aí fiz um topo pra constatar se realmente não estavam caindo dentro do body (da imagem), e também não entra…tá lá em cima, acima da minha imagem de backgroundo, do fundo. E agora..o quê que eu faço?.rs
Será que é porque salvei o background inteiro ? não exportando apenas 1px vertical, em jpg bater quality e com um “repeat-y” ?, enfim….
Se alguém souber, agradeço desde já..
David CHC Diz:
20/01/10 às 11:15
@Pedro Lúcio isso vai ocorrer se vc colocou uma div com dimensões do tamanho da tela. Caso o contrários, eles não ficarão no background, qualquer crie uma conta em alguma hospedagem gratuita, a maioria é em inglês, e passe o link para dá uma olhada.
Anderson Diz:
3/06/10 às 10:08
Primeiramente felipe quero dizer que eu sou um grande fãn seu cara serio msm, entao e aprendi muito com o mxmasters tableless me apaixonei q ate comprei o curso XD.
Mais so nao vi coomo colocar uma animação em flash no css sera q vc o grande mestre do mxmasters poderia me ajudar?
e tbm quero falar q eu vi q vc pediu pra nao colocar as videos aula pra download e bem depois disso eu fuçando num site achei as videos aula pra download cara…
entao se vc poder me ajudar eu agradeço des de já vlw abração
meu IDOLO rsrs
David CHC Diz:
3/06/10 às 19:59
@Anderson, não coloca animação em flash via CSS, apenas imagens, para colocar o flash, vc vai usar a tag Object
Anderson Diz:
4/06/10 às 9:51
David, vc me fala o tipo q tenho q fazer mais nao expliica como fazer
sera q teria como vc postar aeee pq eu fiz aqui mais nao funcionou da maneira q fix olha ai
David CHC Diz:
4/06/10 às 10:16
@Anderson, tem começar a pesquisar também, lembre-se, o google é seu amigo:

http://www.pinceladasdaweb.com.br/blog/2006/10/03/inserir-flash-corretamente-em-xhtml/
Anderson Diz:
5/06/10 às 9:46
kkkk david vlw hem e essa eu gostei hsahusa
o google e seu amigo, eu particularmente o chamo de pai google
ja procureimais infelizmente nao achei brigadao aeee
David CHC Diz:
5/06/10 às 9:50
@Anderson, pra mim ele é um grande oraculo, rs