[Resolvido] Problemas com quebra de linha

[Gustavo Pastorino 0]

Bom, antes de receber pedradas só queria falar que já fiz de TUDO que vi na internet, passei horas aqui pesquisando sobre e nada funcionava... tentei outras alternativas mas o MESMO problema persistia, mesmo que outros fossem melhorados ou não.

 

Começando, eu tenho uma div principal (pai), onde eu criei duas divs filhas.

Uma lateral com float: left para grudar na esquerda e outra à direita também com float left (no caso de textos pequenos não quero ele à direita :)

 

O problema é: quando insiro um conteúdo grande (um texto digamos de 3 parágrafos) ele NÃO quebra de jeito NENHUM.

tentei mexer com display, word-wrap e várias outras coisas.

 

O engraçado é que isso NUNCA me aconteceu :/ uso css a muito tempo e é a primeira vez que isso ocorre, deve ser alguma burrada bem besta.

 

Quando eu insiro um texto muito grande ele continua (caso eu deixe o position: absoluto) ou ele pula pra baixo da div da esquerda (com o position: relative), mas em ambos os casos ela iria ficar normal caso a div quebrasse a linha automaticamente quando o texto chegasse em seu final.

 

De tudo que eu fazia a única coisa que mudava era o comportamento da div (ficava, acompanhava o texto, modificava o pai, pulava pra baixo, pra cima, grudava em tudo que é canto, mas em TODOS os casos o texto sempre continuava atééeééééééééé)

 

O desespero é tão grande que até usei o DreamWeaver pra tentar resolver (sou totalmente contra, mas vou falar que fiquei MUITO impressionado com a facilidade que é configurar as propriedades css por lá.. vou rever meus conceitos de bloco de notas que uso a anos, caso ele não estrague todo meu html como já aconteceu outras vezes)

 

Pra vocês verem eu nem cheguei a mexer nos paddins, margins, tamanhos e detalhes.. esse problema me gastou umas boas horas

as vezes vocês vão ver algo tipo "olha, ele faz isso mas é melhor fazer de outro jeito, desse jeito fica feio, bla bla bla" mas nem precisa perder tempo :P esse código tá completamente away em relação a "beleza" e sim tentei só ajeitar meu problema pra resolver o resto. Só postei mesmo o codigo que muita gente ia ficar querendo ver ele :P

 

botei a div CENTRO com bg em vermelho pra ver à reação da div toda em relação à div pai.

 

#back {	 PAI
	position: relative;
	margin: 0 0 0 -400px;
	padding: 0;
	left: 50%;
	height: 70%;
	width: 760px;
	background: #fff;
}

#nav {	  COLUNA DA ESQUERDA COM O MENU
	position: relative;
	float: left;
	padding: 0 7px 0 0;
	margin: 0;
	border-right: 1px solid #91110B;
	height: 100%;
	width: 25%;
}

#corpo {	  CORPO 
	float: left;
	text-align: justify;
	weight: 60%;
	background: #ff0000;
}

Valeu pela ajuda.. tenho um prazo até grande pra entregar, mas nem entrei na parte de ajax, php e mysql :// então vou tar no sal se enrolar demais ahahha

 

Abraços.

 

edit: só uma observação antes que qq pessoa fale "AAAAA SEUS COMENTS TÃO ERRADOS, AAHAAH".

esses comentarios depois das div's são pra vocês, eles não constam no arquivo css obviamente

[MartinsV 0]

E ai Gustavo, beleza?

 

Eu não entendi direito o seu problema...

 

você quer que, quando o texto seja grande ele fique embaixo da div da esquerda, é isso??

 

Passa o código certinho com o texto q você quer talz, pra podermos dar uma olhada melhor!!

 

Abraços

[Gustavo Pastorino 0]

não não, eu só quero que a linha quebre quando chegue no final da div. ela sempre continua e zoa com tudo e não sei pq..

só preciso postar isso :P não tem mais o que analizar.

 

ela desce pra debaixo da outra div quando fica no relative, esse problema é fixado quando eu boto absolute, MAS, de qualquer jeito, NENHUM dos problemas ocorreriam se a linha fosse cortada automaticamente. só quebra de linha mesmo, é tudo que eu quero :P

[brcontainer 16]

Como o Martins disse:

Passa o código certinho com o texto q você quer talz, pra podermos dar uma olhada melhor!!

Ponha um link para analizarmos melhor ou ponha os Divs (parte html) dos seletores abaixo

