Jump to content

Archived

This topic is now archived and is closed to further replies.

zerrenner

{ Tableless } Alinhamento Vertical - O MITO

Recommended Posts

é... testei e pelo jeito é isso ae// só no ie5 que não rolou mas tá bom.valeu hunternh

Share this post


Link to post
Share on other sites

silverfox e tygo...pois é... mas para ter que usar esse codigo imenso, e ainda ter que usar javascript que pode ser barrado no browser... prefiro usar minha tabelinha antiga mesmo... mesmo nao sendo "tableless" hehehehehehvaleu...hunternh, o codigo até que ficou legal, mas se o div.container for position:absolute nao funciona no FF como o codigo do silverfox... valeu

Share this post


Link to post
Share on other sites

S precisar mesmo de fazer algo alinhado de tal forma, melhor usar uma tabela do que um monte de códigos, infelizmente alguns problemas que enfrentamos não têm uma solução muito "limpa" =/[]'s

Share this post


Link to post
Share on other sites

S precisar mesmo de fazer algo alinhado de tal forma, melhor usar uma tabela do que um monte de códigos, infelizmente alguns problemas que enfrentamos não têm uma solução muito "limpa" =/[]'s

De qualquer forma acho q o assunto valeu a pena pois muita gente participou e leu os posts... com isso o fórum só tende a ganhar qualidade no conteúdo e mais união entre os membros em busca de respostas para os problemas que surgem por aqui.Parabéns pra todo mundo q deu um pitaco ou acompanhou os posts... valeu!!

Share this post


Link to post
Share on other sites

silverfox, eu sei, eu me relacionava ao primeiro codigo seu... o segundo "funciona", mas haja gambiarra, até expression em CSS usou.. hehehehe valeu...é isso ai, tygo, por isso eu insisto em ter um codigo legal...pa_bruno, esse exemplo também nao funciona... nao tem um codigo de exemplo nessa pagina que tenha alinhamento central e vertical num div, p.ex. mas obrigado pela dica.Abraços!

Share this post


Link to post
Share on other sites

ola pessoal, estava pesquisando sobre alinhamento vertical em divs e me deparei com esse tópico, realmente é bonca encontrar uma solução viável, então eu resolvi pesquisar um pouco de javascript para tentar fazer uma solução para mim já que iria usar varias vezes em uma única página. Não sei muito javascript, já css da para desenrolar, então quem puder aperfeiçoar está aí.

código javascript

function centralizar(div_pai,div_central){var height_pai = document.getElementById(div_pai).offsetHeight;var height_central = document.getElementById(div_central).offsetHeight;var margem = (height_pai - height_central)/2;parent.document.getElementById(div_central).style.padding = margem+"px 0 0 0";}
e no onload eu uso centralizar('id_da_div_pai', 'id_div_centralizar');

por exemplo

<html><head><script type="text/javascript" src="div_central.js"></script><style type="text/css">#pai {height:100%;}</style></head><body onLoad="centralizar('pai', 'filha');"><div id="pai"><div id="filha">conteudo</div></div></body></html>
bom aqui tá funcinando "beleza", quem puder deixá-lo melhor, tipo fazer com que ele procure tal calss e faça isso com todas elas ao mesmo tempo???

P.S.: a div pai tem que estar com height ou 100% ou um valor qualquer definido, já a filha é variável.

Share this post


Link to post
Share on other sites

Minha nova solução

 

com esse código você pode alternar entre posição Vertical ou horizontal ou as duas

mechendo nesses códigos

conteudo.style.top = Calculoh;

conteudo.style.left = Calculow;

 

CSS:

<style>#conte{position:absolute;top:50;left:50;background:#f0f0f0;height:200;}#Middle{height:1000;background:#fc0;}</style>
js:

