Fórum Formulário de login centralizado #424523
24/09/2012
0
Estou começando a desenvolver um sisteminha em ASP.NET e um dos principais pontos onde tenho dificuldade é na formatação visual das telas, pois não tenho muita experiência com HTML, CSS e Javascript (mas entendo o básico).
Nesse momento estou precisando desenvolver uma tela de login onde o formulário fique centralizado vertical e horizontalmente na tela.
O formulário é simples, possui apenas dois campos de texto e alguns botões.
Alguém já fez isso e/ou saberia como me ajudar?
Grata.
Rachel Andrade
Curtir tópico
+ 0Post mais votado
25/09/2012
Alisson Santos
Gostei + 2
Mais Posts
25/09/2012
Rachel Andrade
Grata.
Gostei + 0
01/10/2012
Rachel Andrade
Eu preciso só centralizar um formulário retangular na tela (vertical e horizontalmente).
Obrigada.
Gostei + 0
02/10/2012
Washington Morais
Segue abaixo um exemplo de como centralizar o seu formulario.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário Centralizado</title>
<style type="text/css">
* { margin: 0; padding: 0; font-family:Tahoma; font-size:9pt;}
#divCenter {
background-color: #e1e1e1;
width: 400px;
height: 150px;
left: 50%;
margin: -130px 0 0 -210px;
padding:10px;
position: absolute;
top: 50%; }
</style>
</head>
<body>
<div id="divCenter">
<form id="frmPost" action="">
Campo 1: <input type="text" id="Text0" /><br />
Campo 2: <input type="text" id="Text1" /><br />
Campo 3: <input type="text" id="Text2" /><br />
Campo 4: <input type="text" id="Text3" /><br />
Campo 5: <input type="text" id="Text4" /><br />
<input type="submit" />
</form>
</div>
</body>
</html>
Quando voce alterar as propriedades "width" e "height", voce deve alterar tambem os valores da propriedade "margin" parar que seu form se posicione exatamente no centro da tela, ok?
Abraços
___________________
Washington Morais
MCP / MCTS
Gostei + 2
02/10/2012
Felipe Pereira
Olha, eu tive o mesmo problema a algum tem atrás, queria algo bonito e funcional, não tenho muita experiência
com layout, css e tal.. Então um amigo me indicou o uso de jQuery, foi a melhor coisa que eu fiz!!
Dê uma olhada em [url]http://jqueryui.com/home[/url] é simples de implementar com ASP.net e funciona em todos os browsers!
Qualquer dúvida dá um toque que eu te ajudo!
Abraço,
Felipe Pereira.
Gostei + 0
02/10/2012
Washington Morais
Eu também uso JQueryUI e assim como voce, eu recomendo fortemente o seu uso pois ele faz grande parte do trabalho, mas neste caso específico o que ela precisa é centralizar o formulario de login no centro da tela.
Usando o codigo que passei ela consegue isso e com o jQueryUI ela consegue dar aquela realçada no visual dos componentes :)
Abraços
___________________
Washington Morais
MCP / MCTS
Gostei + 0
02/10/2012
Rachel Andrade
Gostei + 0
02/10/2012
Washington Morais
Abraços
___________________
Washington Morais
MCP / MCTS
Gostei + 0
03/04/2013
José
dizendo se conseguiu solucionar seu problema e se possível
qual foi a solução que utilizou
Desde já agradeço.
Gostei + 0
03/04/2013
Rachel Andrade
Eu resolvi definindo uma largura fixa para uma div, dentro da qual botei o form, e botei a margin como auto.
Por enquanto resolveu meu problema.
Obrigada a todos e podem fechar esse tópico.
Gostei + 0
03/04/2013
José
Sendo assim, estou marcando este tópico como resolvido.
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)