0

Estoy intentando basarme en un login, y no me está saliendo nada bien, quiero poner unos iconos al lado del input y no adentro en el formulario, y otros dos errores que tengo que me gustaría que me ayudaran, les dejo unas imágenes para que me entiendan mejor

Así me gustaría que se viera, los iconos al lado del formulario, el box rojo superior queda dentro del container blanco, y por último si se fijan el input de contraseña deja un espacio entre el botón de entrar y el

imagen

Luchando un rato, obtengo este resultado, no está tan mal, pero me siento frutado, no logro dejar los iconos como en la primera imagen, la box roja queda encima del container, y por último el input de contraseña, no logro recortarlo de ninguna manera

imagen

Espero que me puedan ayudar, me disculpan realmente, pero apenas estoy empezando en este mundo, y la verdad se me hace difícil, hago todo mi esfuerzo por mejorar, a continuación les dejo mi html y css

.header .container {
  height: 134px;
  margin-bottom: 0;
}

.container {
  z-index: 10;
  position: relative;
}

.container,
.navigation,
.sub-navigation {
  width: 912px;
}

.clouds {
  background-image: url(../img/clouds.png);
  width: 100%;
  height: 134px;
  position: absolute;
  overflow: hidden;
  -webkit-animation: slide 60s linear infinite;
  -moz-animation: slide 60s linear infinite;
  -ms-animation: slide 60s linear infinite;
  -o-animation: slide 60s linear infinite;
  animation: slide 60s linear infinite;
  left: 0;
}

.logo {
  width: 174px;
  height: 36px;
  background: url(../img/logo.png);
  float: left;
  cursor: pointer;
  cursor: hand;
  margin-top: 44px;
}

.c-box {
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}

.c-main {
  background: white;
  border: 1px solid #b3b3b3;
  border-top: none;
  border-bottom: 2px solid #b3b3b3;
  padding: 10px;
  border-radius: 0 0 5px 5px;
}

.c-title {
  width: 100%;
  background-image: url(../img/shine-bg.png);
  height: 36px;
  line-height: 36px;
  text-indent: 12px;
  text-align: left;
  font-weight: bold;
  font-family: Arial !important;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  border-radius: 5px 5px 0 0;
}

.c-title small {
  float: right;
  margin-right: 12px;
}

.c-title a {
  color: White;
}

.c-title.red {
  background-color: #d64242;
}

.c-title.green {
  background-color: #74bf4e;
}

.c-title.blue {
  background-color: #4d9dbd;
}

.c-title.purple {
  background-color: #cc7abe;
}

.c-title.orange {
  background-color: #ffa230;
}

.c-title.grey {
  background-color: #a6a6a6;
}

.padding {
  padding: 10px;
}

.padding-out {
  padding: 6px;
}

.input-div,
.badge-div {
  border-top: 1px dashed #cccccc;
  border-bottom: 1px dashed #cccccc;
  padding: 10px 0;
  margin-bottom: -1px;
  text-align: left;
}

.input-div.error,
.input-div.success {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}

.input-div.error {
  color: red;
}

.input-div.success {
  color: green;
}

.input-div label {
  width: 100%;
  float: left;
  margin-bottom: 3px;
}

.input-div input[type="text"],
.input-div input[type="password"],
.input-div select {
  border: 1px solid #b3b3b3;
  height: 28px;
  line-height: 28px;
  margin: 0;
  width: 100%;
  border-radius: 3px;
  text-indent: 8px;
}

.input-div select {
  height: 32px;
  line-height: 32px;
  text-indent: 4px;
}

.btn {
  height: 34px;
  line-height: 34px;
  float: right;
  padding: 0 15px;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
  background: url(../img/reg-btns.png?2);
  border: 0;
  margin: 10px 1px 0 0;
  outline: 0;
  color: #fff;
  position: relative;
  cursor: pointer;
  cursor: hand;
}

.btn.red {
  float: left;
  background-position: -6px -68px;
}

.btn.red i {
  position: absolute;
  right: -1px;
  top: 0;
  width: 6px;
  height: 34px;
  background: transparent url(../img/reg-btns.png?2) 0 -68px;
}

.btn.red:hover {
  background-position: -6px -102px;
}

.btn.red:hover i {
  background-position: 0 -102px;
}

.btn.green {
  background-position: -6px 0;
}