<script>function Centraliza(){//troque aqui o elemento pode-se usar tbm document.bodyvar elemento = document.getElementById("Middle");var conteudo = document.getElementById("conte");var Calculoh = (elemento.offsetTop +(elemento.clientHeight - conteudo.clientHeight) /2);var Calculow = (elemento.offsetLeft + (elemento.clientWidth - conteudo.clientWidth) /2);conteudo.style.top = Calculoh;conteudo.style.left = Calculow;}</script>
HTML:

<body onload="Centraliza()"><br /><br /><br /><br /><br /><br /><br /><div id="Middle">	<div id="conte">	sdsdsd	</div></div>
para alinha ao centro da página:

<style>#conte{position:absolute;top:50;left:50;background:#f0f0f0;height:200;}</style><script>function Centraliza(){var elemento = document.body;var conteudo = document.getElementById("conte");var Calculoh = (elemento.offsetTop +(elemento.clientHeight - conteudo.clientHeight) /2);var Calculow = (elemento.offsetLeft + (elemento.clientWidth - conteudo.clientWidth) /2);conteudo.style.top = Calculoh;conteudo.style.left = Calculow;}</script><body onload="Centraliza()">	<div id="conte">	sdsdsd	</div>
agora trabalhando com mais JAVASCRIPT

Share this post


Link to post
Share on other sites

Muito boas as contribuições.

Alinhar verticalmente no centro é realmente um problema.

 

Notei que aqui houveram muitos comentários, críticas e opiniões sobre Tableless Vs. Tables.

Gostaria de convidar o pessoal(tanto os que defendem as tabelas quanto aos que as evitam ou não utilizam) a contribuir com o tópico: http://forum.imasters.com.br/index.php?showtopic=250047.

 

 

Abrass,

Share this post


Link to post
Share on other sites

Alguém poderia me ajudar a alinhar o texto desse botao no centro vertical ???

 

 

<html><head><style>* {	font: italic 20px arial, helvetica, sans-serif;}.botao  {	position:absolute;	top:0px;	left:50px;	margin:0px;	padding:0px;}.botao a {	background: #FFF url('teste4.gif') no-repeat center center;	padding:0px;	width:160px;  	height:60px;		display:block;	color: #000;	text-decoration: none;	text-align:center;}	.botao a:hover { 	background: #FFF url('teste4Botao.gif') no-repeat center center;	width: 160px;	height: 60px;	color:#FFF;	text-decoration: none;	text-align:center;}</style></head><body><p class="botao"><a href="#" valign="center">Menu teste</a></p></body></html>
As imagens são essas:

Imagem Postada

 

 

Imagem Postada

 

Valeu desde já por qqer ajuda !!

Share this post


Link to post
Share on other sites

Coloca um line-height da altura do elemento, se for só uma linha de texto dá certo[]'s

Share this post


Link to post
Share on other sites

Vejam o código que eu postei em funcionamento nesses dois sites que eu desenvolvi na minha empresa:

 

www.ibtec.org.br

www.primafer.com.br

Share this post


Link to post
Share on other sites

Nossa o tópico ta quente o.o como ainda não tinha precisado usar isso x.x não sabia que era tão problemático.

 

Realmente achei que funcionava usando display:table ... vou dar uma olhada no codigo do hunternh o.o

 

A unica coisa que me assustou nesse tópico foi a falta de vontade e de ninguém ter falado nada sobre o membro FabricioGomes que só criticou e disse: "e ai mais alguém" ... "continuo com as tabelas" realmente não entendi sua contribuição nesse tópico.

 

Ainda não sou expert mas também vou dar uma olhada no assunto ^^

Share this post


Link to post
Share on other sites

Estava lendo uns artigos e acabei chegando nesse tópico....

 

e vi esta última resposta.. amigo, você fica com TABELAS?

você sabe pra que servem tabelas? para DADOS TABULARES... vi você falando besteira ali em cima tbm dizendo que usa a tag Span para alinhar elementos? Span é apenas uma tag de TEXTO curto...

 

Vcs nunca vão conseguir achar uma solução de verdade em Webstandards se não sabem nem usar HTML...

Conheçam esse link da W3School:

http://www.w3schools.com/tags/default.asp

 

Aqui você vai saber para que serve cada tag do HTML.. primeiro aprenda HTML, depois CSS..

Semântica é importantissimo em desenvolvimento... sabendo usar as tags de HTML justamente para o que elas servem, ajuda muito no aprendizado e no desenvolvimento de um site em webstandards, alem de tornar seu site muito mais fácil de ser buscado pelo Google...

 

Busque sobre Microformats tbm que eh a nova tendencia da padronização web

Share this post


Link to post
Share on other sites

Estava lendo uns artigos e acabei chegando nesse tópico....

 

e vi esta última resposta.. amigo, você fica com TABELAS?

você sabe pra que servem tabelas? para DADOS TABULARES... vi você falando besteira ali em cima tbm dizendo que usa a tag Span para alinhar elementos? Span é apenas uma tag de TEXTO curto...

 

Vcs nunca vão conseguir achar uma solução de verdade em Webstandards se não sabem nem usar HTML...

Conheçam esse link da W3School:

http://www.w3schools.com/tags/default.asp

 

Aqui você vai saber para que serve cada tag do HTML.. primeiro aprenda HTML, depois CSS..

Semântica é importantissimo em desenvolvimento... sabendo usar as tags de HTML justamente para o que elas servem, ajuda muito no aprendizado e no desenvolvimento de um site em webstandards, alem de tornar seu site muito mais fácil de ser buscado pelo Google...

 

Busque sobre Microformats tbm que eh a nova tendencia da padronização web

quanto ao Kikitten você pode até criticar(ou outras pessoas que apoiam tabelas)

 

acho que provavelmente você nem leu todos os posts né :P

sem maldade mas ao inves de criticar mostre uma solução

 

quem disse que o pessoal nao sabe usar HTML

Vcs nunca vão conseguir achar uma solução de verdade em Webstandards se não sabem nem usar HTML...

isso se refere a todo mundo que postou?

 

 

e achei muito boa a solução que o wagnerdp postou(apesar de um pouco poluida =/):

[melhor que usar javascritp, na minha opnião =] ]

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
	.greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
	<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
	  <div class="greenBorder" style=" #position: relative; #top: -50%">
		any text<br>
		any height<br>
		any content, for example generated from DB<br>
		everything is vertically centered
	  </div>
	</div>
  </div>
</body>
</html>

refiz a aplicação sem estilos inline

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
			"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
	.caixa1{
		background:#fc0;
		width:400px;
		height: 400px;
		position: relative;
		display:table;
		overflow: hidden;
	}
	.caixa2{
		display: table-cell;
		vertical-align: middle;
		position: relative !important;
		top: 0px !important;
		position: absolute;
		top: 50%;
	}
	.caixa3{
		background:#ddd;
		width:400px;
		position: relative;
		top:0px !important;
		top: -50%;
		height:auto;
	}
  </style>
</head>

<body>
  <div class="caixa1">
	<div class="caixa2">
	  <div class="caixa3">
		any text<br>
		any height<br>
		any content, for example generated from DB<br>
		everything is vertically centered
		any text<br>
		any height<br>
		any content, for example generated from DB<br>
		everything is vertically centered
	  </div>
	</div>
  </div>
</body>
</html>
falow

Share this post


Link to post
Share on other sites

Bom, na verdade eu estava falando do Fabio Gomes (ultimo post da primeira pagina) quando ele fala que prefere tabelas a css....

e não estou reclamando sobre soluções como a do wagnerdp. já que o css não possui uma soluçõa definitiva, temos que encontrar outras soluções como o site do Tableless apresenta aqui:

 

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

O que estou querendo dizer aqui amigo, é que o pessoal diz preferir tabelas quando na verdade não sabem nem para que servem. E ISSO ninguém pode negar, pois se alguém diz que prefere tabelas a css, é JUSTAMENTE pq não sabe para que elas servem. Preferir tabelas é simplesmente a fuga de alguém que não quer se atualizar aos novos padrões de desenvolvimento web e continua fazendo sites como há 5 anos atrás. Não critico quem escolhe por esse caminho, mas depois não reclame que o site não consegue um bom PageRank no Google, ou reclamar quando o cliente pede alguma alteração de posicionamento que vai ser um INFERNO de fazer sendo que se tivesse feito com CSS seria apenas mudar um parâmetro.

 

silverfox, não estou querendo dizer que quem usa tabelas é menos que alguém, nem nada parecido com isso.. Só estou dizendo que Webstandards (como o nome mesmo já diz) são padrões da web. Para segui-lo você tem que ter o minimo de conhecimento de HTML, suas tags e suas respectivas funções...

 

E não é só uma crítica, mas um conselho tbm... quem ainda faz sites em tabelas está ficando ANOS LUZ para trás, mesmo sem se dar conta, já que o HTML 5 está para surgir, e aí meu amigo, muita coisa vai mudar, e quem não se atualizar, vai ficar MUITO pra traz. Quem não entender de semântica de HTML não vai nem entender para que servem as novas tags, que vão se tornar um padrão... exemplo? vão existir tags especificas para topo (header), para rodape (footer), para menu (nav), etc...

 

Aqui está a documentação completa:

http://www.whatwg.org/specs/web-apps/current-work/

 

É apenas um conselho e uma dica... quer fazer em tabelas? ótimo.. mas tbm nao menospreze o CSS apenas por ele AINDA não possuir uma solução nativa para alinhamento vertical.. hehe

 

Abraços a todos e espero que gostem da nova documentação.

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.