iMasters Fóruns: Aposentadoria do Faux-columns - iMasters Fóruns

Ir para

Página 1 de 1
  • Novo tópico
  • Responder

Aposentadoria do Faux-columns Santo Graal para design e Nova solução pra colunas

#1 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 23 fevereiro 2006 - 08:42

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.alistapar...es/fauxcolumns/

2) Equal Height Columns que consiste em colocar margins e paddings bottom gigantescos e esconde-los através do overflow-hidden: http://www.alistapar.../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.positioni...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.alistapar...es/fauxcolumns/
É uma técnica pra que as divs tenham a mesma altura (aparentemente).

Quote

http://alabrasil.blo...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.alistapar.../example_3.html

O que vcs acham?


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

#2 Membro offline   Hunter_ Ícone

  • Ligths Will Guide To Home ... I Will Try Fix You
  • Ícone
  • Grupo: Membros
  • Posts: 515
  • Cadastrado: 10-dezembro 03
  • Localização:Fortaleza - Ceará - Brasil

Postou 23 fevereiro 2006 - 08:58

Dei uma lida e achei interessante

#3 Membro offline   THE_WATCHER Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 785
  • Cadastrado: 18-janeiro 04
  • Localização:Salvador - BA

Postou 23 fevereiro 2006 - 09:06

Hum... interessante mesmo... Ctrl+D nele! heheheeh

#4 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 26 abril 2006 - 17:39

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...

Quote

<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>

#5 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 27 abril 2006 - 08:16

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. :( :(

#6 Membro offline   Tudo morre Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 24
  • Cadastrado: 09-fevereiro 04

Postou 27 abril 2006 - 10:21

Fala micox!
Aproveitando sua idéia fiz isso aí, testa e vê se dá certo.
Abraços
Fernando

<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>

#7 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 27 abril 2006 - 14:18

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">texto
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 />texto texto <br /><br />
</div>
</body>
</html>

#8 Membro offline   vicoluis Ícone

  • Ícone
  • Grupo: Membros
  • Posts: 90
  • Cadastrado: 04-maio 04

Postou 23 agosto 2006 - 21:58

ae, desculpe se meter.. hehe
mas escrevi um artigo aqui.. de como deixar com 100% de altura...
vale como + uma solução..

falow..

http://ajaxbox.com.b...-de-height.html

#9 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 11 setembro 2006 - 15:53

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.

#10 Membro offline   rflky3 Ícone

  • Ícone
  • Grupo: Banidos
  • Posts: 690
  • Cadastrado: 16-junho 06
  • Sexo:Indefinido

Postou 14 setembro 2006 - 15:42

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..

tudo (width:700px com display:table)
div 1 (width:300px)
div 2 (width:400px)
/tudo

sempre cai o div2.. ja penei muito por causa disso..
eu ainda acho melhor o faux columns..

[]s

#11 Membro offline   p.d Ícone

  • Pablo Davi Faria da Silva [:Þ]
  • Ícone
  • Grupo: Membros
  • Posts: 335
  • Cadastrado: 04-setembro 06
  • Localização:Brasil - Goiás - Goiânia

Postou 14 setembro 2006 - 16:18

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 ?

#12 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 15 setembro 2006 - 09:39

Quote

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á:

Quote

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 :joia:

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

Quote

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.

#13 Membro offline   rflky3 Ícone

  • Ícone
  • Grupo: Banidos
  • Posts: 690
  • Cadastrado: 16-junho 06
  • Sexo:Indefinido

Postou 15 setembro 2006 - 20:23

Sim micox.. fiz direito sim!
E qual vai ser o vivente que vai entender..
ou falar bem do site quando o site estiver quebrado pra ele..

Na verdade ele vai é falar mal.. por não funcionar adequadamente no FF dele!!
Ele não tem esse conceito de que somente "as vezes" este bug ocorre..
Sendo que não deveria nem existtir "as vezes".. ou seja.. "jamais" ocorrer..

Ou até mesmo.. fazer estas etapas ai..

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.

Agente vai ter de fazer isso no FF de cada internauta??
ou pôr um lembretezinho no site,
pedindo para ele fazer isso ai pra n qbrar por causa de um bug misterioso do FF????

Já sofri com este display:table (me chamaram de amador, de aprendiz) sendo que ja tenho um bom conhecimento disso tudo!!
Eu abandonei este display:table ai.. só me deu dor de cabeça e stress!

E não tem o que corrija ele!!!
Percorri o mundo pra solucionar isso.. e nada!
Olha este topico.. eu mesmo criei pra este problema..
http://forum.imaster...howtopic=182057

Experientes do ramo tiveram problemas para me responder!!!

[]s

#14 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 16 setembro 2006 - 19:01

Se acalme rflk, eu nao disse em nenhum momento que este método é melhor ou pior, disse apenas que é mais simples. heheh :joia:
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?

#15 Membro offline   rflky3 Ícone

  • Ícone
  • Grupo: Banidos
  • Posts: 690
  • Cadastrado: 16-junho 06
  • Sexo:Indefinido

Postou 18 setembro 2006 - 02:31

hehehe pow micox te quero bem cara.. relaxa..
num to surtando não!!

Eu resolvi (achei o problema) hehehehehe, mas não mantive o display:table!!
Saquei fora.. e finquei FauxColumns.. hehehehehehe, esta foi a solução!!

Não eh grilo não.. é bug do FF sim.. e to tentando resolver tbm.. pq eh uma mao na roda este display:table! o complicado eh este pau ai no FF...

Mas vamos ver os updates heheheh se resolvem!

[]s irmão!

#16 Membro offline   micox Ícone

  • elmicox.blogspot.com
  • Ícone
  • Grupo: Membros
  • Posts: 2334
  • Cadastrado: 31-maio 03
  • Localização:Goiânia/GO

Postou 18 setembro 2006 - 09:00

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.

#17 Membro offline   rflky3 Ícone

  • Ícone
  • Grupo: Banidos
  • Posts: 690
  • Cadastrado: 16-junho 06
  • Sexo:Indefinido

Postou 18 setembro 2006 - 17:15

Claro claro.. eu já mandei MP pros caras la!!!
Andei fuçando no forum deles.. mas nada..

[]s
Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)