[Resolvido] Div Height

[Go Back 0]

Bom Dia...

 

Eu não sei mano, mas só acontece comigo essas coisas.

 

Eu fiz assim:

<div id="fera">
<table>
  <tr>
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td></td>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td></td>
     <td></td>
     <td></td>
  </tr>
</table>
</div>

 

E depois fiz um .css assim:

 

#fera{
  border:2px solid black;
  height:auto;
}

 

Mas não funciona... a borda da Div fica lá em cima, fica um retângulo 100% por 20px vamos supor e com a tabela em baixo. Sendo que a borda era pra ir até la no final da tabela, contornando.

Daí eu tenho que fazer fixo:

height:500px;

 

Mas assim não dá, porquê se depois quero aumentar mais campos na tabela, preciso ficar alterando o tamanho da Div.

E no IE não fica bom, mas no FF e no CH fica.

 

O Height:Auto, funcionaria em todos.

 

Mas não funciona. Porque ?

 

O que está faltando ?

[William Bruno 1501]

faz assim uê

<table id="fera">

pra que essa div ai ?

 

esta usando doctype ?

[Go Back 0]

[Estou Usando o DocType]

 

Não posso fazer assim porquê é um sistema de abas. =\ Dentro de cada aba possui uma tabela.

Assim:

 

<style type="text/css">
#tab_nav {
width: 95%;	
margin-left: 15px;
}

#tabs {
height: 19px;
position: relative;
}

#content {
position: relative;
padding: 15px;
border: 2px solid #78bee2;
height:250px; // Delimitei o tamanho aqui... 
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}

</style>
<div id="tab_nav">
  <div id="tabs">
     <a href="#" onclick="opentab(1);">Empresa</a>
     <a href="#" onclick="opentab(2);">Endereço</a>
     <a href="#" onclick="opentab(3);">Telefones</a>
     <a href="#" onclick="opentab(4);">Cobrança</a>
  </div>
  <div id="content">
     <div id="aba1"> Tabela </div>
     <div id="aba2"> Tabela </div>
     <div id="aba3"> Tabela </div>
  </div>
</div>

 

O CONTENT não pode ter um tamanho fixo, porquê cada Aba tem um tamanho diferente. A Primeira Aba tem uma tabela com 10 linhas, a segunda com 3 linhas e a terceira com 5 linhas.

Não posso determinar um tamanho fixo, porque terei que fazer isso por causa da primeira Aba, e depois o Content vai ficar exagerado para a Aba 2 e 3.

 

O exemplo que dei no meu primeiro Post era só pra saber como faz pra Div ficar do tamanho da tabela automaticamente....

[William Bruno 1501]

O exemplo que dei no meu primeiro Post era só pra saber como faz pra Div ficar do tamanho da tabela automaticamente....

isso já acontece naturalmente.

 

o teu problema decorre de outro lugar.

Por exemplo, #aba1, #aba2 e #aba3 estão flutuadas?

 

se estiverem, é esta a fonte do teu problema.

pesquise sobre a propriedade clear

 

 

entendeu ? as vezes o problema genérico, não mostra todas as variaveis do teu problema real.

por isso, se você tiver dúvidas sobre o 'pq acontece', tente não resumir, pois vamos perder o feeling da coisa.

[Go Back 0]

Então, elas não estão flutuando. O único objeto flutuante é a Div #tabs.

#tabs a, #tabs a:visited {
background: url(images/tab.jpg) top left no-repeat;
font-family: Verdana;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
display: block;
width: 142px;
height: 16px;
_height: 20px;
margin: 0 10px 0 0;
text-align: center;
outline:none;
padding: 3px 0 0 0; 
float: left;
}

 

:(

 

não consegui ainda, é tão complicado assim ?

[Evandro Oliveira 331]

Qualquer position que não seja static gera flutuação. Existe position ali colocado sem a menor necessidade. Não use se não sabe pra que ou como funciona.

 

Apesar do fato que muita gente faria as abas com listas (des)ordenadas, eu prefiro listas de definição, pois o conteúdo é o valor do que é disposto no tópico (aba)

Para isso, vamos usar os termos como abas, e os dados como conteúdos.

 

<dl id="tab_nav">
<dt>Empresa</dt>
<dd>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</dd>
<dt>Endereço</dt>
<dd>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.<br>
	The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</dd>
<dt>Telefones</dt>
<dd>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</dd>
<dt>Cobrança</dt>
<dd>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</dd>
</dl>

 

#tab_nav {
position: relative;
width: 95%;
}

