1

Ola. Estou fazendo uma tela de login e gostaria de centralizar os formulários e colocar os botões de login e esqueceu a senha no final desse retângulo branco, que nem o titulo do retângulo. Estou usando o materialize css e sou iniciante em html e css.

Print da tela de login

O codigo e o seguinte

body{

	background-color:#44BBFF;
}

#logincard{
	background-color:white;
	height:600px;
	width:1000px;
	max-width:100%;
    max-height:100%;
    overflow:auto;
	 position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;
-webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.31);
-moz-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.31);
box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.31); 


	
    
}

#parent{
}

html, body{
  height: 100%;
}

#botaologin{
	width:50%;
	height:50px;
	color:white;
	padding: 15px 40px;
	text-align:center;
	float:left;

}

 #header {
    position: relative;
    min-height: 150px;
  }
  #header-content {
    position: absolute;
    bottom: 0;
    left: 0;
  }


#inner {
  display: table;
  width: 40%; /* Altere para o valor da largura desejada. */
}
<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="style.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body style="background:url(blue.jpg);">
   <div  class="container"><!--Comeco tela login -->
      <div class="row col s12">
        <div class="col s12" id="logincard">

      <div class="row">
        <div style="color:white;background-color:#0d47a1;text-align:center;padding:5px;font;width:100%;height:200px;" class="col s12">
          <h1>Log In</h2>
          <h5>Entre no sistem Easy-Odonto e gerencie seu Hospital</h5>
        </div>
        
      </div>    

      <div class="row">
        <form style="padding-top: 70px" class="col s12">
          <div class="row">
            <div  class="input-field col s5">
              <i class="material-icons prefix">account_circle</i>
              <input id="icon_prefix" type="text" class="validate">
              <label for="icon_prefix">Usuario</label>
            </div>
            <div class="input-field col s5">
              <i class="material-icons prefix">vpn_key</i>
              <input id="icon_telephone" type="tel" class="validate">
              <label for="icon_telephone">Senha</label>
            </div>
          </div>
        </form>
      </div>    


        <div style="padding-top:110px;" id="botao">
          <div><a style="background:#00bfa5" id="botaologin">Login</a></div>
          <div><a style="background:#ff5252" id="botaologin">Esqueci a senha</a></div>
        </div>


        </div>
      </div>
     
   </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>
        

2 Respostas 2

1

Veja se assim ajuda:

#botaologin {
  width: 100%;
  color: white;
  text-align: center;
  padding: 20px;
}

Na div pai dos botões foi definido como estilo:

display:flex;
justify-content:space-around;

Veja o resultado:

body {
  background-color: #44BBFF;
}

#logincard {
  background-color: white;
  height: 600px;
  width: 1000px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  position: absolute;
  /*it can be fixed too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.31);
  -moz-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.31);
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.31);
}

#parent {}

html,
body {
  height: 100%;
}

#botaologin {
  width: 100%;
  color: white;
  text-align: center;
  padding: 20px;
}

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#inner {
  display: table;
  width: 40%;
  /* Altere para o valor da largura desejada. */
}
<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <link type="text/css" rel="stylesheet" href="style.css" media="screen,projection" />

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="background:url(blue.jpg);">
  <div class="container">
    <!--Comeco tela login -->
    <div class="row col s12">
      <div class="col s12" id="logincard">

        <div class="row">
          <div style="color:white;background-color:#0d47a1;text-align:center;padding:5px;font;width:100%;height:200px;" class="col s12">
            <h1>Log In</h2>
              <h5>Entre no sistem Easy-Odonto e gerencie seu Hospital</h5>
          </div>

        </div>

        <div class="row">
          <form style="padding-top: 70px" class="col s12">
            <div class="row">
              <div class="input-field col s5">
                <i class="material-icons prefix">account_circle</i>
                <input id="icon_prefix" type="text" class="validate">
                <label for="icon_prefix">Usuario</label>
              </div>
              <div class="input-field col s5">
                <i class="material-icons prefix">vpn_key</i>
                <input id="icon_telephone" type="tel" class="validate">
                <label for="icon_telephone">Senha</label>
              </div>
            </div>
          </form>
        </div>


        <div style="padding-top:110px; display:flex;
  justify-content:space-around;" id="botao">
          <div style="background:#00bfa5" id="botaologin"><a>Login</a></div>
          <div style="background:#ff5252" id="botaologin"><a>Esqueci a senha</a></div>
        </div>


      </div>
    </div>

  </div>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>

2
  • Tentei a resolucao mas infelizmente nao deu certo 29/08/2017 às 23:02
  • resolvi definindo os forms como col s4 e colocando col s2 dos dois lados sem nada. 30/08/2017 às 0:44
0

Acredito que se você usar o bootstrap e usar os comandos de GRID como col-sm e col-md você resolve isso rapidinho, o que eu pude perceber é que a divisão das suas colunas estão 5, você precisar separar melhor, levanto em conta que o máximo é 12.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .