Ir para conteúdo

POWERED BY:

Arquivado

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

Rodney3400

Div Ultrapassa Tabela

Por , em Javascript

Recommended Posts

Rodney3400    0

Rodney3400
Postado

Ola a todos,

 

Tenho uma Div dentro de uma tabela, que contem um texto. Quando o texto é maior que a tabela, a div expande mas a tabela continua, e a tabela não tem altura fixa, se eu tiro a div o texto empurra a tabela, alguem poderia dar uma opinião de como ajusta-las?

 

Obrigado

 

Rodney

Compartilhar este post

Link para o post
Compartilhar em outros sites

bmkt    0

bmkt
Postado

para que voce usa a div se ja tem a tabela? ou a tabela se ja tem a div?

 

se for uma consulta de banco usa tabela mesmo, senão deixa a div... a tabela expande normal quando o texto fica grande, a div você tem que aplicar CSS para que ela siga o tamanho do texto, o que voce pode fazer é determinar uma quebra de linha, assim toda hora que chegar nesse valor voce quebra a linha e continua o texto na linha abaixo, voce mantem um tamanho fixo na div/tabela e quebra a linha para nao desalinhar a pagina...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodney3400    0

Rodney3400
Postado

Eu uso uma tabela, mas uso conteúdos vindo do banco de dados, conforme seleciono no menu, as div ficam dentro de uma tabela e esta não contem altura fixa, dai a div uso assim

<div id="quadroMenu">

<div id="um" style="visibility: visible; position:absolute; top:0px; left:0px;">
   div um
</div>
<div id="dois" style="visibility: hidden; position:absolute; top:0px; left:0px;">
   div dois
</div>
<div id="tres" style="visibility: hidden; position:absolute; top:0px; left:0px;">
   div tres
</div>

</div>

conforme aciono no menu a primeira esconde e mostra a que eu quero. e o css das divs estão assim:

div#quadroMenu {
	top: 0px;
	width: 380px;
	padding: 0px;
	text-align: left;
	margin: 0 auto;
	position: relative;
}

Obrigado

editado por Otata 12/01/2009 14:18

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Veja se o código abaixo resolve seu problema:

 

<html>
<head>
	<title>Mostrar DIVs em tabela - redimensionar</title>
</head>
<body>

<script language="JavaScript">
/*
Código desenvolvido e testado por: klonder
Postagem exclusiva em http://forum.imasters.com.br/index.php?showtopic=323623
*/

function escrever(e) {
 
var texto1 = document.getElementById("texto1");
var texto2 = document.getElementById("texto2");
//Apagando todos os divs existentes
//Você poderia utilizar um laço para muitos divs
texto1.style.display = "none";
texto2.style.display = "none";

//Exibindo apenas o div que foi passado como parâmetro na função.
e.style.display = "block";
}
</script>

<table border="1" style="width:500px">
<tr>
	<td valign="top">
	Clique nos links abaixo:
	<br>
	<a href="java script:escrever(texto1)">Texto1</a>
	<br><a href="java script:escrever(texto2)">Texto2</a>
	</td>
	<td width="70%" valign="top">
	<div id="texto1" style="position:relative; display:none">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>
	<div id="texto2" style="position:relative; display:none">Ajax é a abreviação para 'Asynchronous Javascript and XML'. O objetivo dessa técnica é criar aplicações Web mais interativas e dinâmicas melhorando assim a experiência do usuário. Ajax não é uma tecnologia mas sim um termo que se refere ao uso de um grupo de tecnologias integradas (HTML/XHTML + XML/SLT + CSS + DOM + Javascript + XMLHttpRequest).Fórum Moderado por: klaygomes</div>
	
	</td>
</tr>
</table>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

boa-ventura    0

boa-ventura
Postado

tente assim

 

<div id="quadroMenu">

<div id="um" style="visibility: visible;">
   div um
</div>
<div id="dois" style="visibility: hidden;">
   div dois
</div>
<div id="tres" style="visibility: hidden;">
   div tres
</div>

</div>

conforme aciono no menu a primeira esconde e mostra a que eu quero. e o css das divs estão assim:

div#quadroMenu {
	top: 0px;
	width: 380px;
	padding: 0px;
	text-align: left;
	margin: 0 auto;
}

Compartilhar este post

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

Informação importante

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

  Aceito