.btn.green i {
  position: absolute;
  right: -1px;
  top: 0;
  width: 6px;
  height: 34px;
  background: transparent url(../img/reg-btns.png?2) 0 0;
}

.btn.green:hover {
  background-position: -6px -34px;
}

.btn.green:hover i {
  background-position: 0 -34px;
}

.btn.grey {
  background-position: -6px -136px;
  cursor: default;
}

.btn.grey i {
  position: absolute;
  right: -1px;
  top: 0;
  width: 6px;
  height: 34px;
  background: transparent url(../img/reg-btns.png?2) 0 -136px;
}

.index-error {
  background: rgba(255, 0, 0, .7);
  height: 33px;
  top: 49px;
  left: 127px;
  position: absolute;
  padding: 0 15px;
  margin: 0 auto;
  border-radius: 4px;
  line-height: 33px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

body.index {
  background: #c0e3f0;
}

body.index .input_box {
  width: 100%;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  margin-bottom: 10px;
  height: 44px;
  border-radius: 3px;
  position: relative;
}

body.index .input_box.user {
  background-image: url(../img/input-icons.png);
  background-repeat: no-repeat;
  background-position: 4px 0;
}

body.index .input_box.mail {
  background-image: url(../img/input-icons.png);
  background-repeat: no-repeat;
  background-position: 4px -88px;
}

body.index .input_box.pass {
  background-image: url(../img/input-icons.png);
  background-position: 4px -44px;
  background-repeat: no-repeat;
}

body.index input[type="text"].input,
input[type="password"].input {
  width: 240px;
  height: 44px;
  background: none;
  border: none;
  padding: 0 0 0 38px;
}

body.index .clouds {
  height: 100%;
  background-image: url(../img/clouds2.png);
}

body.index .index-right {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: url(../img/index_right.png) no-repeat bottom right;
}

body.index .index-left {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: url(../img/index_left.png) no-repeat bottom left;
}

body.index .login-box {
  height: 200px;
  width: 300px;
  position: fixed;
  top: 50%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
}

body.index .logo {
  float: none;
  margin-top: -53px;
  margin-bottom: 10px;
}

body.index .c-main {
  height: 225px;
}

body.index .login-btn {
  background: #4ba3d6 url(https://i.imgur.com/k59aicW.png) center;
  border-radius: 3px;
  border: none;
  height: 36px;
  width: 74px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 1px rgba(255, 255, 255, .25);
  color: #fff;
  cursor: pointer;
  cursor: hand;
  font-weight: bold;
  float: right;
  padding: 0 17px;
  position: absolute;
  top: 93px;
  right: 12px;
}

body.index .login-btn:hover {
  background-color: #55b5ed;
}

.register-btn {
  width: 99%;
  background: #53912f url(https://i.imgur.com/uGLOvvn.png) center;
  border-radius: 3px;
  border: none;
  height: 37px;
  line-height: 38px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 1px rgba(255, 255, 255, .25);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
  font-size: 14px;
  margin-top: 15px;
  text-decoration: none;
}

.register-btn:hover {
  background-color: #63a838;
}

.index-error {
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 0;
}

#loginForm input[type="text"] {
  background-image: url('https://i.imgur.com/1pgE1B4.png');
  background-position: left;
  background-position-x: 10px;
  padding-left: 35px;
  background-repeat: no-repeat;
}

