Ir para conteúdo

Arquivado

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

zerrenner

{ Tableless } Alinhamento Vertical - O MITO

Recommended Posts

é 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

Compartilhar este post


Link para o post
Compartilhar em outros 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 ^^

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

isso se os browsers respeitarem ele.. hehehehe

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

 

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;


}

Compartilhar este post


Link para o post
Compartilhar em outros sites

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:;.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

"{ Tableless } Alinhamento Vertical - O MITO"

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>


Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.