#tab_nav dt {
cursor: pointer;
display: block;
float: left;
font: bold 12px Verdana, sans-serif;
height: 16px;
margin-left: 10px;
padding-top: 3px;
text-align: center;
width: 142px;
}

#tab_nav dd {
border: 1px solid #000;
display: none;
left: 0;
margin: 0;
margin-top: 20px;
padding: 0;
position: absolute;
width: 100%;
}

 

var dl = document.getElementById('tab_nav');
var abas = dl.getElementsByTagName('dt');
var paineis = dl.getElementsByTagName('dd');
for(var i = 0, ln = abas.length; i < ln; i++) (function(x){
abas.item(x).onclick = function(){
	for(var j = 0, lnb = paineis.length; j < lnb; j++) paineis.item(j).style.display = 'none';
	paineis.item(x).style.display = 'block';
}
})(i);
abas.item(0).click();

 

Por questões de acessibilidade (caso o usuário não possua suporte a javascript), vamos deixar as regras que têm a ver com o sistema de 'abas' a cargo do javascript, tornando a navegação possível, ainda que impossível utilizar as abas (aqui reside a mágica das listas de definição!!)

 

Procure e remova estas três regras do CSS:

#tab_nav dt { float: left; }
#tab_nav dd { display: none; position: absolute; }

 

E então, as adicionamos com javascript:

