Ir para conteúdo

Arquivado

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

Gelson Ventura

Login Centralizar caixas de texto

Recommended Posts

Bom dia, estou com dificuldades em deixar as caixas de textos alinhadas com o texto label, conforme altera o tamanho da tela (responsivo).

 

Segue meu código

 

<!DOCTYPE html>
<html lang="pt-br">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<title>Centralizar Login</title>

	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	

	<style type="text/css">

	.containeri img {
		width: auto;
		height: auto;
	}
	
	
	.buttonLogin {
		font-family: Ubuntu-Bold;
		font-size: 16px;
		color: #fff;
		line-height: 1.2;
		text-transform: uppercase;

		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		width: 100%;
		height: 62px;
		
		background-color: blue;
		border-radius: 3px;

		-webkit-transition: all 0.4s;
		-o-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}

	.buttonLogin:hover {
		background-color: #403866;
	}

	.buttonLogin:focus {
		background-color: #04B404;
	}



	.loginFonte {
		font-family: arial;
		font-size: 32px;
		font-weight:bold;
		color: red;
		line-height: 1.2;
		text-transform: uppercase;
		text-align: center;
		width: 100%;
		display: block;
	}



	.inputLogin {
		font-family: Ubuntu-Bold;
		color: #403866;
		line-height: 1.2;
		font-size: 18px;
		background-color: #e6e6e6;
		display: block;
		width: 100%;		
		height: 60px;
		padding: 0 20px 0 38px;
	}


	




	@media screen and (min-width: 320px) {
		.centralizar {margin: 0 auto;
		width: 100%; /* Valor da Largura */}
	}

	@media screen and (min-width: 480px) {
		.centralizar {margin: 0 auto;
		width: 80%; /* Valor da Largura */}
	}


	@media screen and (min-width: 600px) {
		.centralizar {margin: 0 auto;
		width: 70%; /* Valor da Largura */}
	}




	@media screen and (min-width: 768px) {
		.centralizar {margin: 0 auto;
		width: 50%; /* Valor da Largura */}
	}



	@media screen and (min-width: 992px) {
		.centralizar {margin: 0 auto;
		width: 40%; /* Valor da Largura */}
	}



	@media screen and (min-width: 1200px) {
		.centralizar {margin: 0 auto;
		width: 35%; /* Valor da Largura */}
	}



</style>


</head>
<body>

	<br/>

	<div class="container-fluid">
		
		<img src="img/logoLogin2.png" alt="IPS Serviços" class="containeri center-block" />

		<div class="centralizar">
			
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">
				<div class="loginFonte" align="center" style="margin-bottom: 15px">BEM VINDO AO IPSWEB</div>
			</div>

			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">
				<input id="txtUsuario"  class="text-uppercase inputLogin" style="margin-bottom: 15px" type="text" name="username" placeholder="Usuário" autofocus="autofocus"  />	
				<input id="txtSenha" class="text-uppercase inputLogin" style="margin-bottom: 25px" type="password" placeholder="Senha" />	
			</div>		

			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">							
				<button id="btnEntrar" class="btn btn-primary buttonLogin"  align="center">Entrar</button>
			</div>

		</div>

	</div>



</body>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

 

Ele fica assim quando tenho uma tela grande

02.jpg.00b8ef03251be9052eabd2db29f5e643.jpg

 

Tela normal -->

 

 

01.jpg.54216ce61d049fe23696c581b4a96bc2.jpg

 

Tela pequena (gostaria que ficasse sempre assim) ----->

03.jpg.86563d98bd3e5ff3680c238032ab3212.jpg

 

Alinhando com o texto acima

05.jpg.5347e341bf74287d84e75d03b30bc1bb.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por eduardodsilvaq
      Erro retornado no console do navegador: 400 bad request
      Rastreei o erro ate essa parte no arquivo admin-ajax.php mudando o valor de resposta de 0 para 1:
      if ( is_user_logged_in() ) { // If no action is registered, return a Bad Request response. if ( ! has_action( "wp_ajax_{$action}" ) ) { wp_die( '0', 400 ); } Tentei de tudo, mas infelizmente nao entendi oq realmente significa esse login e como ele funciona.
      Vi algumas pessoas tendo problema com o host, no meu caso estou usando hostinger. (Nao creio que isso e relevante mas ta ai.)
       
      Código utilizado:
       
      Javascript
      function formValidation() { event.preventDefault(); var name = document.forms["contactForm"]["name"].value; var email = document.forms["contactForm"]["email"].value; var subject = document.forms["contactForm"]["subject"].value; var message = document.forms["contactForm"]["message"].value; document.getElementById('status').innerHTML = ''; var errorMessage="<span class='error'>All fields are required.</span>"; var regEx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") { document.getElementById('status').innerHTML = errorMessage; return false; } if (!regEx.test(email)) { var errorMessage="<span class='error'>Invalid email.</span>"; document.getElementById('status').innerHTML = errorMessage; return false; } processContactSubmit(); return true; } function processContactSubmit() { var request = new XMLHttpRequest(); request.open("POST", "/wp-admin/admin-ajax.php?action=process_contact_form"); request.onreadystatechange = function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("status").innerHTML = this.responseText; } }; var myForm = document.getElementById("contactForm"); var formData = new FormData(contactForm); request.send(formData); } functions.php
      add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form'); add_action('wp_ajax_process_contact_form', 'process_contact_form'); //Retirar essa parte para error no console, no contrario ira aparecer no navegador o numero 0. function process_contact_form() { $to = "Recipient Email Address"; $subject = $_POST["subject"]; $headers = "Testing"; $message = $_POST["message"]; $attachments = ""; $sent = wp_mail($to, $subject, $message, $headers, $attachments); if (! $sent) { echo "<span class='error'>Problem in sending mail.</span>"; } else { echo "<span class='success'>Hi, thank you for the message.</span>"; } wp_die(); } Html
      <form name="contactForm" id="contactForm" method="post" onsubmit="return formValidation()" action=""> <p class="comment-form-comment"><textarea id="message" name="message" required="" placeholder="" aria-required="true"></textarea></p> <p class="comment-form-author"><label for="author">Nome: </label> <input id="name" name="name" required="" size="30" type="text" value=" " /></p> <p class="comment-form-author about"><label for="author">Assunto: </label> <input id="subject" name="subject" required="" size="40" type="text" value=" " /></p> <p class="comment-form-email"><label for="email">Email: </label> <input id="email" name="email" required="" size="30" type="text" value="" /></p> <p class="form-submit"><input id="submit" class="submit" name="email_contato" type="submit" value="Enviar" /></p> </form>&nbsp; <h3><div id="status"></div></h3>  
    • Por belann
      Olá!
       
      Eu tentar logar no wordpress que instalei em minha máquina usando localhost e logando com wp-login.php, está dando uma mensagem que o banco de dados não pode ser acessado.
      Estou usando o xampp. O que pode estar errado.
    • Por acdestefani
      Olá pessoal!
      Peguei alguns códigos na internet para para estudar um pouco e aproveitei para desenvolver um sisteminha simples aqui onde eu trabalho. Consegui desenvolvê-lo usando esse arquivo de conexão:
      <?php /************************************************************************************************************* * @author William F. Leite * * Data: 20/06/2014 * * Descrição: Classe elaborada com o objetivo de auxlilar nas operações CRUDs em diversos SGBDS, possui * * funcionalidades para construir instruções de INSERT, UPDATE E DELETE onde as mesmas podem ser executadas * * nos principais SGBDs, exemplo SQL Server, MySQL e Firebird. Instruções SELECT são recebidas integralmente * * via parâmetro. * *************************************************************************************************************/ /* * Constantes de parâmetros para configuração da conexão */ define('SGBD', 'mysql'); define('HOST', 'localhost'); define('DBNAME', 'contratos_rh'); define('CHARSET', 'utf8'); define('USER', 'tonhao'); define('PASSWORD', '100375'); define('SERVER', 'linux'); class conexao { /* * Atributo estático de conexão */ private static $pdo; /* * Escondendo o construtor da classe */ private function __construct() { // } /* * Método privado para verificar se a extensão PDO do banco de dados escolhido * está habilitada */ private static function verificaExtensao() { switch(SGBD): case 'mysql': $extensao = 'pdo_mysql'; break; case 'mssql':{ if(SERVER == 'linux'): $extensao = 'pdo_dblib'; else: $extensao = 'pdo_sqlsrv'; endif; break; } case 'postgre': $extensao = 'pdo_pgsql'; break; endswitch; if(!extension_loaded($extensao)): echo "<h1>Extensão {$extensao} não habilitada!</h1>"; exit(); endif; } /* * Método estático para retornar uma conexão válida * Verifica se já existe uma instância da conexão, caso não, configura uma nova conexão */ public static function getInstance() { self::verificaExtensao(); if (!isset(self::$pdo)) { try { $opcoes = array(\PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES UTF8'); switch (SGBD) : case 'mysql': self::$pdo = new \PDO("mysql:host=" . HOST . "; dbname=" . DBNAME . ";", USER, PASSWORD, $opcoes); break; case 'mssql':{ if(SERVER == 'linux'): self::$pdo = new \PDO("dblib:host=" . HOST . "; database=" . DBNAME . ";", USER, PASSWORD, $opcoes); else: self::$pdo = new \PDO("sqlsrv:server=" . HOST . "; database=" . DBNAME . ";", USER, PASSWORD, $opcoes); endif; break; } case 'postgre': self::$pdo = new \PDO("pgsql:host=" . HOST . "; dbname=" . DBNAME . ";", USER, PASSWORD, $opcoes); break; endswitch; self::$pdo->setAttribute(\PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION); } catch (PDOException $e) { print "Erro: " . $e->getMessage(); } } return self::$pdo; } public static function isConectado(){ if(self::$pdo): return true; else: return false; endif; } } O sistema está funcionando perfeitamente, porém gostaria de incluir a necessidade de fazer login para acessá-lo. Usei o código abaixo, que também consegui na internet:
      <?php session_start(); include('conexao.php'); if(empty($_POST['usuario']) || empty($_POST['senha'])) { header('Location: index.php'); exit(); } $usuario = mysqli_real_escape_string($conexao, $_POST['usuario']); $senha = mysqli_real_escape_string($conexao, $_POST['senha']); $query = "SELECT usuario FROM tab_usuarios WHERE usuario = '{$usuario}' AND senha = md5('{$senha}')"; $result = mysqli_query($conexao, $query); $row = mysqli_num_rows($result); if($row == 1) { $_SESSION['usuario'] = $usuario; header('Location: painel_professor.php'); exit(); } else { $_SESSION['nao_autenticado'] = true; header('Location: index.php'); exit(); } Porém esse login só funciona usando esse arquivo de conexão:
      <?php define('HOST', '127.0.0.1'); define('USUARIO', 'tonhao'); define('SENHA', '100375'); define('DB', 'contratos_rh'); $conexao = mysqli_connect(HOST, USUARIO, SENHA, DB) or die ('Não foi possível conectar'); Como poderia adaptá-lo para que funcione com o primeiro arquivo de conexão? Tentei por vários dias, mas como tenho pouca experiência com programação, não consegui.
      Desde já agradeço a ajuda de todos
       
    • Por feasso
      É possível criar um sistema de cadastre-se ou logue-se usando LinkedIn ? Não achei nada na web que seja novo... apenas postagem de 2013!
    • Por asacap1000
      Galera já não sei mais onde procurar, estou configurando o processo de login com certificação digital porém não consigo ler o retorno. No site da Certisign explica em java e .Net mas utilizo em minha aplicação da intranet tudo em PHP como eu teria que fazer. Segue exemplo que eles fornecem em .Net
       
      <form action="https://autenticador.certisign.com.br/CertisignLogin/certificado/login" method="get"> <input type="hidden" value="209" id="id" name="id"> <input type="hidden" value="CHAVE CRIPTOGRAFICA INICIAL" id="nome" name="nome"> <input type="hidden" value="http://www.seusite.com.br/suaAplicacao/retorno" id="retorno" name="retorno"> <div> <input type="image" src="images/ico-certisign_30x30.png" alt="Submit" id="btnLoginCertisign"> </div> </form> O de cima envia até aí tudo bem
       
      Abaixo o retorno que é o que não consigo fazer em PHP
       
      string retorno = Request["cb"]; string encryptionKey = "<conteúdo da chave criptográfica descarregada na etapa 2>"; retorno = CryptoLogin.Instance.DecryptText(retorno,encryptionKey);</conteúdo> A variável retorno deverá mostrar as informações como o exemplo aaixo.
       
      CertificadoBean: { emissor: Certisign Autoridade Certificadora TESTE, nome: "PROPRIETARIO DO CERTIFICADO DE TESTE", cpf: "001.002.003-44", cnpj: "", OAB: "", validade: "2015-05-27 20:59:59", emissao: "2014-05-27 21:00:00", email: "proprietario.teste@certisign.com.br", certificadoBase64: "MIIFmDCCBICgAwI...... BAQUFADCCARAx" }  
×

Informação importante

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