Tirar tabela e colocar CSS

Tudo morre · Maio 1, 2006

Olá amigos, estou recolocando uma dúvida que apresentei a alguns tópicos atras e não tive uma resposta satisfatória.

Acontece que tenho um layout que gostaria de eliminar uma tabela, substituindo por CSS e assim deixar o código nos padrões. Já pesquisei bastante e tentei diversas formas de alteração mas em nenhuma delas consegui que o layout ficasse idêntico a esse com a tabela, que é o que preciso.

Como disse acima, já coloquei essa dúvida aqui e até agora não tive uma solução, alguns tentaram ajudar, outros apenas informaram que sempre é possível fazer a mesma coisa que se faz com tabelas usando webstandards e que era só pesquisar mas, na prática mesmo, ninguém resolveu.

Se alguém souber como se faz, por favor informe, não adianta dizer "olhe esse link" ou "veja no site do fulano" pois, já pesquisei muito mesmo e não encontrei(ou não soube como fazer) a solução.

Espero que alguém possa ajudar, senão, vou começar a acreditar que ainda precisaremos das tabelas por algum tempo para montar um layout simples.

Obs. O código está abaixo pois, no momento, não tenho onde hospedar.

Obrigado a todos.

Fernando

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style>* {margin: 0;padding: 0;}body {background-color: #fff;padding: 15px;}#geral {width: 100%;background: #000;}.tabela { width: 100%; }.topoesq {background: #dd0;width: 160px;height: 80px;text-align: center;}.topodir { background: #dd0; }.barraesq {background: #aff;width: 160px;height: 30px;text-align: center;}.barradir {background: #aff;text-align: center;}.conteudoesq {background: #ded;width: 160px;vertical-align: top;}.conteudodir {background: #ded;vertical-align: top;}h1 {text-align: center;line-height: 80px;padding: 0 0;margin: 0 0;color: #fff;font-family: 'comic sans ms', verdana, arial, sans-serif;font-size: 200%;}h2 {text-align: center;margin: 10px 0 10px 0;font-family: arial, helvetica, sans-serif;font-weight: bold;font-size: 90%;color: #777;}h3 {font: 110% verdana, Tahoma, Sans-Serif;text-align: center;color: #000;background: #eff;line-height: 40px;margin: 25px 35px 25px 35px;border: 1px solid #000;}.conteudo {font-family: verdana, arial, helvetica, sans-serif;font-size: 90%;color: #000;margin: 15px;}</style></head><body><div id="geral"><table class="tabela" cellspacing="1" cellpadding="0" border="0"><tr>LOGO[b]TITULO[/b]<tr>DATAMENU HORIZONTAL<tr>[b]MENU VERTICAL[/b]<td class="conteudodir">[b]TITULO DO TEXTO ABAIXO[/b]<p class="conteudo">O layout básico é esse, muito simples não? Meu problema é fazerfuncionar no IE, Opera, Netscape e no Firefox. O que acontece é que quando consigo fazeruma coisa, a outra para funcionar. As vezes essa borda que separa a coluna esquerdada direita não aparece, dependendo da altura de uma das colunas. Já consegui fazer olayout exatamente como eu queria, só que usando largura fixa de 770px quando na verdadequero usar largura de 95% porém a coluna da esquerda com medida fixa de 160px.Pra fazeresse aqui misturei tabela com CSS e assim funciona em qualquer navegador.<br />Obs. Asbordas e as margens fazem parte do layout mesmo.</p></body></html>

guinuranti · Maio 1, 2006

só não tá funcionando 100% no firefox, to tentando achar uma resposta pra isso no momento.

dê um zóio aí e me diga se é por ai mesmo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>css, vamo ve</title><style type="text/css">body{  text-align: center;  margin: 15px;  padding: 0;}#geral{  text-align: center;}#logo{  border: 1px solid #000000;  background-color: #FFCC00;  width: 15%;  height: 80px;  float: left;}#topo{  height: 80px;  background-color: #ffcc00;  float: left;  width: 84.7%;  border-right: 1px solid #000000;  border-top: 1px solid #000000;  border-bottom: 1px solid #000000;}#data{  border-left: 1px solid #000000;  border-right: 1px solid #000000;  border-bottom: 1px solid #000000;  background-color: #FFCC00;  width: 15%;  height: 30px;  float: left;}#menu_horizontal{  height: 30px;  background-color: #ffcc00;  float: left;  width: 84.7%;  border-right: 1px solid #000000;  border-bottom: 1px solid #000000;}#menu_vertical{  border-left: 1px solid #000000;  border-right: 1px solid #000000;  border-bottom: 1px solid #000000;  background-color: #FFCC00;  width: 15%;  float: left;}#texto{  background-color: #ffcc00;  float: left;  width: 84.7%;  border-right: 1px solid #000000;  border-bottom: 1px solid #000000;}</style><script language="javascript" type="text/javascript">function ajusta(){  var alturaDivTexto = document.getElementById("texto").clientHeight;  var alturaMenuEsquerdo = document.getElementById("menu_vertical").clientHeight;  if (alturaDivTexto < alturaMenuEsquerdo)  {	document.getElementById("texto").style.height = alturaMenuEsquerdo;  }  else if (alturaMenuEsquerdo < alturaDivTexto)  {	document.getElementById("menu_vertical").style.height = alturaDivTexto;  }}</script></head><body onload="ajusta()"><div id="geral">  <div id="logo">logo</div>  <div id="topo">titulo</div>    <div id="data">data</div>  <div id="menu_horizontal">menu horizontal</div>    <div id="menu_vertical">menu vertical</div>  <div id="texto">O layout básico é esse, muito simples não? Meu problema é fazer funcionar no IE, Opera, Netscape e no Firefox. O que acontece é que quando consigo fazer uma coisa, a outra para funcionar. As vezes essa borda que separa a coluna esquerda da direita não aparece, dependendo da altura de uma das colunas. Já consegui fazer o layout exatamente como eu queria, só que usando largura fixa de 770px quando na verdade quero usar largura de 95% porém a coluna da esquerda com medida fixa de 160px.Pra fazer esse aqui misturei tabela com CSS e assim funciona em qualquer navegador.Obs. As bordas e as margens fazem parte do layout mesmo.</div></div></body></html>

flws!

Tudo morre · Maio 1, 2006

Fala guinuranti, beleza?Vocês está tendo alguns dos problemas que já tive.Em 800X600 fica uma DIV em cima da outra.A coluna da esquerda tem que ser fixa com 160px e a da direita acompanhar a resolução.O menu não fica com a mesma altura do conteudo nem o IE nem no FF.Isso também aconteceu comigo e cada vez que arrumo uma coisa, outra desarruma.Se tiver tempo veja o que você consegue.AbraçosFernando

guinuranti · Maio 1, 2006

aff, e tem gente que usa 800x600 ainda?

ok, deixe-mos as brincadeiras de lado, claro que tem e muita gente que usa, infelizmente...

bem, eu acertei aqui 100% total! mas no firefox apenas :(

no ie ainda não me liguei como faz isso.

ó, tem uma página aqui, é simples, dê uma analisada no código e veja o que você consegue:

http://www.meyerweb.com/eric/css/edge/comp...piral/demo.html

no firefox, eu acertei deixando as posições fixas e fazendo uns cálculos, mas ficou exatamente como você montou em tabelas. agora no ie o problema reside justamente no margin-right...no ff colocando o valor 15 por exemplo, o elemento se extenderia até ficar com 15 de espaço entre a barra de rolagem...mas no ie, bem, não precisamos malhar mais ainda o coitado.

se eu achar alguma coisa aqui no meu ninho de rato (hd) eu posto aqui, eu sei que eu já fiz algo assim, mas só não me lembro onde está...mas eu sei que eu mexia com o bug do ie, que consiste em voc~e colocar um underline antes da propriedade, e apenas ele vai entender, o ff não entenderá. por exemplo:

width: 100px;

_width: 1000px;

no ff a largura terá 100pixels mas no ie terá 1000.

bem, vou dar uma olhada e qualquer coisa te do um toque.

fica ai as dicas.

até depois mais!

Tudo morre · Maio 2, 2006

Desculpe ser chato mas, a coluna do menu tem que ter 160px e a coluna da direita acompanhar a resolução.Gostaria de saber como fazer assim com CSS pois com a tabela é muito fácil de se conseguir.Pra que serve o java-script?AbraçosFernando

micox · Maio 2, 2006

Ae tudo morre,

O layout que você se refere neste tópico aqui é o mesmo daquela outra vez?

Se for sim, eu já resolvi seu problema em http://forum.imasters.com.br/index.php?showtopic=175827

Tudo morre · Maio 2, 2006

E aí micox, beleza?Olha, tá quase perfeito, o único problema que tá aparecendo é que se você deixar o conteúdo do menu maior que a coluna da direita, a borda da direita some depois do fim paragrafo, isso só no IE.AbraçosFernando

guinuranti · Maio 2, 2006

foi pra isso que eu te passei a função javascript tudo morre :P

Tudo morre · Maio 2, 2006

Ah é rapaz???Vou fazer uma misturada aqui e vê se dá certo.Té mais.

micox · Maio 2, 2006

Olha, tá quase perfeito, o único problema que tá aparecendo é que se você deixar o conteúdo do menu maior que a coluna da direita, a borda da direita some depois do fim paragrafo, isso só no IE.

Ae tudo morre, pra isto é só aplicar a técnica do Equals height na div chamada Centro também. Simplão:

#container #left {			float:left;			width: 160px;			text-align:center;			border-right:1px solid black;			padding-bottom: 1001em;	 /* Técnica colunas iguais: X + padding-bottom */			margin-bottom: -1000em;	 /* Técnica colunas iguais: X */			}		#container #center {			text-align:justify;			padding:10px 20px 10px 180px;			border-right:1px solid black;			padding-bottom: 1001em;	 /* Técnica colunas iguais: X + padding-bottom */			margin-bottom: -1000em;	 /* Técnica colunas iguais: X */			}

TEsta ae e me fala. Eu testei aqui e deu tudo certo.

Tudo morre · Maio 2, 2006

Aqui, com o IE, o texto da coluna do menu fica escondido quando passa da altura da coluna direita.

micox · Maio 3, 2006

você tem certeza que fez o que eu falei???Eu testei das duas formas (com o MENU MAIOR, texto menor E com o menu menor, TEXTO MAIOR) e ceu 100% certo no Firefox e no IE.Deu tudo certo. você fez o que eu falei no meu post anterior?

Tudo morre · Maio 3, 2006

Pois é, copiei e colei o código que você colocou aí em cima, aí pra testar copiei o texto que está na coluna da direita e colei na coluna da esquerda, aí o texto só aparece até a altura que está o paragrafo da coluna da direita, dali pra baixo já tem a borda inferior e o texto é cortado no IE, no FF o texto vai até o final e só depois a borda inferior aparece.Se você quiser coloco o código de novo aqui.

micox · Maio 3, 2006

Ah sim... realmente, é que eu tinha testado só no FF. (novamente o IE dando problemas heheh)Jà já eu resolvo e posto.

micox · Maio 3, 2006

Pronto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />	<title>By Micox</title>	<style type="text/css">		* { margin:0px; padding:0px;}		body { padding:10px; }				#tudo { 			display:table;			border-style:solid;			border-color:black;			border-width:1px 1px 1px 1px;			width:100%;}		#header { 			display:table;			width:100%;			text-align:center;			}		#header #topoesq { 			float:left;			background: #dd0; 			width: 160px;			line-height:80px;			border-right:1px solid black;			}		#header h1 {			background: #dd0; 			line-height: 80px;			border-bottom:1px solid black;			}		#header #data {			background: #aff;			float:left;			width:160px;			line-height:30px;			border-right:1px solid black;			}		#header #barradir{			background: #aff;			line-height:30px;			border-bottom:1px solid black;			}				#container {			background: #ded;			clear:both;			display:table;			width:100%;			overflow:hidden;			}		#container #left {			float:left;			width: 160px;			text-align:center;			border-right:1px solid black;			padding-bottom: 1001em;	 /* Técnica colunas iguais: X + padding-bottom */			margin-bottom: -1000em;	 /* Técnica colunas iguais: X */			}		#container #center {			text-align:justify;			padding:10px 20px 10px 180px;			/*padding-bottom: 1001em;	 /* Técnica colunas iguais: X + padding-bottom */			/*margin-bottom: -1000em;	 /* Técnica colunas iguais: X */			}							#footer { /* clear:both;*/}				#container #center p { /* O TEXTO DO CENTRO */			font-family: verdana, arial, helvetica, sans-serif;			font-size: 90%;			color: #000;			}				h1 {			text-align: center;			line-height: 80px;			padding: 0 0;			margin: 0 0;			color: #fff;			font-family: 'comic sans ms', verdana, arial, sans-serif;			font-size: 200%;		}		h2 {			text-align: center;			margin: 10px 0 10px 0;			font-family: arial, helvetica, sans-serif;			font-weight: bold;			font-size: 90%;			color: #777;		}		h3 {			font: 110% verdana, Tahoma, Sans-Serif;			text-align: center;			color: #000;			background: #eff;			line-height: 40px;			margin: 25px 35px 25px 35px;			border: 1px solid #000;		}	</style></head><body><div id="tudo">	<div id="header">		<div id="topoesq">LOGO</div><h1>TITULO</h1>		<div id="data">DATA</div><div id="barradir">MENU HORIZONTAL</div>	</div>	<div id="container">		<div id="left"><h2>MENU VERTICAL</h2><br /><br />menu<br /><br /><br />menu<br /><br /><br />menu<br /><br /><br />menu<br /><br /><br />menuaa<br /></div>		<div id="center">			<h3>TITULO DO TEXTO ABAIXO</h3>			<p>O layout básico é esse, muito simples não? Meu problema é fazer funcionar no IE, Opera, Netscape e no Firefox. O que acontece é que quando consigo fazer uma coisa, a outra para funcionar. As vezes essa borda que separa a coluna esquerda da direita não aparece, dependendo da altura de uma das colunas. Já consegui fazer o layout exatamente como eu queria, só que usando largura fixa de 770px quando na verdade quero usar largura de 95% porém a coluna da esquerda com medida fixa de 160px.Pra fazer esse aqui misturei tabela com CSS e assim funciona em qualquer navegador.Obs. As bordas e as margens fazem parte do layout mesmo.</p>		</div>			</div>		<div id="footer"><!-- rODAPÉ SE QUISER --></div>	</div> <!-- fim do tudo --></body></html>

Tudo morre · Maio 3, 2006

E não é que deu certo mesmo, tirando é claro aquele excesso de rolagem vertical que fica no FF, e que com a tabela não acontece, e como por enquanto a grande maioria usa o IE, ficou beleza.Tentei muito deixar assim e não consegui, por isso insisti tanto.Brigadão aí micox por ter me aturado tanto e ter resolvido o problema, tenho certeza que isso vai ajudar muitos outros também, agradeço também ao guinuranti pela atenção.Abraços a todosFernando

guinuranti · Maio 3, 2006

show de bola mico.uma sugestão: crie algo meio que fixo a respeito desse assunto, algo como visuais css ou algo assim, imagino que muita gente irá ainda procurar como fazer isso e coisas relacionadas, aí seria legal ter tudo meio que junto.flws!

micox · Maio 3, 2006

tirando é claro aquele excesso de rolagem vertical que fica no FF

Sério??!?!?Aqui no meu FF1.5 deu tudo beleza, se quiser até tiro um printscreen pra você ver...Confere se você não esqueceu o overflow:hidden do #container.

uma sugestão: crie algo meio que fixo a respeito desse assunto, algo como visuais css ou algo assim, imagino que muita gente irá ainda procurar como fazer isso e coisas relacionadas, aí seria legal ter tudo meio que junto.

Vou colocar esta dúvida no tópico de "perguntas frequentes" que tá pendurado e em breve to pensando em fazer um minitutorial sobre isso. Vamos ver...

Tudo morre · Maio 3, 2006

O meu FF ainda é da versão anterior, vou atualizar pra ver o que acontece.

Tudo morre · Maio 3, 2006

Com o FF novo ficou perfeito, obrigado de novo.

Arquivado

Tirar tabela e colocar CSS

Recommended Posts

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guinuranti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guinuranti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guinuranti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

guinuranti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tudo morre 0