Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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...
Galera! Me desculpem a ignorância, mas o que é que vocês chamam de tableless? É layout sem o uso de tabelas?
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
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/](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">http://www.w3.org/TR/REC-CSS1#padding">padding</a>.'>[http://www.w3.org/TR/REC-CSS1#padding">padding](http://www.w3.org/TR/REC-CSS1#padding). O <a href="[http://www.w3.org/TR/REC-CSS1#padding">padding](http://www.w3.org/TR/REC-CSS1#padding) é 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/"](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](http://www.w3.org/TR/REC-CSS1#padding). O <a href="[http://www.w3.org/TR/REC-CSS1#padding">padding](http://www.w3.org/TR/REC-CSS1#padding) é 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...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
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.
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
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]
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