Ir para conteúdo

POWERED BY:

Arquivado

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

hyraxmaster

Tableless... muito falado, mas na prática...

Por , em Javascript

Recommended Posts

hyraxmaster    0

hyraxmaster
Postado

Tenho lido muito sobre Tableless, vantagens, padronização, coerência semântica e tal... etc... etc.. etc...

 

mas na prática tá difícil aplicar... simplesmente não consigo montar o layout sem usar tabelas... e axo q essa dificulade não é só minha, afinal, até o próprio site do imasters não é tableless... :)

 

a seguir, uma screen do layout que eu montei... sem utilizar tableless...

http://www.deviantart.com/view/15957292/

 

se alguém conseguir montar esse layout sem usar tabelas, me avise, ficarei muito grato...

 

eu, infelismente, não vou usar tableless...

 

obs: não confundam CSS com Tableless... as vantagens e aplicações do CSS eu entendo e aplico perfeitamente... mas tableless... minha nossa senhora... tá difícil...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Tenho lido muito sobre Tableless, vantagens, padronização, coerência semântica e tal... etc... etc.. etc... mas na prática tá difícil aplicar... simplesmente não consigo montar o layout sem usar tabelas... e axo q essa dificulade não é só minha, afinal, até o próprio site do imasters não é tableless... :) a seguir, uma screen do layout que eu montei... sem utilizar tableless...http://www.deviantart.com/view/15957292/se alguém conseguir montar esse layout sem usar tabelas, me avise, ficarei muito grato...eu, infelismente, não vou usar tableless...obs: não confundam CSS com Tableless... as vantagens e aplicações do CSS eu entendo e aplico perfeitamente... mas tableless... minha nossa senhora... tá difícil...

tudo é uma questão de prática e muito estudo.Foi difícil confesso, mas hoje não sei viver mais sem o tablelessE pra dizer-lhe a verdade é MUITO BOM

Compartilhar este post

Link para o post
Compartilhar em outros sites

fael    1

fael
Postado

Galera! Me desculpem a ignorância, mas o que é que vocês chamam de tableless? É layout sem o uso de tabelas?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Galera! Me desculpem a ignorância, mas o que é que vocês chamam de tableless? É layout sem o uso de tabelas?

Sim!Exatamente, é o layout sem uso de tabelas, afinal tabelas não foram criadas para fazer layouts, e sim comportar dados tabulados.para saber mais sobre o assunto visite:http://www.tableless.com.br

Compartilhar este post

Link para o post
Compartilhar em outros sites

hyraxmaster    0

hyraxmaster
Postado

tudo é uma questão de prática e muito estudo.Foi difícil confesso, mas hoje não sei viver mais sem o tablelessE pra dizer-lhe a verdade é MUITO BOM

