Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

micox

Aposentadoria do Faux-columns

Por , em Desenvolvimento frontend

Recommended Posts

micox    2

micox
Postado

Neste post aqui são apresentadas as soluções que eu conheço para resolver a questão dos divs em formato coluna (lado a lado) não terem a mesma altura, dificultando assim fazer layout "colunares":

 

1) Técnica do Faux-columns que consiste em aplicar uma imagem de background pra simular que as divs tem a mesma altura:

http://www.alistapart.com/articles/fauxcolumns/

 

2) Equal Height Columns que consiste em colocar margins e paddings bottom gigantescos e esconde-los através do overflow-hidden: http://www.alistapart.com/d/holygrail/example_3.html

Encontraram alguns bugs no EqualHeight (aqui no fórum teve um cara que achou tb). Fizeram novas versões pra corrigir isto no Grupo de estudos sobre o EqualHeight: http://www.positioniseverything.net/articl...out/equalheight

 

3) Colunas com alturas iguais usando display table - Solução simples baseada em display: table e display: table-cell.

 

 

 

******************************************************************************

Obs.: O texto acima foi editado pra ficar mais fácil de entender ao procurar a solução. O post original está abaixo:

 

Ae pessoal, eu já tinha postado aqui mas acho que poucos viram. Então estou colocando aqui no principal...

Leiam e postem suas opiniões...

 

Pra quem não sabe o que é faux-columns: http://www.alistapart.com/articles/fauxcolumns/

É uma técnica pra que as divs tenham a mesma altura (aparentemente).

 

http://alabrasil.blogspot.com/2006/02/em-b...anto-graal.html

 

Ae, saiu já a algum tempo atrás (dia 8 de fev) este artigo muito bom sobre posicionamento. Como não ví ninguem aqui falando sobre o assunto estou postando o link.

 

Destaque para a parte final da explicação que, não sei se entendi direito, mas parece que acabou de aposentar o faux-columns: http://www.alistapart.com/d/holygrail/example_3.html

 

O que vcs acham?

O link oficial do OneTrueLayout - Equal Height Columns é este aqui: http://www.positioniseverything.net/articl...out/equalheight

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Dei uma lida e achei interessante

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Oeeeeeeeeeeeeeeee povo.Acabei também de desenvolver uma técnica que substitui o faux-columns e o oneTrueLayout.Ela consiste em simular uma tabela com o display:table e dar 100% de altura pras divs filhas.Lembrando que eu nao achei nada parecido na net.Se já existir algo, me falem. Se não existir, não se esqueçam de me citar nos créditos. heh :)Testem ae...

<style>#pai { border:1px solid black; display:table;}#pai div {border:1px solid blue; float:left; height:100%;}</style><body><div id="pai"><div>div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br />div grande <br /></div><div>div pequena</div></div></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Foi mal povo. Esse lance que eu fiz acima só funciona no Quirks mode.Eu coloquei os cabeçalhos xhtml direitim daí não funcionou não. :( :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tudo morre    0

Tudo morre
Postado