antes:

	abas.item(x).onclick = function(){

 

depois:

	abas.item(x).style.float = 'left';
abas.item(x).onclick = function(){

 

antes:

abas.item(0).click();

 

depois:

for(var i = 0, ln = paineis.length; i < ln; i++) paineis.item(i).style.position = 'absolute';
abas.item(0).click();

 

A regra do display já é aplicada no momento do clique.

[Go Back 0]

Ha mano... não vou refazer tudo por causa disso...

Se for pra refazer TUDO prefiro deixar assim então!

 

Não use se não sabe pra que ou como funciona.

Isso é um conselho ou uma ordem ?

 

Eu vim pedir ajudar pra DIV se adequar ao tamanho da tabela, nada mais.

Era só falar, Position gera flutuação. Então não vai funcionar o que você quer.

 

Vou tentar arrumar...

Pode fechar.

[Evandro Oliveira 331]

Isso é um conselho ou uma ordem ?

 

Conselho, eu não mando em ninguém.

 

 

Era só falar, Position gera flutuação. Então não vai funcionar o que você quer.

 

Position gera flutuação. Não vai funcionar como você quer.

 

 

Nota: Eu já entreguei pronto. É só trocar os valores de <div id="abaX"> por <dd>. Pelo tempo que você deve ter perdido esperando/procurando uma solução, acho que é mínimo o gasto que vai ter. No mais, boa sorte em futuras alterações.

[Go Back 0]

Pq você nao mostra como, em vez de fazer a pessoa começar do zero ?

você nao sabe as circunstancias que a pessoa tá.

 

Beleza cara, vlw.

[Evandro Oliveira 331]

Vamos lá, primeiro de tudo, se desarme. Qualquer um que poste aqui tem como objetivo te ajudar e não criticar, brigar, ofender ou te repreender. Por mais que pareçam palavras rudes, puxões de orelha - coisa que eu não vi, mas estou dando agora - também são formas de ajudar.

 

você nao sabe as circunstancias que a pessoa tá.

Sinceramente, não faço a menor questão de saber.

 

Nota: Eu já entreguei pronto. É só trocar os valores de <div id="abaX"> por <dd>. Pelo tempo que você deve ter perdido esperando/procurando uma solução, acho que é mínimo o gasto que vai ter. No mais, boa sorte em futuras alterações.

Reforço a afirmação. Já fazem mais de 24 horas e, se você ainda não encontrou uma solução, tenho certeza absoluta que já teria feito do zero, como diz, e resolvido o problema.

 

Se não está contente com a solução postada, basta informar que eu reabro o tópico e aguardamos novas alternativas.

 

O fato é que você procura um fórum de padrões web e não quer aceitar soluções que sigam os padrões. Sou capaz de apostar o que você quiser que estas tabelas que serão exibidas não possuem dados tabulares. No máximo uma ou duas, mas todas, creio cegamente que não.

Levou sorte de ninguém pedir pra postar o conteúdo das tabelas e dizer pra fazer da maneira correta. Aí sim você teria que começar do zero, refazer, ter todo o trabalho. Tudo isso porque começou de maneira incorreta, algo que eu quis te ajudar a corrigir e não fui aceito.

 

Para vários tópicos já respondi - e continuarei respondendo - que se algo não começa certo, não tem como terminar certo. Eu posso te dar uma solução que resolva seu problema em 2 linhas. Amanhã você volta ao fórum com um novo problema, consequente da 'solução' aplicada, esperando receber mais duas linhazinhas de gambiarra só pra entregar o trabalho no prazo. E o temporário fica permanente, até que o cliente/patrão te ligue, ou desesperado ou furioso, dizendo que o sistema não funciona corretamente na máquina da sobrinha/secretária. Corre você pro fórum denovo descobrir o problema.

 

A melhor e mais fácil maneira de se fazer as coisas é o jeito certo. Você está utilizando os elementos errados, pro propósito errado e da maneira errada e quer, por milagre, que dê certo. Além de te entregar pronto, funcionando, da maneira correta, ainda apontei uma vantagem na forma de uso e você simplesmente não se deu ao trabalho de usar a ferramenta de substituir do seu editor, só por dizer que não vai começar do zero? Veja se não tem um pouquinho de má vontade da sua parte aí.

 

Eu dou a minha participação (como membro) neste tópico por encerrada. Repito que se ainda estiver procurando por alternativas, basta informar que retiro o [resolvido] para que aguarde novas sugestões.

 

Boa sorte e sucesso.

[Go Back 0]

Meu caro,

 

Reforço a afirmação. Já fazem mais de 24 horas e, se você ainda não encontrou uma solução, tenho certeza absoluta que já teria feito do zero, como diz, e resolvido o problema.

Já resolvi. Obrigado pela preocupação! Detalhe: sem começar do zero e sem gambiarra. Outro detalhe: não vou postar a solução.

 

Se não está contente com a solução postada, basta informar que eu reabro o tópico e aguardamos novas alternativas.

 

Novas alternativas ? Só se for pelo William que tentou me ajudar de onde eu estava, não pediu pra eu começar do zero, aliás, ele deu dicas e eu fiz o que ele falou.

 

 

Sou capaz de apostar o que você quiser que estas tabelas que serão exibidas não possuem dados tabulares. No máximo uma ou duas, mas todas, creio cegamente que não.

 

Aqui você já demonstrou que não conhece a circunstâncias de ninguém. Isso que se paga por não querer dar a minima importância para a circunstância ou ao código da outra pessoa e querer achar que o SEU código vai resolver, então apague tudo e começo de novo, porque Eu comecei errado, porquê Meu código está errado e Estou fazendo errado.

Faça Jus a sua assinatura:

Na área de Webstandards, não dou suporte a dúvidas envolvendo lay-out's em tabelas.

Meu layout envolve tabela... nem era pra você ter postado.

 

Tudo isso porque começou de maneira incorreta, algo que eu quis te ajudar a corrigir e não fui aceito.

 

Que dó cara. É sempre assim né...não dá certo o código do moderador e é o usuário que não quis saber da solução, e ele é preguiçoso.

 

Eu posso te dar uma solução que resolva seu problema em 2 linhas.

 

Você é bom mesmo hein!

 

Corre você pro fórum denovo descobrir o problema.

 

Você nunca fez isso.

 

Veja se não tem um pouquinho de má vontade da sua parte aí.

Não vou ver.

 

Eu dou a minha participação (como membro) neste tópico por encerrada. Repito que se ainda estiver procurando por alternativas, basta informar que retiro o [resolvido] para que aguarde novas sugestões.

 

Já havia pedido pra colocar como Resolvido. Mas é claro que você ia vim querer dar satisfação no tópico e dar lição de morar no usuário e falar que ele faz tudo errado.

 

Boa sorte e sucesso.

 

Não preciso de sorte e nem sucesso.

Boa Féraaa!