Ir para conteúdo
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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por MasterJ
      nao consigo encontrar o erro neste codigo

       
      <?php  if(isset($_POST['btnLogin'])){   $email = trim($_POST['user_email']);   $upass  = trim($_POST['user_pass']);   $h_upass = sha1($upass);       if ($email == '' OR $upass == '') {       message("Invalid Username and Password!", "error");       redirect("login.php");               } else {     //it creates a new objects of member     $user = new User();     //make use of the static function, and we passed to parameters     $res = $user::userAuthentication($email, $h_upass);     if ($res==true) {         message("You logon as ".$_SESSION['ROLE'].".","success");       if ($_SESSION['ROLE']=='Administrator' || $_SESSION['ROLE']=='Student'){         $_SESSION['ADMIN_USERID'] = $_SESSION['USERID'];         $_SESSION['ADMIN_FULLNAME'] = $_SESSION['FULLNAME'] ;         $_SESSION['ADMIN_USERNAME'] =$_SESSION['USERNAME'];         $_SESSION['ADMIN_ROLE'] = $_SESSION['ROLE'];         unset( $_SESSION['USERID'] );         unset( $_SESSION['FULLNAME'] );         unset( $_SESSION['USERNAME'] );         unset( $_SESSION['PASS'] );         unset( $_SESSION['ROLE'] );          redirect(WEB_ROOT."admin/index.php");       }      }else{       message("Account does not exist! Please contact Administrator.", "error");        redirect(WEB_ROOT."admin/login.php");      }  }  }   ?>   
    • Por JoaoVituBR
      Olá, eu tenho 2 servidores (Socket.io Redis) comunicando entre si, e gostaria de saber se tem como, e como posso fazer que salve a sessão para que o usuário quando conectar no outro servidor ele não precise fazer login novamente.

    • Por PeeWee
      Pessoal, estou precisando de um código que mantenha o usuário logado no sistema, pois o interessante é que assim que ele acessar o site nao precise logar outra vez. Estou utilizando esse código:   $_SESSION['log_me_out_at'] = strtotime(date("Ymd ")."23:59:59");
      aparentemente nao funciona quando subi para o servidor, alguem tem uma dica?
    • Por Keron
      Gente eu não estou conseguindo iniciar o session em php e realmente não consigo entender o motivo já tentei trocentas coisas que as pessoas sugeriram nos foruns, mas o session ainda assim não funciona

       
      arquivo index onde não recupera variáveis $_SESSION:
      <?php session_start(); ?> <!DOCTYPE html> <html> <head> <title>Pagina1</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <article id="newPrincipal"> <h1>Usuário id:<?php echo $_SESSION['userId']; ?></h1> </article> <h1>Result:<?php echo "Usuário id:".$_SESSION['userId']; ?></h1> </body> </html> <?php echo '<pre>'; print_r($_SESSION['userId']); echo '</pre>'; arquivo login:
       
      <?php if(isset($_POST['login-submit'])){ require 'dbh.inc.php'; $users = $_POST['nome']; $mailuid = $_POST['mailuid']; $password = $_POST['pwd']; $token; if(empty($mailuid) || empty($password)){ header("Location: ../header.php=emptyfields"); exit(); } else{ $sql = "SELECT * FROM users WHERE Usuarios=? AND email=?"; $stmt = mysqli_stmt_init($conn); if(!mysqli_stmt_prepare($stmt, $sql)){ header("Location: ../index.php?error=sqlerror"); exit(); } else{ mysqli_stmt_bind_param($stmt, "ss", $mailuid, $users); mysqli_stmt_execute($stmt); $result = mysqli_stmt_get_result($stmt); if($row = mysqli_fetch_assoc($result)){ $pwdCheck = password_verify($password, $row['pwdUsers']); if($pwdCheck == false){ header("Location: ../header.php?error=wrongpwd"); exit(); } else if($pwdCheck == true){ session_start(); $_SESSION['userId'] = $row['idUsers']; $_SESSION['userId2'] = $row['uidUsers']; $_SESSION['email'] = $row['emailUsers']; header("Location: ../index.php?login=".$_SESSION['userId']); } else{ header("Location: ../login.php?error=wrongpwd"); exit(); } } } } } else{ header("Location: ../index.php"); }  
      Eu tentei de todas as formas recuperar alguma informação usando o $_SESSION no arquivo index, mas não consegui
      Estou beirando o desespero, xoxo
       
                                                         
    • Por MachineMan
      com os dados já inseridos. Por favor. é só para um site de um trabalho da escola, então não precisa de MySqL, encontrei alguns, mas não funcionam, não sei o motivo.
×

Informação importante

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