Fala micox!Aproveitando sua idéia fiz isso aí, testa e vê se dá certo.AbraçosFernando<style>* { padding: 0px; margin: 0px; height: 100% }body { background: #0f0; padding: 0px 20px; margin: 0px; height: 100% }#topo { height: 70px; background: #ff0; margin-top: 20px; border: 1px solid #000 }#conteudo { margin-left: 200px; background: #0af; height: 100%; border: 1px solid #000 }#menu { background: #f00; position: absolute; left: 20px; width: 200px; height: 100%;border: 1px solid #000 }</style></head><body><div id="topo"><h1>TITULO</h1></div><div id="menu">MENU</div><div id="conteudo">texto</div></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Dar certo dá sim. Mas perceba que a altura do menu e do texto está passando do total do tamanho da página, o que não quer dizer que a altura de um será aumentada se aumentar a altura de outro.

 

O que eu quiz dizer acima foi que, se o texto ro um texto muito longo, algo que ultrapasse a altura atual, o menu não o acompanhará.

 

Veja: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<title>The Holy Grail of Layouts: Example #3: A List Apart</title><style>* { padding: 0px; margin: 0px; height: 100% }body { background: #0f0; padding: 0px 20px; margin: 0px; height: 100% }#topo { height: 70px; background: #ff0; margin-top: 20px; border: 1px solid #000 }#conteudo { margin-left: 200px; background: #0af; height: 100%; border: 1px solid #000 }#menu { background: #f00; position: absolute; left: 20px; width: 200px; height: 100%;border: 1px solid #000 }	</style></head><body><div id="topo"><h1>TITULO</h1></div><div id="menu">MENU</div><div id="conteudo">textotexto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br />texto texto <br /><br /></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ae pessoal, garibei melhor as técnicas de colunas iguais usando display table que iniciei nos posts 4 e 7 deste tópico e fiz um tutorial no meu blog.

 

Pra quem se interessar:

 

Colunas com alturas iguais usando display table

 

Eu sempre uso esta técnica. Acho mais rápida e simples.

Daí editei o meu post inicial neste tópico pra inserir esta técnica também.

 

//vicoluis esta técnica sua usando javascript não é muito boa principalmente se o conteudo for maior que a tela do navegador. mas valeu a ajuda.

Té mais povo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

p.d    0

p.d
Postado

Tá. Otimo. Isso tudo eh muito claro pra minha cabeça flash ! kk mas tipo .. criei a danada da div e agora eu quero fazer uma que nao fique estatica, tipo flutue sobre o conteudo da pagina .. flutue no sentido de ficar por cima do restante e alinhada, sempre em topo e direta da pagina, independente da resolução do individuo. Preciso usar js ou to viajando ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

O problema deste display:table ai.. é que tem momentos.. que ele n renderiza como deveria.. e cai o ultimo div da direita pra baixo de todos.. no FF.. já trabalhei com isso ai.. ja zerei tudo com * (margin e padding:0)... e não adianta.. tipo..

 

 

sempre cai o div2.. ja penei muito por causa disso..

Realmente às vezes tem esse bug no só no firefox. Só às vezes.

Se está acontecendo sempre é porque não fez direito então. Lê novamente lá o tuto pra ver se resolve.

Ah, leia esse comentário meu lá:

Como eu já falei acima no post, o Firefox apresenta um bug MUITO estranho com esta técnica de vez em quando.

Às vezes, ele joga a segunda coluna para a linha de baixo misteriosamente.

Pra corrigir isto, basta você fazer algumas coisas bestas como:

1) Redimensionar o navegador

2) Minimizar/maximizar o navegador

3) Abrir a edição de CSS da página usando o Webdeveloper toolbar

4) Dar um simples F5 na página.

 

Realmente é um bug estranho, se alguém puder me explicar...

Valeu pelos help e testes aí rflk http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

----------------------

Tá. Otimo. Isso tudo eh muito claro pra minha cabeça flash ! kk mas tipo .. criei a danada da div e agora eu quero fazer uma que nao fique estatica, tipo flutue sobre o conteudo da pagina .. flutue no sentido de ficar por cima do restante e alinhada, sempre em topo e direta da pagina, independente da resolução do individuo. Preciso usar js ou to viajando ?

Cara, acho que se você postar a imagem do que você quer é melhor, eu não entendi direito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Se acalme rflk, eu nao disse em nenhum momento que este método é melhor ou pior, disse apenas que é mais simples. heheh http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Também não incentivei ninguém a usar.

 

Quem sabe no novo FF que tá saindo do forno agora esse bug não tenha sido resolvido. Aí sim, esta será a melhor solução.

 

 

--------

Editado: reli seu post lá e relembrei os problemas. Esse é realmente um bug misterioso. Vou tentar me esforçar pra matar ou contornar ele.

Se quiser tentar tb (mas parece que você grilou feio com o display table hehe).

Quem sabe um dia eu consigo.

Ou então aguardamos o novo FF antes de sair usando o display table.

 

-------

editado denovo:

ué, no último post você diz que conseguiu resolver.

conseguiu ou não?

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

hehe, diboas cara.Vamos torcer.Pelo menos este display:table serviu pra lembrar alguns fanáticos que o FF também tem bugs (apesar de bem menores e de serem resolvidos mais rápido) heheh.É, isso me deu uma boa idéia, vou ver se dou um jeito de reportar este bug pro pessoal do desenvolvimento do FF.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito