Autor Tópico: Como centralizar login com CSS - em qualquer resolução do browser  (Lida 9296 vezes)

Kleyber

  • Expert
  • *****
  • Mensagens: 2239
    • Email
Como centralizar login com CSS - em qualquer resolução do browser
« Online: Novembro 10, 2012, 11:09:37 pm »
PessoALL,

Gostaria de compartilhar com vocês uma solução que pra mim foi importantíssima: Quando criamos um form de login no SC, ele centraliza horizontalmente, mas não consegue centralizar verticalmente. Aí se vc colocar em pixels a altura, vc perde o controle quando o browser tiver uma resolução diferente da que você montou o login e ai começam os problemas. Hoje descobri como fazer isto e de uma forma que funciona em qualquer browser e em qualquer resolução vai ficar certinho. A solução é a seguinte:

Pesquise no código fonte (inspecionando a table onde ficam os campos de login e senha e os botões) o tamanho dessa table. de posse do tamanho, coloque no OnScriptInit do teu form o seguinte:

Código: [Selecionar]
print ("

 <style type='text/css'>

#main_table_form {
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-120px;
   margin-top:-45px;
}

 </style>

");

Explicação: O nome da tabela criada pelo SC é main_table_form. O left com 50% e o top com 50% fazem com que o canto superior esquerdo da table fique centralizado, mas a table propriamente dita não fica. Então, neste caso se a table tem 240px X 90px você divide por 2 e coloca em margin-left -120 (240/2) e em margin-top -45 (90/2). Daí a table com o seu login vai ficar alinhada verticalmente em qualquer resolução de qualquer browser!!

Gostaria de registrar aqui as ajudas valiosas de Haroldo e Alexandre Buhler, que me fizeram aprender mais sobre CSS em um dia do que em um curso de CSS propriamente dito (rsrs).

Espero ter ajudado alguém com esta dica. Testem e me digam se funciona.

Abraços,
« Última modificação: Novembro 11, 2012, 12:42:44 pm por Kleyber »
Kleyber Derick

ITIL® V3 Foundation Certified
Analista de Sistemas
São Luís - Maranhão
www.tkinformidia.net

Alexandre Pereira Bühler

  • Expert
  • *****
  • Mensagens: 1658
  • Nunca estabeleça um teto para os seus rendimentos.
    • Simão & Bühler Ltda
    • Email
Re:Como centralizar login com CSS - em qualquer resolução do browser
« Responder #1 Online: Novembro 10, 2012, 11:36:01 pm »
Obrigado por compartilhar com o fórum Kleyber.
--
Alexandre Pereira Bühler
https://www.simaoebuhler.com.br
Hospedagem compartilhada Scriptcase desenvolvimento e produção. Temos servidores dedicados Scriptcase.
Eu RTFM todo dia e você?

eritonf

  • Avançado
  • ****
  • Mensagens: 297
    • Email
Re:Como centralizar login com CSS - em qualquer resolução do browser
« Responder #2 Online: Novembro 14, 2012, 09:39:03 am »
Fantástico Kleyber,

Parabéns pra vcs!
Ajudou e muito!
Att.
Ériton Fróes

Edilson.Silva

  • Novato
  • *
  • Mensagens: 23
Re:Como centralizar login com CSS - em qualquer resolução do browser
« Responder #3 Online: Novembro 14, 2012, 06:17:19 pm »
Meu amigo Kleyber,

Excelente essa dica, pena que não vou poder testar agora, pois estou sem o scriptcase na minha máquina. Mas de qualquer forma parabéns pela iniciativa.

Um abração,
Edilson.

rzorzella

  • Intermediário
  • ***
  • Mensagens: 111
    • Email
Re:Como centralizar login com CSS - em qualquer resolução do browser
« Responder #4 Online: Dezembro 28, 2012, 04:32:30 am »
Obrigado


Ricardo

djeico

  • Novato
  • *
  • Mensagens: 1
    • Email
Re:Como centralizar login com CSS - em qualquer resolução do browser
« Responder #5 Online: Setembro 03, 2015, 05:46:48 pm »
Muito bom Kleyber!

Obrigado por me ajudar!

Abraço.

DinhoTJ

  • Novato
  • *
  • Mensagens: 14
    • Email
Re:Como centralizar login com CSS - em qualquer resolução do browser
« Responder #6 Online: Novembro 26, 2015, 02:58:47 am »
Muito obrigado pela dica Kleyber. Eu uso esse tipo instrução para mudar muita coisa no leiaute da aplicação.