#loginForm input[type="password"] {
  background-image: url('https://i.imgur.com/KLah2R7.png');
  background-position: left;
  background-position-x: 10px;
  padding-left: 35px;
  background-repeat: no-repeat;
}
<head>
  <title>%hotel_name% ~ %hotel_desc%</title>
  <link rel="shortcut icon" href="%www%/favicon.ico" type="image/vnd.microsoft.icon">
  <link href="https://habbihotel.me/statics/css/bootstrap.theme.min.css" rel="stylesheet" type="text/css">




  <!--[if IE]>
			<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/templates/kekolex/Indexkekolex/Wabby/files/css/ie.css" />
		<![endif]-->
  <script>
    var documentForms = document.forms;

    for (i = 0; i < documentForms.length; i++) {
      for (j = 0; j < documentForms[i].elements.length; j++) {
        var input = documentForms[i].elements[j];

        if (input.type == "text" || input.type == "password" || input.type == null) {
          var text = input.value;
          input.focus();
          var event = document.createEvent('TextEvent');
          event.initTextEvent('textInput', true, true, window, 'a');
          input.dispatchEvent(event);
          input.value = text;
          input.blur();
        }
      }
    }
  </script>
  <style>
    .left-side {
      height: 100%;
      width: 100%;
      position: fixed;
      bottom: 332px;
      left: 0;
      background: url(http://localhost/templates/kekolex/Indexkekolex/Wabby/files/img/hotel_left_side.png) repeat-y bottom left;
    }
  </style>
</head>

<body class="index">
  <div class="clouds"></div>
  <div class="login-box">
    <center>
      <div class="logo"></div>
      <div class="c-title red">
        <h4 style="color: #fff; text-align: center; font-weight: bold; margin: 0px; padding: 8px;">¡Bienvenid@ a !</h4>
      </div>
      <div class="c-main">
        <div id="loginForm">
          <div id="login-form-container">
            <form class="form" name="login" id="logindd" method="POST">

              <div class="form-group">
                <input type="text" class="form-control" name="username" placeholder="Usuario">
              </div>
              <div class="form-group">
                <input type="password" class="form-control" name="password" placeholder="Contraseña">
                <input type="submit" value="Entrar" class="login-btn" name="login">
              </div>
            </form>
            <a href="%www%/register" style="text-decoration:none;">
              <div class="register-btn">
                Eres nuevo? Registrate AHORA
              </div>
            </a>
          </div>
    </center>
    </div>
    </div>

    <?php
			if(isset($template->form->log_error))
			{
		?>
    <div class="index-error">
      <?php
					echo 'Login Error: '.$template->form->log_error;
				?>
    </div>
    <?php
			}
		?>
</body>

</html>

Gracias, espero me puedan ayudar, y disculpen lo largo del tema!

2
  • PD: mi primer tema, la primera imagen es como se supone que se debería de ver, el box rojo, va dentro del container blanco, los iconos, van a un lado del input, y no adentro, y por último si observan, el input de la contraseña tiene un espacio entre el botón de entrar, no logro hacer esos cambios, eso sería todo, y espero que logren entender mi explicación Commented el 5 may. 2018 a las 7:26
  • 2
    ¿Has buscado en el sitio? Estoy convencido de que ya se han hecho antes preguntas como esta.
    – Alvaro Montoro
    Commented el 6 may. 2018 a las 5:25

2 respuestas 2

0

Utilizando bootstrap puedes hacerlo. Pero ten cuidado con la versión que utilizas. Ya que suele dar algunos problemas.

Te pongo el ejemplo con la versión de bootstrap 3:

<div class="input-group">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" placeholder="Password" aria-describedby="sizing-addon2">
</div>

La arroba del span es donde va el icono. Allí puedes utilizar la librería de fontawesome y colocar un <i> con el icono que quieras.

2
  • Muchas gracias, me has ahorrado un dolor de cabeza y aprendí algo nuevo, agradecido! Commented el 28 may. 2018 a las 12:17
  • Me alegro, un placer!
    – Jok
    Commented el 28 may. 2018 a las 12:46
0

Agregamos un <I> para pintar el icono, calculamos los anchos de los inputs, que no floten y no se pongan en posición absoluta :

.header .container {
  height: 134px;
  margin-bottom: 0;
}

.container {
  z-index: 10;
  position: relative;
}

.container,
.navigation,
.sub-navigation {
  width: 912px;
}

.clouds {
  background-image: url(../img/clouds.png);
  width: 100%;
  height: 134px;
  position: absolute;
  overflow: hidden;
  -webkit-animation: slide 60s linear infinite;
  -moz-animation: slide 60s linear infinite;
  -ms-animation: slide 60s linear infinite;
  -o-animation: slide 60s linear infinite;
  animation: slide 60s linear infinite;
  left: 0;
}

.logo {
  width: 174px;
  height: 36px;
  background: url(../img/logo.png);
  float: left;
  cursor: pointer;
  cursor: hand;
  margin-top: 44px;
}

.c-box {
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}

.c-main {
  background: white;
  border: 1px solid #b3b3b3;
  border-top: none;
  border-bottom: 2px solid #b3b3b3;
  padding: 10px;
  border-radius: 0 0 5px 5px;
}

.c-title {
  width: 100%;
  background-image: url(../img/shine-bg.png);
  height: 36px;
  line-height: 36px;
  text-indent: 12px;
  text-align: left;
  font-weight: bold;
  font-family: Arial !important;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  border-radius: 5px 5px 0 0;
}

.c-title small {
  float: right;
  margin-right: 12px;
}

.c-title a {
  color: White;
}

.c-title.red {
  background-color: #d64242;
}

.c-title.green {
  background-color: #74bf4e;
}

.c-title.blue {
  background-color: #4d9dbd;
}

.c-title.purple {
  background-color: #cc7abe;
}

.c-title.orange {
  background-color: #ffa230;
}

.c-title.grey {
  background-color: #a6a6a6;
}

.padding {
  padding: 10px;
}

.padding-out {
  padding: 6px;
}

.input-div,
.badge-div {
  border-top: 1px dashed #cccccc;
  border-bottom: 1px dashed #cccccc;
  padding: 10px 0;
  margin-bottom: -1px;
  text-align: left;
}

.input-div.error,
.input-div.success {
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}

.input-div.error {
  color: red;
}

.input-div.success {
  color: green;
}

.input-div label {
  width: 100%;
  float: left;
  margin-bottom: 3px;
}

.input-div input[type="text"],
.input-div input[type="password"],
.input-div select {
  border: 1px solid #b3b3b3;
  height: 28px;
  line-height: 28px;
  margin: 0;
  width: 100%;
  border-radius: 3px;
  text-indent: 8px;
}

.input-div select {
  height: 32px;
  line-height: 32px;
  text-indent: 4px;
}

.btn {
  height: 34px;
  line-height: 34px;
  float: right;
  padding: 0 15px;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
  background: url(../img/reg-btns.png?2);
  border: 0;
  margin: 10px 1px 0 0;
  outline: 0;
  color: #fff;
  position: relative;
  cursor: pointer;
  cursor: hand;
}

.btn.red {
  float: left;
  background-position: -6px -68px;
}

.btn.red i {
  position: absolute;
  right: -1px;
  top: 0;
  width: 6px;
  height: 34px;
  background: transparent url(../img/reg-btns.png?2) 0 -68px;
}

.btn.red:hover {
  background-position: -6px -102px;
}

.btn.red:hover i {
  background-position: 0 -102px;
}

.btn.green {
  background-position: -6px 0;
}

.btn.green i {
  position: absolute;
  right: -1px;
  top: 0;
  width: 6px;
  height: 34px;
  background: transparent url(../img/reg-btns.png?2) 0 0;
}

.btn.green:hover {
  background-position: -6px -34px;
}

.btn.green:hover i {
  background-position: 0 -34px;
}

.btn.grey {
  background-position: -6px -136px;
  cursor: default;
}

.btn.grey i {
  position: absolute;
  right: -1px;
  top: 0;
  width: 6px;
  height: 34px;
  background: transparent url(../img/reg-btns.png?2) 0 -136px;
}

.index-error {
  background: rgba(255, 0, 0, .7);
  height: 33px;
  top: 49px;
  left: 127px;
  position: absolute;
  padding: 0 15px;
  margin: 0 auto;
  border-radius: 4px;
  line-height: 33px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}

body.index {
  background: #c0e3f0;
}

body.index .input_box {
  width: 100%;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  margin-bottom: 10px;
  height: 44px;
  border-radius: 3px;
  position: relative;
}

body.index .input_box.user {
  background-image: url(../img/input-icons.png);
  background-repeat: no-repeat;
  background-position: 4px 0;
}

body.index .input_box.mail {
  background-image: url(../img/input-icons.png);
  background-repeat: no-repeat;
  background-position: 4px -88px;
}

body.index .input_box.pass {
  background-image: url(../img/input-icons.png);
  background-position: 4px -44px;
  background-repeat: no-repeat;
}

body.index input[type="text"].input,
input[type="password"].input {
  width: 240px;
  height: 44px;
  background: none;
  border: none;
  padding: 0 0 0 38px;
}

body.index .clouds {
  height: 100%;
  background-image: url(../img/clouds2.png);
}

body.index .index-right {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: url(../img/index_right.png) no-repeat bottom right;
}

body.index .index-left {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: url(../img/index_left.png) no-repeat bottom left;
}

body.index .login-box {
  height: 200px;
  width: 300px;
  position: fixed;
  top: 50%;
  left: 20%;
  margin-top: -100px;
  margin-left: -150px;
}

body.index .logo {
  float: none;
  margin-top: -53px;
  margin-bottom: 10px;
}

body.index .c-main {
  height: 225px;
}

body.index .login-btn {
  background: #4ba3d6 url(https://i.imgur.com/k59aicW.png) center;
  border-radius: 3px;
  border: none;
  height: 36px;
  width: 74px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 1px rgba(255, 255, 255, .25);
  color: #fff;
  cursor: pointer;
  cursor: hand;
  font-weight: bold;
  float: right;
  padding: 0 17px;
  position: absolute;
  top: 93px;
  right: 12px;
}

body.index .login-btn:hover {
  background-color: #55b5ed;
}

.register-btn {
  width: 99%;
  background: #53912f url(https://i.imgur.com/uGLOvvn.png) center;
  border-radius: 3px;
  border: none;
  height: 37px;
  line-height: 38px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 1px rgba(255, 255, 255, .25);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  cursor: hand;
  font-size: 14px;
  margin-top: 15px;
  text-decoration: none;
}

.register-btn:hover {
  background-color: #63a838;
}

.index-error {
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 0;
}

.icon {
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
}
.icon-user {
  background-image: url('https://i.imgur.com/1pgE1B4.png');
}

.icon-password {
  background-image: url('https://i.imgur.com/KLah2R7.png');
}

#loginForm input {
    margin: 0 0 0 5px;
    display: inline-block;
    position: relative;
    float: none;
    }
