Ir para conteúdo

POWERED BY:

Arquivado

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

Drica Mata Gates

texto longo quebra layout fluido 3 colunas na DESGRAÇA do internet exp

Por , em Desenvolvimento frontend

Recommended Posts

Drica Mata Gates    0

Drica Mata Gates
Postado

TÔ PUT@@@@ DA VIDA COM O INTERNET EXPLORER 6!!!!!!

 

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

 

O que vou comentar aqui é para usuários mais experientes de WEB STANDARTS, só eles poderão responder essa dúvida:

 

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

 

Depois de muito tempo de estudo, cheguei a desenvolver alguns HOLY GRAILs de estruturação CSS (LAYOUTS FLUIDOS DE 3 COLUNAS) porém... surgiu uma DESGRACEIRA MISERÁVEL que talvez alguém aqui (pouco provável) saiba a resposta (HACK):

 

Vamos lá:

 

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

 

LAYOUT FLUIDO 3 COLUNAS:

 

1 Float Left... 150 px.. BUNITO!!!!

1 Float Right... 150 px... Que lindo!!!!

1 Meio fluido... margin 0 150px 0 150px... Ô maravilha!!!!

 

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

 

A vida fica bunita assim...

tudo funciona bunito...

que blza...

 

IE6?? FUNCIONA!

IE7??? FUNCIONA!!!!

FIREFOX??? FUNCIONA!

OPERA??? CLARO Q FUNCIONA!

 

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

 

OK, OK... tudo bunitu... tudo lindo... mas aí...

suponhamos que o texto do conteúdo do MEIO extrapole a margem...

(ahhh mas peraí... pq alguém seria otário pra fazer isso????

RESP> Ué... e se eu tenho uma lista de comentários onde o usuário pode colocar dinamicamente um comentário assim:

 

OOOOOOOOOOOOOOOOOOOOOOI GOSTEI MUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUITO DESTE SITE!

 

ou insira uma imagem de 5000x3000 pixels (larguraxaltura)

 

Sacou?

 

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

 

Adivinha o que vai acontecer??? ADIVINHA A m*****, A DESGRAÇA QUE VAI ACONTECER????

 

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

 

- Bom... no FF ... ele simplesmente joga o conteúdo pra dentro da FLOAT RIGHT... nada mais que isso... é bom? não... mas ok... passa....

- NO Ópera??? você já sabe... dá na mesma...

 

... e agora... e AGORA!!!! testar nas MERDAS da microsoft...

 

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

 

IE7???? *suspense... quem diria??? também faz o mesmo que o FF... então passa... blza...

 

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

 

Agora... agora... NA m***** DESGRACENTA DO INTERNET EXPLORER 6!!! ESSA m***** DESGRACENTA JOGA TODO O FLOAT RIGHT e o próprio MEIO PRA BAIXO DO FLOAT LEFT!!!! isso causa confusão para os usuários que visitam o site e não vêem nada além do menu da esquerda (FLOAT LEFT)

 

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

 

Solução???

 

Você poderia dizer... faz um WordWrap... quebra o texto e pronto.... E se for imagem??? Tem um script pra isso também e tal...

 

E eu diria:

Não... não... quando se tem tags html as coisas complicam pra fazer word wrap... de 50 testes que fiz aqui nenhum scripts para fazer wordwrap não foram performáticos quando tem muito texto ou muito acesso em uma página...

 

Então... tem saída???

 

sem é claro... ter de usar tabelas... (ARGHHH.. não me mata não)

 

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

Solução:

 

1. quando o texto ou imagem for maior que o tamanho da DIV... deixar q ele entre na DIV da Direita (FLOAT RIGHT) e não o jogue pra baixo

mas... como fazer isso funcionar na m***** do internet explorer 6???

 

2. fazer um wordwrap via CSS (q só será possível na CSS3, pelo q sei)

 

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

 

Então... tem outra solução????

 

 

=============================================

Abaixo o código exemplo da DESGRAÇA PURA:

<!-- Começo da desgraça --><html><head><style>	#left 	{		width:150px;				float:left;		background-color:#00FFFF;	}	#right	{		width:150px;				float:right;		background-color:#99FF66;			}		#main {		margin: 0 150px 0 150px;		background-color:#FFCCCC;			}</style></head><body>	<div id="general">		<div id="left">		  <p>ESQUERDA</p>		  <p>ESQUERDA</p>		  <p>ESQUERDA</p>		  <p>ESQUERDA</p>		  <p>ESQUERDA </p>		</div>		<div id="right">		  <p>DIREITA</p>		  <p>DIREITA</p>		  <p>DIREITA</p>		  <p>DIREITA</p>		  <p>DIREITA</p>		</div>										<div id="main">			EXEMPLO DA m***** NO IE6: (teste no FF ou IE7... depois teste na desgraceira do IE6)<p>			Exemplo: MERRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<p>			<p>No IE7 ISTO AQUI COME PARTE DO FLOAT RIGHT....			não é legal,,, mas é isto que eu quero... 			<p>Na DESGRACA do IE6 ELE QUEBRA PRA BAIXO, NO FINAL DO DIV left... não é uma PALHAÇADA???? DESGRAÇA DO #@?$%~!			<p>DESGRACEIRA DOS INFERNOS!			tem como essa p**** do IE6 entender como o FF ou IE7??? ajuda por favor!!!!		 			<p>bjos...		 			<p>Drica		</div>	  </div></body></html><!-- Fim da desgraça -->

Se alguém puder me ajudar, agradeço muito... de coração

 

Bjos,

 

Drica

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kolgrim    1

Kolgrim
Postado

Defina um Doctype para o documento, troque o <style> por <style type="text/css"> e feche todas as tags que estão abertas! =)Se o erro persisitir, coloca o seu código aki!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Drica Mata Gates    0

