[Resolvido] Converter DIV em Table

alexjose123 · Março 5, 2012

Estou em fazendo a manutenção de um página com dezenas de DIVS e optei por usar Table afim de alinhar o conteúdo. O que mais fácil do que em CSS e JavaScript puro.

Enfim, não encontrei até agora uma ferramenta pronta ou um método de conversão viável .

Gostaria de ajuda ou sugestão de vocês.

Grato pela Atenção!

NetBoy16 · Março 5, 2012

Naooo, n faca isso, continue com divs no seu layout, nao faça uma regressao, continue utilizando divs para o layout pois é a forma mais "saudavel", seguinte, seu problema é alinhamento de div certo? se você puder postar o codigo fica mais facil, mas enquantoi você nao posta acredito que esse tutoiral te ajude: Clique aqui

alexjose123 · Março 6, 2012

Naooo, n faca isso, continue com divs no seu layout, nao faça uma regressao, continue utilizando divs para o layout pois é a forma mais "saudavel", seguinte, seu problema é alinhamento de div certo? se você puder postar o codigo fica mais facil, mas enquantoi você nao posta acredito que esse tutoiral te ajude: Clique aqui



<style type="text/css">

#box{
margin: 10% auto;
width: 40%;
height:	100%;
}

span{
font-weight:bold;
font-family:Tahoma, Arial;
font-size:90%;
}

#box a{
color: #27373F;
text-decoration: none;
font-family:Tahoma, Arial;
font-size:11px;
}

.classAlinharLinks{
float:left;
margin-top:-3px;
margin-right:30px;
}

.classAlvo{
margin:	auto;
height:	100%;
width: 90%;
font-size:12px;
font-weight:normal;
display:none; /* iniciar todas as divs ocultas */	
}

.classBordas{
border-style:solid;
border-width:1px;
margin-bottom:10px;	
padding:5px;	
position:relative;
}

/* PROBLEMA ?????????? */
.classColunaEsquerda{
left:auto;
	width: 48%;
}

.classColunaDireita{
right:auto;
width:49%;
margin-left: 48%;
}

</style>

Outra parte do código...

 


<body>

<div id="box">

<div   class="classBordas" >

	<span>Principais Telefones/E-mails da Administração</span>

   <div id="principaistelefone" class="classAlinharLinks">
       <a href="#" onClick="javascript:fadeOut('alvo1', 0.1)" accesskey="ocultar principais telefones">  ocultar  </a> |
       <a href="#" onClick="javascript:fadeIn('alvo1', 0.1)" accesskey="exibr principais telefones" > exibir  </a>
   </div>


<div id="alvo1" class="classAlvo">

<div class="classColunaEsquerda">
    	<span>  	Presidência   </span> 
     <p> (99) 9999-9999 </p> 
     <p>  <a href="mailto:algumacoisa@trt6.jus.br">algumacoisa@trt6.jus.br </a></p>
</div>

<div class="classColunaDireita"> 
     <span> Sec. Geral da Presidência  </span> 
     <p> (11) 1111-1111</p> 
     <p>  <a href="mailto:algumacoisa@trt6.jus.br">algumacoisa @trt6.jus.br</a></p>
</div>
</div> --div alvo1--
</div> --div bordas--
</div> --div class box --

</body>
</html>

O problema esta em alinhar a coluna esquerda com a direita. E manter o conteúdo dentro das bordas.

Quando utilizo a propriedade FLOAT, fica impossível alinhar e manter dentro das bordas. Por isso, estou

sendo obrigado a retroagir e usar tabelas.

Se você tiver alguma idéia de como posso proceder ???

NetBoy16 · Março 6, 2012

/* SOLUCAO?????????? */
.classColunaEsquerda{
       float:left;
       width: 48%;
}

.classColunaDireita{
       float:right;
       width:49%;
}

Ou tenta ajustar com margins, seria mais facil se eu pudesse acessar o seu site, dai eu dava uma inspecionada melhor :thumbsup:

Marrabel · Março 6, 2012

Eu fiz os testes, veja se está ok pra você...

<style type="text/css">

#box{	    	

   	margin:10% auto;
   	width:40%;
   	height:auto;
}

span{
   	font-weight:bold;
   	font-family:Tahoma, Arial;
   	font-size:90%;
}

#box a{
   	color: #27373F;
   	text-decoration: none;
   	font-family:Tahoma, Arial;
   	font-size:11px;
}

.classAlinharLinks{
   	float:left;
   	margin-top:-3px;
   	margin-right:30px;
}

.classAlvo{
   	height: 100%;
   	width: 90%;
   	font-size:12px;
   	font-weight:normal;
   	display:none; /* iniciar todas as divs ocultas */   	
}

#alvo1{
margin-top:10px;
width:100%;
}

.classBordas{
	border:1px solid;
   	margin-bottom:10px; 	
   	padding:5px;
	position:absolute;
	width:auto;
}

/* PROBLEMA ?????????? */
.classColunaEsquerda{
   	float:left;
   	width:auto;
}

.classColunaDireita{
	float:right;
   	width:auto;
}

#clear{
clear:both;	
}
</style>

<body>    	
<div id="box">
<div class="classBordas" >
	<span>Principais Telefones/E-mails da Administração</span>
   	<div id="principaistelefone" class="classAlinharLinks">
   		<a href="#" onClick="javascript:fadeOut('alvo1', 0.1)" accesskey="ocultar principais telefones">  ocultar  </a> |
   		<a href="#" onClick="javascript:fadeIn('alvo1', 0.1)" accesskey="exibr principais telefones" > exibir  </a>
	</div>
	<div id="alvo1" class="classAlvo">
   		<div class="classColunaEsquerda">
   			<span>Presidência</span> 
      			<p>(99) 9999-9999</p> 
      			<p><a href="mailto:algumacoisa@trt6.jus.br">algumacoisa@trt6.jus.br </a></p>
   		</div>
   		<div class="classColunaDireita"> 
      			<span>Sec. Geral da Presidência</span> 
      			<p>(11) 1111-1111</p> 
      			<p><a href="mailto:algumacoisa@trt6.jus.br">algumacoisa @trt6.jus.br</a></p>
   		</div>
	</div>
</div>
</div>
</body>

GabrielFerrari · Março 6, 2012

Sem querer criar a velha e longa discussão de pq divs são melhores que tabelas e blá blá blá.

Mas uma coisa tem que se ter em mente!

Tabelas são para dados tabulares e layout não é um dado tabular.

CSS é confuso, estranho e difícil no começo, mas é extremamente mais fácil de se dar manutenção.

Mateus Avila Isidoro · Março 14, 2012

Pense na manutenção de uma tabela gigante, contendo table dentro da table. Seria terrível. A solução acima deve dar conta. É a teoria do box, que confunde muita gente. O firebug tem uma forma didática de ajudar, bastando escolher o elemento e clicar na aba exibição.

alexjose123 · Março 15, 2012

Aqui está: http://www1.trt6.gov.br/testepagina/tela2/

desde de já agradeço toda ajuda disponibilizada!

/* SOLUCAO?????????? */
.classColunaEsquerda{
       float:left;
       width: 48%;
}

.classColunaDireita{
       float:right;
       width:49%;
}
Ou tenta ajustar com margins, seria mais facil se eu pudesse acessar o seu site, dai eu dava uma inspecionada melhor :thumbsup:

Obrigado pela ajuda, porém apareceram coisas estranhas no código.

Acho que devemos estudar mais outras soluções.

Eu fiz os testes, veja se está ok pra você...

<style type="text/css">

#box{    		

   	margin:10% auto;
   	width:40%;
   	height:auto;
}

span{
   	font-weight:bold;
   	font-family:Tahoma, Arial;
   	font-size:90%;
}

#box a{
   	color: #27373F;
   	text-decoration: none;
   	font-family:Tahoma, Arial;
   	font-size:11px;
}

.classAlinharLinks{
   	float:left;
   	margin-top:-3px;
   	margin-right:30px;
}

.classAlvo{
   	height: 100%;
   	width: 90%;
   	font-size:12px;
   	font-weight:normal;
   	display:none; /* iniciar todas as divs ocultas */   	
}

#alvo1{
margin-top:10px;
width:100%;
}

.classBordas{
	border:1px solid;
   	margin-bottom:10px; 	
   	padding:5px;
	position:absolute;
	width:auto;
}

/* PROBLEMA ?????????? */
.classColunaEsquerda{
   	float:left;
   	width:auto;
}

.classColunaDireita{
	float:right;
   	width:auto;
}

#clear{
clear:both;	
}
</style>

<body>    	
<div id="box">
<div class="classBordas" >
	<span>Principais Telefones/E-mails da Administração</span>
   	<div id="principaistelefone" class="classAlinharLinks">
   		<a href="#" onClick="javascript:fadeOut('alvo1', 0.1)" accesskey="ocultar principais telefones">  ocultar  </a> |
   		<a href="#" onClick="javascript:fadeIn('alvo1', 0.1)" accesskey="exibr principais telefones" > exibir  </a>
	</div>
	<div id="alvo1" class="classAlvo">
   		<div class="classColunaEsquerda">
   			<span>Presidência</span> 
  				<p>(99) 9999-9999</p> 
  				<p><a href="mailto:algumacoisa@trt6.jus.br">algumacoisa@trt6.jus.br </a></p>
   		</div>
   		<div class="classColunaDireita"> 
  				<span>Sec. Geral da Presidência</span> 
  				<p>(11) 1111-1111</p> 
  				<p><a href="mailto:algumacoisa@trt6.jus.br">algumacoisa @trt6.jus.br</a></p>
   		</div>
	</div>
</div>
</div>
</body>

Obrigado pela ajuda porém não resolveu o problema, dá uma olhada no link : http://www1.trt6.gov.br/testepagina/tela2/

Talvez olhando o problema seja mais fácil de encontrar a solução.

/* SOLUCAO?????????? */
.classColunaEsquerda{
       float:left;
       width: 48%;
}

.classColunaDireita{
       float:right;
       width:49%;
}
Ou tenta ajustar com margins, seria mais facil se eu pudesse acessar o seu site, dai eu dava uma inspecionada melhor :thumbsup:

Marrabel · Março 15, 2012

crie no css:

#clear {
clear:both;
}

e insira esta div "vazia" no fim de cada "classAlvo".

<div id="clear"></div>

use o "#clear" sempre que precisar limpar os floats

Diéssica · Março 15, 2012

Adiciona no .classBordas:

overflow:auto;

:bye:

alexjose123 · Março 19, 2012

Marrabel, muito obrigado pela ajuda.

Resolveu meu problema.

Não sabia que era necessário LIMPAR o float ao fim da div .

crie no css:
#clear {
clear:both;
}
e insira esta div "vazia" no fim de cada "classAlvo".
<div id="clear"></div>
use o "#clear" sempre que precisar limpar os floats

Marrabel · Março 20, 2012

Pra mim é essencial, mas sem usar demais. Use os floats com cautela.

Que bom que deu certo. Parabens :clap:

Diéssica · Março 23, 2012

Alex, tentou só com o overflow:auto?

Tenta, a solução vai ser mais bonita :)

Arquivado

[Resolvido] Converter DIV em Table

Recommended Posts

alexjose123 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

alexjose123 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielFerrari 41

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mateus Avila Isidoro 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

alexjose123 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

alexjose123 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVASCRIPT - Comparar Data Digitada com Data Atual

Adiciona entrada em dicionario por variavel

Search Prettys Girls from your town for night - Live Women

Fóruns

Tempo Real

Informação importante