beleza... será q você poderia me ajudar então?!?!veja o layout que eu fiz: http://www.deviantart.com/view/15957292/como faço para construir esse layout sem tabelas... não consigo de jeito nenhum...um do problemas, dentre vários outros, é posicionar uma "box" em baixo da outra...veja um exemplo que eu tentei fazer...
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt_br" lang="pt_br"><head>	<title>Teste com CSS</title>    <style type="text/css"><!--/* ==========================  Cosmética, apenas para deixar apresentável:  ========================== */h1 { 	text-align:center; 	border: 1px dotted #00CC66;	}#geral {	text-align:justify;	font:70% Verdana, Arial, 'Sans-Serif';	border: #330099;}/* ==========================  Aqui fazemos o layout   ========================== */#geral {	width:700px;	border: 1px dotted #00CC66;}#esquerda, #direita {	width:150px;	position:relative;}#esquerda { 	float:left;	margin-left:5px;	padding:3px;	border: 1px dotted #00CC66; }#esquerda2 { 	width:150px;	margin-left:5px;	margin-top:150;	padding:3px;	border: 1px dotted #00CC66; }#box_esquerda { 	width:138px;	padding:3px;	margin-left:2px;	border: 1px dotted #00CC66; }#direita {	float:right;	margin-right:5px;	padding: 3px;		border: 1px dotted #00CC66; }#conteudo {	width:350px; 	margin-left:171px;	padding: 3px;	border: 1px dotted #00CC66; } -->    </style></head><body>    <div id="geral">	<h1>Layout com 3 Colunas</h1>     	 <div id="esquerda">    Conteúdo da esquerda O pulo-do-gato aqui é um atributo <a href="http://www.w3.org/Style/CSS/" title="Cascading Style Sheets">CSS</a> chamado <a href="http://www.w3.org/TR/REC-CSS1#padding">padding</a>.'>http://www.w3.org/TR/REC-CSS1#padding">padding</a>. O <a href="http://www.w3.org/TR/REC-CSS1#padding">padding</a> é a distância entre as bordas de um elemento e o texto dentro dele.  </div>  <div id="esquerda2">    Conteúdo da esquerda O pulo-do-gato aqui é um atributo <a href="http://www.w3.org/Style/CSS/" title="Cascading Style Sheets">CSS</a> chamado <a href="http://www.w3.org/TR/REC-CSS1#padding">padding</a>.'>http://www.w3.org/TR/REC-CSS1#padding">padding</a>. O <a href="http://www.w3.org/TR/REC-CSS1#padding">padding</a> é a distância entre as bordas de um elemento e o texto dentro dele.  </div>    <div id="direita">    <div id="box_esquerda">    Conteúdo da esquerda localizado logo abaixo do primeiro box da esquerda!  </div>   </div>      <div id="conteudo">   <p>boas novas para quem ainda não aderiu ao layout sem tabelas só porque o dreamweaver não fazia isso automagicamente: nessa versão ele está quase lá. a renderização do css é quase perfeita, tal qual os browsers irão mostrar. o velho painel properties permite alterar alguma formatação em css, mas é o painél tag inspector que é o grande show: mostra todas as opções possíveis com apenas um clique.o dreamweaver pode melhorar a produtividade até mesmo de quem já domina css, porque ele mostra o resultado da formatação em tempo real. para o designer que está testando cores de fundo, bordas e fontes isso é uma mão-na-roda. agora quem não souber css, não se preocupe, o dream ensina. além do painél com a referência completa dos códigos do css, ele conta o autocompletar que exibe até a paleta de cores se for o caso.</p>   <p>klldddddklk</p>      </div></div></body></html>
repare que os "boxes" não ficam no lugar certo... ajustados... e tem mais... do jeito que está... no internet explorer é mostrado de um jeito e no firefox de outro...

Compartilhar este post

Link para o post
Compartilhar em outros sites

bluis    0

bluis
Postado

Salve pessoal,

Seguinte, estou montando um site para a intranet de minha empresa, mas estou com um grave problema, comecei ele fazzendo seu layout com tabelas, agora estou tentando converte-lo para tableless, so que esta dando pau em um monte de coisa, meu formulário de login por exemplo, naum funca mais, ele não manda os dados do formulário para meu script para fazer a consulta. erá que alguem sabe o que está acontecendo? http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

Eu já domino o uso de tabelas e com o tempo desenvolvi técnicas para montá-las como eu quero. Quando o tabless surgiu não achei que fosse bom usar pois alguns browsers ainda não tinham suporte. Atualmente boa parte dos browsers já reconhecem. Mas só vou usar o tabless quando 100% dos browsers tiverem suporte.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Eu já domino o uso de tabelas e com o tempo desenvolvi técnicas para montá-las como eu quero. Quando o tabless surgiu não achei que fosse bom usar pois alguns browsers ainda não tinham suporte. Atualmente boa parte dos browsers já reconhecem. Mas só vou usar o tabless quando 100% dos browsers tiverem suporte.

Bom, 100% acho que será bem difícil ou impossívelprecisamente se tratando do ie, que não se preocupa em seguir os padrões.Mas existe os "hacks css" que faz com o que o seu layout fique 100% em qulaquer navegadorolhe que lindo:http://www.csszengarden.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

fael    1

fael
Postado

Tem uma função em JS que ajusta o comportamento das layers tanto para IE quando para NS & cia. Função essa, criada automaticamente pelo Dreamweaver:

 

ASP [/tr][tr]

function reloadPage(init) {

if (init == true)

with (navigator) {

if ( ( appName == "Netscape" ) && ( parseInt(appVersion) == 4 ) ) {

document.pgw=innerWidth;

document.pgh=innerHeight;

onresize=reloadPage;

}

}

else if (innerWidth != document.pgw || innerHeight != document.pgh)

location.reload();

}

reloadPage(true);

 

[/tr]

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