{ Tableless } Alinhamento Vertical - O MITO

[brcontainer 16]

é que na verdade você não soube como falar no outro post

fazendo eu me confundir =/

 

mas entendi o que você disse

obrigado pela documentação

 

visite tambem o www.w3schools.com

[FabricioGomes 0]

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 ^^

Desculpa, Kikitten, você é o dono da Verdade!!! Desculpe, Mestre!!!!

 

Quem se sentiu ofendido agora fui eu, eu estou até hoje, sem descobrir uma maneira de centralizar um texto num div, tanto verticalmente quanto horizontalmente, coisa que faço com 3 tags em tabelas, e ninguem até hoje me enviou uma solução adequada, que utilize pouco codigo.

o Silverfox foi o que mais chegou perto, porem utilizando javascript.

 

Se voce nao tem o que falar, por favor, ... ao inves de atacar os outros.

 

Obrigado!

 

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

mais um mestre dos magos... que ao inves de ajudar, vem criticar e nem ao menos tenta ajudar..

 

desculpa, cesão, mestre do HTML

 

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.

nossa, e eu achando que voce tinha falado pouco...

 

cesão, se voce me der uma solução para o que eu desejo, sem utilizar tabelas, usando pouco codigo sem gambiarras e hacks, eu te pago 1 milhão... uhauhauha

 

vai criticar a pqp, tableless nao significa não utilizar tabelas, e sei muito bem o que significa dados tabulares, so que os navegadores atuais (e por um bom tempo vao ser assim) nao respeitam o CSS, e voce vai ficar falando que o CSS faz tudo e ficar sem desenvolver com tabelas porque "é fresco, não quero usar tabelas para o que nao é tabela"

 

faz um favor para a gente e apresente uma solução adequada.

 

Obrigado, MESTRE!!!

[brcontainer 16]

acho que só CSS3 vai resolver o problema

;)

[FabricioGomes 0]

isso se os browsers respeitarem ele.. hehehehe

[Guilherme Rambo 4]

isso se os browsers respeitarem ele.. hehehehe

O IE8 passou no teste Acid2, isso já é um bom sinal :)

 

[]'s

[brcontainer 16]

isso se os browsers respeitarem ele.. hehehehe

é verdade, mas isso só quando lançarem ele saberemos

 

falow

[FIXTZY 0]

dêem uma olhada no codigo fonte dessa pagina :

 

http://www.alistapart.com/d/footers/footer_variation1.html

 

O alinhamento vertical é em js, parece perfeito

[brcontainer 16]

dêem uma olhada no codigo fonte dessa pagina :

 

http://www.alistapart.com/d/footers/footer_variation1.html

 

O alinhamento vertical é em js, parece perfeito

Boa alternativa mas se você der uma lida nos postes anteriores vai ver que tem em CSS e em javascript outra alternativa

mas fora isso o código parece muito bom

 

valew

[Everton Vilela 1]

Tão simples, é só fazer a div virar célula,

definir line- antes do height do tamanho da div ( pq você transformou em celula, agora tem q ser tamanho de linha) , colocar o vertical-align: middle....

 

e pronto texto no meio da célula =)

 

 

.celula {

	line-height: 20px;
	vertical-align: middle;
	display: table-cell;


}

[brcontainer 16]

Se você tive-se lido desde o primeiro poste neste tópico saberia o porque não usamos isso.

Primeir não funciona no IE, segundo o DISPLAY:table; ou table-cell ou table-row causam um BUG no FF, Opera, Safari e complacentes se usados em com a propriedade float:;.

[Tiago Aveiro 0]

Olá, com jQuery eu consegui um jeito de deixar centralizado.

No meu projeto deu certo e espero que dê certo pra alguem.

Apenas com 2 linhas consegui centralizar.

 

<script src="js/jquery-1.2.6.js" type="text/javascript"></script>

<div id="div_centro" style="height:300px; background-color:#CCCCCC;">
	<span id="texto" style="background-color:#FFFFFF; position:absolute; ">
		TEXTO TEXTO TEXTO TEXTO TEXTO<BR />
		TEXTO TEXTO TEXTO TEXTO TEXTO<BR />
		TEXTO TEXTO TEXTO TEXTO TEXTO<BR />
		TEXTO TEXTO TEXTO TEXTO TEXTO<BR />
		TEXTO TEXTO TEXTO TEXTO TEXTO<BR />
		TEXTO TEXTO TEXTO TEXTO TEXTO<BR />
	</span>
