Muita gente vem me perguntando como se transforma um layout fixo em um layout fluido. Dependendo de como você criou sua estrutura HTML, isso pode se tornar uma dor de cabeça. Mas, você pode criar uma estrutura HTML que seja simples e ao mesmo tempo lhe de a flexibilidade de se transformar um layout fixo em fluido mudando apenas 1 linha de CSS. Nesse video tutorial, você vai conferir como isso é feito.
Duração: ~ 7m54
Tamanho: ~7Mb
Formato: SWF
Assistir agora ou baixe o vídeo.
Se você quiser mais vídeos e em alta-resolução, visite o Campus Online. Lá você vai encontrar vídeos tutoriais de Tableless, Ajax, Javascript e boas práticas de desenvolvimento web.
35 Comentários
35 Comentários
Putcharles 24/01/2006 às 08:15
Muito bom… Bem simplificado mesmo…
Pra quem não sabe, com certeza vai ajudar muito!
Junio Vitorino 24/01/2006 às 08:17
Muiiiiiiiiiito bom, parabéns cara, aprendi finalmente a transformar meu layout em fluido, alem de pegar outro macete na hora de centralizar, acho que eu usava um método meio arcaico, mas no mais o video ficou muito bom, parabéns Diego Eis.
anselmo battisti 24/01/2006 às 08:26
gostei muito .
tenho uma dúvida quanto a tipos de fonte.
no site “http://www.lealea.net/”
a frase “Be seen, be heard, be read.” esta escrita com uma fonte diferente das tradicionais “Arial, Verdana, Georgia”, como ela fez isto?
Felipe Diesel 24/01/2006 às 09:19
Não seria melhor colocar no div #meio float:left ao invés margin??
Marcelo Carvalho 24/01/2006 às 09:39
Putz, gostei do video tutorial, ja aprendi algo mais, por que como Junio Vitorino eu tbm centralizava de uma maneira diferente, desse jeito é bem mais simples!
Marcelo Ariatti 24/01/2006 às 10:01
Opa!
Muito bom tutorial!
vai ajudar bastante gente.
Parabéns!
Abraços e continuem com o ótimo trabalho!
Nando Vieira 24/01/2006 às 10:13
Para quem quiser restringir a largura mínima do conteúdo, pode utilizar o css abaixo:
#geral { min-width: 770px; }
Para o IE você pode usar “expression” ou utilizar um dos hacks CSS para emular o min-width.
#geral { width: expression(document.body.clientWidth > 770? “auto” : “770px” ); }
Se você quiser um CSS válido, utilize IE Conditional Comments.
Não testei os códigos acima, mas devem funcionar!
Abraços!
Nando Vieira 24/01/2006 às 10:19
Ah! Respondendo ao anselmo battisti:
Ele utiliza SIFR: http://www.mikeindustries.com/sifr/
Jean Marcel de Moraes Gonzaga e Camargo 24/01/2006 às 10:29
Hum… não sabia que dava pra centralizar com Margin, e tambem não consegui :/
quero dizer, o código funcionou apenas no Mozila, no IE 6.0 não….
coloque o exemplo no ar
Ciro Feitosa 24/01/2006 às 11:34
Diego, parabéns! Dicas com essa tiram várias dúvidas de quem ta começando. Tava até pensando em fazer algum tutorial sobre isso, mas você mandou bem!
LUCAS TS 24/01/2006 às 12:39
Cara, muito bom.
Continue assim!
Kico Zaninetti 24/01/2006 às 15:09
Simples e eficiente…
parabens!
CosmeWeb 24/01/2006 às 16:17
Ótima aula, Diego, congratulações.
Deco 24/01/2006 às 18:41
Que bom que voltaram a fazer as webaulas, isso ajuda paka, tanto para os que estáo inciando quanto para os que já estão mais avançado.
Um abraço e que continuem assim.
Túlio 25/01/2006 às 15:08
Muito bom o tutorial, explica direitinho como fazer. As coisas so ficam um pouco mais complicadas se voce utilizar imagens pra background. =D
Mas a aula eh muito boa.
Thiago 26/01/2006 às 17:27
Otimo tutorial, porém comigo só funcionou no firefox, no ie 6.0 não funcinou, a div do meio expande pros lados depois que acaba as divs da direita e esquerda.
Thiago 26/01/2006 às 17:36
malz, expliquei errado, a div do meio não vai para baixo div da esquerda e direita. Porém quando as 2 divs (direita,esquerda) acabam, o texto da div do meio se espalha um pouco. Deem uma olhada http://thiagoaos.host.sk/tutorial6.html , esse ai ta com o width da geral comentado.
Viche » VICHE CSS #2 28/01/2006 às 20:03
[...] Para quem está aprendendo recomendo os dois vídeos publicados pelo Diego Eis no tableless: Video Tutorial #6 – Transformando Layout Fixo em Fluído; [...]
Emiliano Eloi Silva Barbosa 03/02/2006 às 08:54
Faaala Eis!!!! A PAZ, cara!!!!
Veltei a ler vocês!!! E Agora como desenvolvedor WEB!!!!!!
Legal isso ai cara!!!!! não conhecia o termo fluído!!!
Valew!
Emiliano
Hugo 05/04/2006 às 11:12
Muito bom, agora só gostaria de saber como faz para que as divs da esq. e da dir. fiquem do mesmo tamanho da div do meio, qualquer que seja seu tamanho
Lopes 08/04/2006 às 15:38
Parabéns pelo tutorial … foi de grande ajuda para mim.
Continue ajundando a todos.
Valeu !!
Rogério Lino 20/07/2006 às 10:26
[...] a pena conferir. No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTMLallowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> [...]
Leandro Zuliani 12/03/2007 às 23:33
O ruim é código de exemplo que você usou, nada semântico…
Edgar Mesquita 18/05/2007 às 18:31
Agora vai uma dúvida que a muito tempo não consegui solucionar… tem como fazer o layout ser fluído verticalmente? ou seja, o rodapé encostado no final da janela?
Blog WebNatal - Divulgando os Padroes Web - XHTML, CSS, Microformats, Design, Usabilidade e Acessibilidade - Natal RNWebNatal - Divulgando os Padrões Web » Projetando um layout líquido(fluido, elástico, dinâmico) 09/07/2007 às 08:19
[...] de como transformamos um layout Fixo e Fluido Video de como transformar um layout de largura fixa como o da Visie em um layout fluido com o do Submarino mudando apenas 1 linha de [...]
Pedro 21/09/2007 às 23:57
Cara.. humilho aih em .valeu pelo aprendizado que vc me proporcionou….ajudou muito
Murilo 05/12/2007 às 21:26
Vlw Cara!
estou começando em css e não fazia idéia de como fazer isso… ainda mais um layout fluido!
=D
Seu site está nos meus favoritos e acompanharei o seu feed!
Abraços.
Victor 29/02/2008 às 00:27
Estou precisando aprender CSS para aplicar em um cliente (o primeiro na Web) e o seu material é muito bom! Você usa uma didática fácil e que qualquer um, até um novato em CSS como eu, consegue entender.
É como dizem por aí: “Você é o cara !!!”
Parabéns!!!
Gabriel Silveira 19/03/2008 às 15:05
Olá!
primeiramente parabéns pelo site e por mais esse tutorial muito bem feito.
Porém tenho uma dúvida e um desafio, hehe.
estou utilizando esse exemplo como base:
CSS:
#topo,#rodape {width:100%; height:70px; background:#ccc; clear:both}
#left {float:left; width:150px; background-color:#00FFFF}
#right {float:right; width:150px; background-color:#ffcc00}
#center {margin:0 160px}
#a
{
width: 800px;
border:1px #ffcc00 solid
}
html>body #a
{
width: auto;
min-width:800px;
border:1px #ff0000 solid
}
HTML:
sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf
sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf
sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf sdfsdfsdf
fsdfsdffffsdf
—-
O problema é o seguinte, determinei uma largura mínima para o site, e em IE7 e FIREFOX ele funciona perfeitamente.
Agora, como eu consigo fazer com que o IE6 “breque” quando chegar na largura mínima.
Já tentei de tudo e não consigo de jeito nenhum, inclusive expressões, como a: width:expression(document.body.currentStyle.offsetWidth > 810 ? “auto” : “800px”, mas ele não respeita!
Você ou alguém conhece a soulução para esse dilema?
Obrigado!
igor 25/03/2008 às 16:28
Cara… legal sua video aula hein!
Facinho de entender! sussa!
Parabens!
Foi útil em para uma luz de um problema cabuloso q eu tinha aki!!
VALEU!
Priscilla Rissardi 30/06/2008 às 18:39
Cara vc é muito fera…
vlw mesmo o mundo precisa realmente de caras como vc que compartilha as coisas e que sabe ensinar….
Obrigado mesmo.
Luiz 19/08/2008 às 20:58
Parabéns,
Um bom trabalho.
Ciro Feitosa » Arquivo » Seleções #2 29/10/2008 às 21:45
[...] trabalho pela comunidade do Tableless. Nestes últimos dias, colocou no ar 2 tutoriais falando de como transformar layout fixo em fluido, e um outro sobre como centralizar um layout horizontalmente. Para quem ainda tem dúvidas, vale a [...]
Paulo César 06/08/2009 às 12:52
EXCELENTE!!
Christiano 30/11/2009 às 10:13
Gabriel Silveira o IE 6 não breca. Ele não reconhece largura mínima.
Esse tutorial merece uma versão 2 para trabalhar os seguintes ítens:
- Quando se coloca conteúdo real dentro da coluna do meio onde você precisa misturar elementos fluidos com largura fixa e variável (um catálogo de e-commerce é um bom exemplo);
- Quando se quer deixar o rodapé sempre embaixo e você ainda possui um menu sanfonado (expande os submenus verticalmente quando o menu é clicado);
- Quando se tem textura no fundo das colunas e você que que ambas acompanhem a coluna do meio;
- Quando se deseja que o layout se adapte ao tamanho de letra do usuário;
Enfim. Acho realmente que há mais itens que justificam um tuto 2 deste aqui… Abços.