#back

#nav

#corpo

 

falow

[Ronaldo Bitencourt 0]

acho que entendi oque você precisa,

 

heheh vamo lá

você quer q um simpes paragrafo quebre linha não é mas eplo q vi ali você usa nas dis a proppiedade width com porcentagem ou seja relativo ao tamanho da página tenta colocar estático no tamanho que você precisa que eu tenho certeza que o seu <p> vai quebrar linha ;)

 

 

caso não seja isso posta um link com o code completo ou coloca ele aqui !!!

 

falow !!

[Gustavo Pastorino 0]

então, não funcionou não.

eu acho que tou esquecendo de algo pq tou mto apressado, nem fiz classes nem nada elaborado ainda :( podem ver que ta tuuuuuuuudo no começo.

a sim, e o rodapé tá de fora até eu ajeitar isso ahhahahaa tirei tudo só se resolver isso

 

css :

body {
	margin: 0;
	padding: 0;
	background: #9D9D9D;
	font: 80% "Lucida Sans Unicode", verdana, helvetica, sans-serif;
}

#back {
	position: relative;
	margin: 0 0 0 -400px;
	padding: 0;
	left: 50%;
	height: 70%;
	width: 760px;
	background: #fff;
}

#nav {
	position: relative;
	float: left;
	padding: 0 7px 0 0;
	margin: 0;
	border-right: 1px solid #91110B;
	height: 100%;
	width: 25%;
}

#corpo {
	float: left;
	text-align: justify;
	weight: 50%;
	background: #ff0000;
}

#menu {
	text-align: right;
	margin: 0;
	padding: 10px 0 0 0;
}



#menu ul {
	list-style: none;
	
}

#menu li {
	margin: 0 0 4px 0;
}

#login {
	text-align: right;
}



#footer {
	position: relative;
	margin: 0 0 0 -400px;
	padding: 1px;
	left: 50%;
	width: 800px;
	text-align: center;
	color: #fff;
	background: #91110B;
}

input {
	border: 1px solid #91110B;
	margin: 4px 0 0 0;
	padding: 1px;
}

html (só body):

<body>

<div id="back">

	<div id="nav">

		<div id="menu">
		<ul>
			<li>menu1</li>
			<li>meeeeeenu2</li>
			<li>m3</li>
			<li>menu4</li>
			<li>meeeenu5</li>
		</ul>
		</div>

		<div id="Login">
			Login: <input type="text" size="10"><br>
			Senha: <input type="password" size="10"><br>
			<input value="ok" type="button">
		</div>
	</div>

	<div id="corpo"><p>lala</p>
	</div>


</div>


</body>
</html>

[micox 2]

Se for um url ou qualquer texto emendado (sem espaços) geralmente dá problema pra quebrar mesmo.

Vê se isso aqui ajuda: http://elmicox.blogspot.com/2006/05/script...rd-wrap-no.html

[programador php 0]

acho que isso ajuda!!

 

http://www.blooberry.com/indexdot/css/prop...xt/wordwrap.htm

 

abraço

[Gustavo Pastorino 0]

nenhum dos dois funcionaram (como já tinha falado antes, word-wrap NÃO funciona)

não são textos sem espaços, botei até a lorem lá

se alguem puder ajudar

[rudneitl 0]

Fala galera, enfrentei esse mesmo problema e um guru meu em CSS deu a idéia de setar o width, o min-height e colocar overflow: auto nessa div... Funfou que é uma beleza, não fica estéticamente perfeito, mas isso vai evitar de quebrar todo o seu layout!

Espero ter ajudado.

 

[]'s

 

Rudnei

[Thiago Retondar 18]

rudneitl,

 

sei que sua intenção de ajudar é boa, mas tente fazer o mesmo em tópico recentes, pois neste sua última data é de 11/03/2008 - 19:22. ;)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Rodrigo Spin 0]

Quebra de linha é normalmente feita pela <div>. O que pode dar zica é esse exemplo abaixo:

 

ousuarioescreverumasequenciadecaractarescomoummontedekkk

 

Faça um teste neste fórum msm (mas depois edite): segure uma letra e deixe ela correr bastante, verá que a quebra de linha nesse caso não funciona.

[Rodrigo Spin 0]

Deu certo o editor no IE... era uma mancada minha com um bloqueador de javascript http://forum.imasters.com.br/public/style_emoticons/default/joia.gif