Tableless - Desenvolvimento inteligente com Padrões Web

24/01/2006
Geral

Video Tutorial #7 – Centralizando o Layout horizontalmente

Depois do Video Tutorial #6, muita gente disse que aprendeu como centralizar um layout, então, resolvi fazer esse video tutorial rapidamente – bem rápido mesmo – explicando como fazer para centralizar, dando uma passada muito rápido em Modes (quirks e …

Por

Depois do Video Tutorial #6, muita gente disse que aprendeu como centralizar um layout, então, resolvi fazer esse video tutorial rapidamente – bem rápido mesmo – explicando como fazer para centralizar, dando uma passada muito rápido em Modes (quirks e strict) do Internet Explorer.

Tempo: ~7m05
Tamanho: ~3,50Mb
Formato: SWF

Assista o vídeo agora ou baixe para assistir depois.

Aqui vão alguns links para você poder se reforçar no assunto:

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

  • LUCAS TS

    Diego, sempre baixo esses videos, e é muito legal e ótimos
    Só tenho um Critica Construtiva, tente usar um outro compactador, sei que no windows o winrar é o que mais compacta, mas pra quem usa linux, é uma mer**.

    Se puder usar o proprio winrar só que gerando zip, ou bzip2(esse sim é bom).

    Agradeço

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

    Bem básico, mas tá bem mastigadinho pros iniciantes. :)

  • http://www.impactmedia.com.br/blog/ Davis Zanetti Cabral

    Bom, até hoje eu usava:

    #id {
    position:relative;
    left:50%;
    margin-left:-(quantidade / 2)px;
    }

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

    Putz, ai Davis eu também usava esta forma para centralizar meus layouts, e na sinceridade por muitas vezes me trouxe muitos problemas pois a diferença e que eu usava position:absolute; ai tinha hora que bichava em alguma parte do meu css, mas com a luz do nosso digníssimo Diego Eis meus problemas atuais e futuros acabaram de vez. :)

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

    Já estou esperando as proximas video aulda.

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

    Dae

    Apesar de já saber disso, muito bem explicado!

    Parabéns!

    Abraços!

  • Wellington

    Muito bom!!
    parabens
    obrigado!!

  • Jorge Vilaça

    Poxa, era exatamente disso que eu estava precisando !!!

    Muito Obrigado Pessoal, essa ajuda veio em boa hora.

    Párabéns pelo trabalho, continuem assim

  • http://www.brunodulcetti.com Bruno Dulcetti

    escrevi um artigo sober isso no imasters tb… alinhar à esquerda, centro e direita…

    show d bola… ;)

  • http://oliveira.digi.com.br Jonatas Oliveira

    Eu uso linux e também tive problemas com o formato do arquivo, como o LUCAS TS disse, seria interessante se você pudesse disponibilizar em outro formato (acho que o zip seria mais interessante, pois um suporte muito maior para os dois Sistemas Operacionais).

  • http://oliveira.digi.com.br Jonatas Oliveira

    Só atualizando .. consegui “unrarzar” com o unrar-nonfree, o que não tinha com o unrar.

    Tenho Ubuntu instalado na minha máquina e foi só executar ‘apt-get remove unrar’ e depois ‘apt-get install unrar-nonfree’.

  • http://tiagomadeira.net Tiago Madeira

    Dae…

    Bzip2 é com certeza melhor ou mesmo o Gzip, mas o “unrar” não teve problemas pra descompactar aqui no Slackware (a última versão, compilada a mão)… =) Acredito que o problema é que “unrar” não é padrão em todas as distribuições GNU/Linux (acredito que só nas mais “gráficas”). Por isso, realmente ficaríamos felizes se você compactasse usando o próprio Zip que é mais simples (“unzip arquivo.zip” tem em todas as distros que eu conheço).

    Interessante esses modes: quirks e strict. Eu já tinha feito vários layouts assim e já tinha percebido que com o meu layout não funcionava e aí já tinha sacado a parada do text-align:center. Acabava colocando em todas as minhas páginas (até nas que são HTML, não XHTML, puro mesmo). Mas pensei que fosse um bug estúpido do IE, não essa história de dois modos de renderização.

    Você podia fazer mais vídeos-tutoriais explicando as diferenças entre os dois modes… ;)

    Valeu!

  • Thiago

    Otimo tutorial diego, me ajudou bastante, porém estou com uma dúvida.
    No internet explorer 6, 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 (não limitado).
    Como posso resolver isso?

    obs.
    to usando resolucao 1024×768 , monitor 17 win2000pro.

  • LUCAS TS

    Caros,
    em consideração ao formato, ja tinha conseguido lá no primeiro comment descompactar, só quis deixar uma dica pro diego, ja que tive de fazer.
    assim
    apt-get install unrar-nonfree
    unrar e arquivo.rar
    apt-get remove unrar-nonfree

    como outro amigo disse.
    pra maior compatibilidade poderia ser usado o zip!

  • Pingback: Viche » VICHE CSS #2

  • joshua

    Respondendo ao Thiago… sua página está da forma como é explicado no tutorial… no IE6 e no FF estão do mesmo jeito, claro que no firefox é mais legal… eehhehehe Um abraço.

  • Fulvio

    Opa,

    muito bom o seu tutorial, mas não pude deixar de notar que existe uma pequena diferença da renderização entre o ie e o firefox: quando a coluna do centro é exibida no firefox, ela aparece perfeitamente centralizada; já no ie, a coluna aparece centralizada até quando termina o div da direita, depois vc pode notar um quebradinha no texto.

    Vc sabe como resolver esse problema?

  • http://www.romersantos.tk Romer Santos

    cara olha só, vi que vc sabe usar muito bem o flash, vc sabe usar o flash media server? nao consigo configuar ele ou sei la, nunk conecta, se puder me dar uma força agradeço muitooo, abração, meu msn e e-mail esta ai, flw

  • Cyntia

    Oi Diego. Bacana esse tutorial.Como estou iniciando no CSS, achei muito bom – coloquei varias propriedades pra ir vendo como ficava..
    No entanto, testei tirar a coluna da direita, pra ficar só com o meio e a esquerda. mas atrapalhou tudo.
    Daí arrumei com #meio{float:right;} e #meio{ margin: 0 0px ; e geral{ margin:0 auto;} Aí beleza..mas só no IE 6. Os demais browsers , a div meio se quebra e vai pra baixo da esquerda..

    E se eu coloco valor em margin da id meio, o IE aumenta também no lado direito..

    Como resolver isso?
    Valeu,
    Um abraço

  • http://www.nexsites.com.br Francisco Ferreira

    Olá galera!
    Não sei como centralizar o meu layout que foi criado no Fireworks (exportado como CSS) as Divs vieram com o Position: absolute, quando eu crio uma DIV geral que engloba tudo e centralizo as outras divs abaixo nao atendem. Já mudei o position de todas para relative…mas bagunça tudo… Como faço?

    Valeu

  • Fábio

    Puta que pariu !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Finalmente consegui encontrar alguém que explicasse essa coisa direito.

    Parabéns pelo trabalho… parabéns pela seqüência lógica no raciocínio… parabéns pela didática.

    FINALMENTE … UHUUUUUUUUUUUU !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • LeandroSustenido

    Uma Merda!!!
    ñ o tutorial em si, mas a execução.
    te recomento escrever antes o q vc vai falar, para ñ se perder nem dar informações desnecessarias ou repetidas.

    No mais, Tuto bem útil.