Drica Mata Gates
Postado

Defina um Doctype para o documento, troque o <style> por <style type="text/css"> e feche todas as tags que estão abertas! =)Se o erro persisitir, coloca o seu código aki!

Caramba... não é questão de Doctype nem de usar style type="text/css"... já fiz isso obviamente...O código já está aqui... A caca está mais em cima, senhozinho malta...Mas vlw pelo menos o interesse em contribuir...Próximo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Utilize a propriedade overflow.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Drica Mata Gates    0

Drica Mata Gates
Postado

Olá,

 

Utilize a propriedade overflow.

 

Cumps [*]

ahhh overflow....

Que bom se overflow resolvesse no IECA 6.0 (overflow:auto)... a m.... desgracenta e sem qualidade do IECA!!!!

O problema é que não poderia delimitar um height máximo (e usar overflow:auto, scroll, o q diabo for) para um texto que não sei quanto de height terá... ou seja... ficaria um scroll gigante em determinados casos onde pioraria o problema... daí você me pergunta o que isso tem haver??? se você pensar direito você mesmo responderá...

 

Mas vlw mais uma dica q não mata o bug no IECA 6.0

 

Bjo

 

Próximo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

kerigma    0

kerigma
Postado

a melhor maneira é limitar o envio de imagens à um determinado tamanho... e quebrar e colocar uma string nos comentários que limite o numero de caracteres em uma palavra... você usa php? se for um sistema como o wordpress..deve ter um plugin que faz isso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Drica Mata Gates    0

Drica Mata Gates
Postado

a melhor maneira é limitar o envio de imagens à um determinado tamanho... e quebrar e colocar uma string nos comentários que limite o numero de caracteres em uma palavra... você usa php? se for um sistema como o wordpress..deve ter um plugin que faz isso...

Olha... agradeço seu interesse em propor outra idéia... scripts wordwrap (tanto do lado server como client) não são performáticos para grandes portais.Gostaria que alguém pelo menos analisasse o script que enviei acima no IE6 e em algum outro browser para entender a questão...Acredito que deve haver um hack escondido, alguma coisa miraculosa... algum jeito de fazer com q IECA 6 renderize a estutura da mesma forma q IECA 7 e os bons browsers fazem...Esta é a questão...Se alguém conseguir, o crânio, a MENTE deste fórum... então já estará bom.Obrigadabj

Compartilhar este post

Link para o post
Compartilhar em outros sites

mELANKEE.php    0

mELANKEE.php
Postado

overflow-x: hidden;

 

todas as linhas que podem ser quebradas serão quebradas e tudo q for maior q o tamanho x não aparecerá por inteiro, e os usuarios terão q c adequar a regra.

não use scroll, fica muito feio

 

somente overflow não ajudaria muito, mas overflow-x axo q resolve ;)

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