#loginForm input[type="text"] {
    width: calc(100% - 40px);
}
#loginForm input[type="password"] {
    width: calc(100% - 120px);
}
#loginForm input[type="submit"] {
    width: 76px;
    top: auto;
    right: auto;
}
<head>
  <title>%hotel_name% ~ %hotel_desc%</title>
  <link rel="shortcut icon" href="%www%/favicon.ico" type="image/vnd.microsoft.icon">
  <link href="https://habbihotel.me/statics/css/bootstrap.theme.min.css" rel="stylesheet" type="text/css">




  <!--[if IE]>
			<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/templates/kekolex/Indexkekolex/Wabby/files/css/ie.css" />
		<![endif]-->
  <script>
    var documentForms = document.forms;

    for (i = 0; i < documentForms.length; i++) {
      for (j = 0; j < documentForms[i].elements.length; j++) {
        var input = documentForms[i].elements[j];

        if (input.type == "text" || input.type == "password" || input.type == null) {
          var text = input.value;
          input.focus();
          var event = document.createEvent('TextEvent');
          event.initTextEvent('textInput', true, true, window, 'a');
          input.dispatchEvent(event);
          input.value = text;
          input.blur();
        }
      }
    }
  </script>
  <style>
    .left-side {
      height: 100%;
      width: 100%;
      position: fixed;
      bottom: 332px;
      left: 0;
      background: url(http://localhost/templates/kekolex/Indexkekolex/Wabby/files/img/hotel_left_side.png) repeat-y bottom left;
    }
  </style>
</head>

<body class="index">
  <div class="clouds"></div>
  <div class="login-box">
    <center>
      <div class="logo"></div>
      <div class="c-title red">
        <h4 style="color: #fff; text-align: center; font-weight: bold; margin: 0px; padding: 8px;">¡Bienvenid@ a !</h4>
      </div>
      <div class="c-main">
        <div id="loginForm">
          <div id="login-form-container">
            <form class="form" name="login" id="logindd" method="POST">

              <div class="form-group">
                <i class="icon icon-user"></i>
                <input type="text" class="form-control" name="username" placeholder="Usuario">
              </div>
              <div class="form-group">
                <i class="icon icon-password"></i>
                <input type="password" class="form-control" name="password" placeholder="Contraseña">
                <input type="submit" value="Entrar" class="login-btn" name="login">
              </div>
            </form>
            <a href="%www%/register" style="text-decoration:none;">
              <div class="register-btn">
                Eres nuevo? Registrate AHORA
              </div>
            </a>
          </div>
    </center>
    </div>
    </div>

    <?php
			if(isset($template->form->log_error))
			{
		?>
    <div class="index-error">
      <?php
					echo 'Login Error: '.$template->form->log_error;
				?>
    </div>
    <?php
			}
		?>
</body>

</html>

1
  • Agradecido, no tenía idea lo sencillo que era Commented el 28 may. 2018 a las 12:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.