</div>

<script>
	$('#texto').css("top",($('#div_centro').height()-$('#texto').height())/2+"px");
	$('#texto').css("left",($('#div_centro').width()-$('#texto').width())/2+"px");
</script>

Mais informações: Documentação jQuery

 

Abraços...

[BRgambiT_ 0]

<html>

 

<head>

 

<title>Text v-align - CSS+Table</title>

 

<style type="text/css">

td { vertical-align:middle; }

</style>

 

</head>

 

<body>

<table height=100%><tr><td><h1>

Acho que esta é a maneira mais simplificada... alguma idéia?

</h1></td></tr></table>

</body>

 

</html>

[Paulo de Tarso F. M. 24]

Simplificada? Onde? Cadê?

 

Amigo, tabelas devem ser utilizadas quando os dados são tabulares... Você já deve ter se cansado de ouvir isso, né, mas se ainda não entendeu direito, é simples: não use tabelas para estruturar sua página. Elas não foram criadas para isso...

 

Ou seja, sua suposta solução é completamente imprópria e inadequada tratando-se de webstandards... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

[brcontainer 16]

BRgambiT_ concerteza por você não frequentar o forum não sabe por que a dificuldade de alinhar verticalmente, você deveria ter lido todos os postes antes de postar.

 

Atenciosamente SilverFox

[reredias 0]

Queridos, vou solucionar o problema de todos vocês como apenas um parâmetro: line-height

 

#boxcentral{
   height:230px;
   line-height:150px;
}

 

Observem que o line-height precisa ter a mesma altura do height OBRIGATORIAMENTE!

 

Deixem comentários..

[Evandro Oliveira 331]

Queridos, vou solucionar o problema de todos vocês como apenas um parâmetro: line-height

 

#boxcentral{
   height:230px;
   line-height:150px;
}

 

Observem que o line-height precisa ter a mesma altura do height OBRIGATORIAMENTE!

 

Deixem comentários..

 

Pergunta: O que acontece se a #boxcentral tiver duas linhas?

 

Comentário: Viu que na SUA própria regra, height e line-height não têm a mesma altura?

 

 

[lkm 0]

pode usar height="100%" o segredo está no cabeçalho da página, não pode conter

<!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">

 

somente usar

<html>
<head>

 

exemplo

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
     blá blá
   </td>
 </tr>
</table>
</body>
</html>

 

testei no IE, chrome e firefox

[Evandro Oliveira 331]

@lkm procure descobrir o que compreende o conceito de tableless.

 

"{ Tableless } Alinhamento Vertical - O MITO"

 

 

[Daniel Rosa_32258 0]

Texto original de Kenji Yamamoto - http://www.kenjiyamamoto.com/

 

Todo desenvolvedor Front-end já se deparou com aquele PSD em que voce tem um elemento centralizado verticalmente e com conteudo fluído. Formas de resolver esse problema, temos várias, faz um javascript que resolve, usa o display: table-cell, usa a boa e velha tabela, mas nenhuma solução verdadeiramente utilizando html e css apenas.

 

Com essa necessidade em mente e a vontade de esganar o designer por ter desenhado isso, fui atras de alguma solução nova que não fosse apenas um “workaround” e me deparei com essa solução que me pareceu bem justa, vamos a ela.

 

O código abaixo funciona no Internet Explorer 5.0, 5.5 e 6.0, em navegadores Gecko (Mozilla, Firefox, Netscape 7), no Opera 7, Konqueror 3.3.1. (talvez mais baixo também), e no Safari. A página pode ser HTML ou XHTML, standard ou quirk mode.

 

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
   <meta charset="UTF-8">
   <title>Alinhamento Vertical apenas com CSS</title>
<style>

.borda-vermelha {
   border: 1px solid red;
   margin:0 auto;
   width:500px;
}

.box-01 {
    display: table;
    height: 400px;
    #position: relative;
    overflow: hidden;
}
.box-02 {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}

.box-03 {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 300px;
}

</style>

</head>

<body>
   <div class="box-01 borda-vermelha">
        <div class="box-02">
             <div class="box-03 borda-vermelha">
                  qualquer texto de qualquer altura gerado dinamicamente ou não, será centralizado verticalmente.
             </div>
        </div>
   </div>
</body>
</html>