Jump to content

Archived

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

zerrenner

{ Tableless } Alinhamento Vertical - O MITO

Recommended Posts

muito legal... só que realmente no firefox nao funcionou, será que precisa de alguma configuraçao?

 

modifiquei até que nao fosse necessário mudar mais nada.

so nao gostei da gambi "edge", acho que por isso nao funcionou no Firefox... ficou no topo e a esquerda.

 

esse codigo só funcionou no IE

 

<html><head><style> 	#edge { 		height:100%;		vertical-align:middle;	} 	#container { 		text-align:center; 		width:100%; 		vertical-align:middle;	}	div{		border:1px #0f0f0f solid;		height:100px;		width: 250px;	}</style> <body><div><span id="edge"></span> <span id="container">Qualquer texto no div.<br />Segunda linha do texto.</span></div></body> </html>

Share this post


Link to post
Share on other sites

Olá pessoal!

Me cadastrei pq já tive essa dúvida e agora quero dar uma mão pra vocês.

No meu caso foi simples de resolver:

<style type="text/css">.posicionamento {	width:100%;	height:500px;	top:50%;		left:50%;	margin-left:-350px;	margin-top:-250px;	position:absolute;	}</style>
Isso funciona se você tiver como definir a altura do conteúdo. Como vocês devem saber, o CSS não pega por padrão o centro do objeto como referência e sim suas extreminadades, em específico o canto superior esquerdo. Para que o objeto fique centralizado no meio, a propriedade "margin-top" deve ser a metade do tamanho definido na propriedade height.

Por fim:

<div id="conteudo" class="posicionamento">CONTEÚDO EM QUESTÃO</div>
Espero ter ajudado.

 

Abraços!

Share this post


Link to post
Share on other sites

Pois é, anderson, o que quero provar é que uso "Tableless" é uma situação que nunca vai existir, pois existem coisas que com uma simples tabela conseguimos fazer coisas simples, que um DIV ou SPAN ou qq outra tag nao consegue fazer por causa dos Browsers, entenderam?A duvida do zerrener, e do ANL, era exatamente isso, porque uma coisa simples de ser feita precisa de tanta gambiarra só pra nao usar uma tabela, que muito simplesmente, faz seu papel na questão de layouts.Como o silverfox tentou realizar e quase conseguiu (parabens silverfox), foi que não existe uma forma tão simples como uma tabela de fazer o que queremos com um DIV.E nao é culpa do somente do IE, e sim do Firefox também (nenhuma solução tambem foi atendida pelo Firefox).Abraços e aguardo novas possiveis soluções para este problema.PS: Sei que o MITO desse tópico é o uso do vertical-align, mas creio que o que tento solucionar aqui é o que todos desejam, com o uso do vertical-align.

Share this post


Link to post
Share on other sites

silverfox, olha o que consegui... ainda nao fica 100%, a div nao fica do tamanho que desejamos, pois dependerá da altura do texto, mas já fica centralizado e com pouca gambiarra... so definir a altura do div dividindo entre o padding-top e bottom (se quiser uma div de 200, divide 100 pra cada, mas lembrando que tem a altura do texto...

 

<html><head><style>	#pleasewait {		border: 1px solid black;		text-align: center;		font: 10px Verdana;		width: 360px;		padding-top: 20px;		padding-bottom: 20px;	}</style></head><body><div id="pleasewait">Please wait...<br>segunda linha de texto</div></body></html>

postem se ocorre erro em algum browser, pois so testei no IE 7 e Firefox 2.0

 

 

PS: mudei o valor do padding de 100px para 20px.

Share this post


Link to post
Share on other sites

Mas centralizar tanto na horizontal quanto na vertical elementos que sabemos a largura (width) e a altura (height) isso já não é mais novidade... Além do mais, você está usando um padding com valor muito alto para conseguir o efeito que deseja, não acha? Existem outras maneiras (mais chatinhas para quem não conhece muito bem CSS) de se fazer isso, mas que no meu ponto de vista seria mais "lógico" do que utilizar um padding com um valor desses...

Share this post


Link to post
Share on other sites

nao, paulo, voce nao entendeu... a largura e altura fixa é do div, nao do texto... o que quero que seja resolvido é que eu tenha um "panel" de tamanho fixo, e que qq texto (que caiba no panel, claro) fique sempre centralizado horz e vert, o que consigo fazer com muita facilidade utilizando tabelas.o que quis exemplificar com essa gambiarra de padding, é que ao inves de utilizarmos o tamanho, colocamos um padding minimo que garanta que o texto fica centralizado, mas perdemos a questão da altura do panel fixa, pois ficará dependente da altura do texto...

Existem outras maneiras (mais chatinhas para quem não conhece muito bem CSS) de se fazer isso

que outras maneiras? ;)

Share this post


Link to post
Share on other sites

Que tal line-height com a altura do elemento??[]'s

Share this post


Link to post
Share on other sites

#divpai {position:relative;width:500px;height:500px;}#divfilho {position:absolute;width:400px;height:400px;margin-top:-200px;margin-left:-200px;top:50%;left:50%;}
^^

 

[]'s

Share this post


Link to post
Share on other sites

#INSIDE#

 

também nao funcionou... pelo menos no IE nem no FF... heheheh

o div fica centralizado em relacao ao pai, mas o texto nao...

 

abraços e obrigado pelas respostas.

 

alguem mais??

 

 

so para lembrar o que quero, preciso simular com DIV ou qq outra tag o efeito desse codigo

<table style='width: 270px; height: 270px; position: absolute; top: 200; left: 200; border: 1px solid black; text-align: center;'><tr><td>		Teste<br>segunda linha<terceira linha</td></tr></table>

Share this post


Link to post
Share on other sites
silverfox, ve la o que postei no seu topico... abraços!
Vê lah Fabricio jah arrumei uma soluçãoabraço

Share this post


Link to post
Share on other sites
silverfox, ve la o que postei no seu topico... abraços!
Vê lah Fabricio jah arrumei uma soluçãoabraço
tentei tbém: http://forum.imasters.com.br/index.php?s=&...st&p=860861

Share this post


Link to post
Share on other sites

Andei brincando com o script que o silverfox postou no post 21, é só testarem.

 

<!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="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Centralizado verticalmente</title><style type="text/css"> span.auxVertical{ 	width:0px; 	height:100%;}span.container{ 	text-align:center; 	width:300px; 	display:table-cell;}div.container{	border:1px #0f0f0f solid;	width: 300px;	height:500px;	display:table-cell;	text-align:center;	vertical-align:middle;}</style><!--[if IE]><style type="text/css"> span.auxVertical{	display:inline-block;	vertical-align:middle;}span.container{	display:inline-block;	vertical-align:middle;}</style><![endif]--></head> <body><div class="container"><span class="auxVertical"></span> <span class="container">	<img src="folder.gif" />	<br />	<p>teste</p></span></div></body> </html>

Share this post


Link to post
Share on other sites

×

Important Information

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