por Diego Eis
Janeiro 24th, 2006
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.
Pode ser interessante ler:
Este post foi criado
na Terça-feira, Janeiro 24th, 2006 às 14:00 e está arquivado em Geral, Vídeos Tutoriais.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
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
Bem básico, mas tá bem mastigadinho pros iniciantes. 
Bom, até hoje eu usava:
#id {
position:relative;
left:50%;
margin-left
quantidade / 2)px;
}
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.
Já estou esperando as proximas video aulda.
Dae
Apesar de já saber disso, muito bem explicado!
Parabéns!
Abraços!
Muito bom!!
parabens
obrigado!!
Poxa, era exatamente disso que eu estava precisando !!!
Muito Obrigado Pessoal, essa ajuda veio em boa hora.
Párabéns pelo trabalho, continuem assim
escrevi um artigo sober isso no imasters tb… alinhar à esquerda, centro e direita…
show d bola… 
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).
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’.
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!
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.
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!
[…] Vídeo Tutorial #7 - Centralizando o Layout Horizontalmente. […]
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.
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?
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
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
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
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 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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.