Ir para conteúdo

POWERED BY:

Arquivado

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

Tudo morre

Conversão de Layout

Por , em Desenvolvimento frontend

Recommended Posts

Tudo morre    0

Tudo morre
Postado

Boa pergunta essa!

Também estou com essa dúvida.

Também estou começando a verificar se o código fonte não fica realmente menor e carrega mais rápido com webstandars.

Hoje não tenho dúvidas que faço uma página muito rápido usando tabelas.

Estou com um layout relativamente simples aqui, que não consegui fazer usando webstandars, mandei por e-mail o código(feito com tabelas) para alguns conhecedores do assunto explicando que gostaria de saber como ficaria montando só com webstandars mas ninguém respondeu, então acho que não dá.

É isso.

Fernando

 

EDITADO by Micox: Este tópico foi dividido de: http://forum.imasters.com.br/index.php?showtopic=175027&st=0

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Ehehehheeh manda o código, e o pagamento pra mim que eu faço pra você oxe... mudar e sempre dificil pessoal!! nada sem esforço vem ate você, metam as caras nos livros, sites, copiem codigo, vão mudando e vendo nos browsers, somente assim dá pra ter um aprendizado, conteudo TEM, gente pra ajudar TEM, cabe a você TER a vontade de mudar !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tudo morre    0

Tudo morre
Postado

O código tá aí, o cheque mando por e-mail depois.Vejam bem que, exatamente aquilo que dizem sobre webstandars, que é economizar no código, aqui fiz com três linhas de tabelas, funciona em todos os navegadores em qualquer resolução.Quero deixar claro que não estou defendendo o uso de tabelas e sim tentando deixar de usa-las por isso estou postando aqui.<!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></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><td class="topoesq">LOGO</td><td class="topodir"><h1>TITULO</h1></td></tr><tr><td class="barraesq">DATA</td><td class="barradir">MENU HORIZONTAL</td></tr><tr><td class="conteudoesq"><h2>MENU VERTICAL</h2></td><td class="conteudodir"><h3>TITULO DO TEXTO ABAIXO</h3><p class="conteudo">O layout básico é esse e meu problema é fazer funcionarno 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.<br />Obs. Essas bordas fazem parte do layout mesmo.</p></td></tr></table></div></body></html>ObrigadoFernando

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

ahhahaha pra quando você quer isso? olha se quiser me adicionar no msn, posso te ajudar manda uma MP q ajudo vcs no que precisar, ajuda com codigos, posicionamento...tamo ai

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tudo morre    0

Tudo morre
Postado

Estou tentando montar esse layout com webstandars e não estou conseguindo. O layout é examente esse aí do código feito usando tabelas que funciona em qualquer navegador e qualquer resolução.Gostaria de saber se alguém sabe com fazer essa mesma estrutura usando webstandars.Se você copiar o código e testar aí, verá que é um design simples porém, não consegui fazer com webstandars, acho que estou muito velho pra isso.Por enquanto muita gente reclamou mas ninguém informou.Se ninguém souber ensinar acho que vou deixar com tabelas mesmo e vou aproveitar o tempo pra jogar bola com meus filhos.Abraços a todos.Fernando

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ae tudo morre,

 

Arranjei um tempo e desenvolvi seu código (contrariando o que está na minha assinatura "...Não dê o peixe...") :)

 

Realmente desenvolver sem tabelas tem algumas desvantagens, porém tem muito mais vantagens...

 

Aí abaixo está o código:

<!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-top:1px solid black; border-left:1px solid black;}		#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;			border-right: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;			border-right:1px solid black;			}				#container {			background: #ded;			border-bottom:1px solid black;			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;			border-right:1px solid black;			}							#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></div>		<div id="center">			<h3>TITULO DO TEXTO ABAIXO</h3>			<p>O layout básico é esse e meu problema é fazer funcionarno 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.<br />Obs. Essas bordas fazem parte do layout mesmo.</p>		</div>			</div>		<div id="footer"><!-- rODAPÉ SE QUISER --></div>	</div> <!-- fim do tudo --></body></html>

PS.: Não esquece de mandar meu cheque. hehehe :)

Compartilhar este post

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

Informação importante

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

  Aceito