Tableless - Desenvolvimento inteligente com Padrões Web

24/01/2006
Geral

Video Tutorial #6 – Transformando layout fixo em fluido

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 …

Por

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.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://putcharles.wordpress.com Putcharles

    Muito bom… Bem simplificado mesmo…

    Pra quem não sabe, com certeza vai ajudar muito!

  • http://www.facsal.br/junio Junio Vitorino

    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.

  • http://www.inf.unieoste.br/~alebattisti anselmo battisti

    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?

  • http://www.siga.inf.br Felipe Diesel

    Não seria melhor colocar no div #meio float:left ao invés margin??

  • Marcelo Carvalho

    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!

  • http://www.marceloariatti.com Marcelo Ariatti

    Opa!

    Muito bom tutorial!
    vai ajudar bastante gente.
    Parabéns!

    Abraços e continuem com o ótimo trabalho!

  • Nando Vieira

    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

    Ah! Respondendo ao anselmo battisti:

    Ele utiliza SIFR: http://www.mikeindustries.com/sifr/

  • Jean Marcel de Moraes Gonzaga e Camargo

    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

  • http://cirofeitosa.com.br/ Ciro Feitosa

    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

    Cara, muito bom.
    Continue assim!

  • http://www.nucleolivre.com.br Kico Zaninetti

    Simples e eficiente…

    parabens!

  • http://www.cosmeweb.com.br/blog/ CosmeWeb

    Ótima aula, Diego, congratulações. :D

  • http://www.debomtamanho.com.b Deco

    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

    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

    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

    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.

  • Pingback: Viche » VICHE CSS #2

  • http://BOOOA Emiliano Eloi Silva Barbosa

    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

    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

    Parabéns pelo tutorial … foi de grande ajuda para mim.
    Continue ajundando a todos.
    Valeu !!

  • Pingback: Rogério Lino

  • Leandro Zuliani

    O ruim é código de exemplo que você usou, nada semântico…

  • Edgar Mesquita

    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?

  • Pingback: 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)

  • http://www.fusionline.net Pedro

    Cara.. humilho aih em .valeu pelo aprendizado que vc me proporcionou….ajudou muito

  • Murilo

    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

    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

    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!

  • http://www.igorvittorello.com igor

    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!

  • http://www.emprimeiro.com.br Priscilla Rissardi

    Cara vc é muito fera…

    vlw mesmo o mundo precisa realmente de caras como vc que compartilha as coisas e que sabe ensinar….

    Obrigado mesmo.

  • http://www.emprimeiro.com.br Luiz

    Parabéns,
    Um bom trabalho.

  • Pingback: Ciro Feitosa » Arquivo » Seleções #2

  • Paulo César

    EXCELENTE!!

  • Christiano

    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.