HTML - Algunos problemillas con login

   
Vista:

Algunos problemillas con login

Publicado por Rodrigo (3 intervenciones) el 05/07/2015 10:59:32
Hola, estoy haciendo un login en el que me salen algunas dudas y/o problemillas de diseño. Os dejo el archivo html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
 
<html lang="es" class="body-full-height">
 
    <head>
        <title>Identificación</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" id="theme" href="css/style.css"/>
    </head>
    <body>
        <div class="login-container animated fadeInDown">
            <div class="login-box">
                <div class="login-logo"></div>
                <div class="login-body">
                    <div class="login-title"><strong>Bienvenido/a</strong>, por favor identifíquese</div>
                    <form action="index.html" class="form-horizontal" method="post">
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <input type="password" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6">
                            <a href="#" class="btn btn-link btn-block">¿Olvidaste la contraseña?</a>
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-info btn-block">Entrar</button>
                        </div>
                    </div>
                    </form>
                </div>
               </div>
        </div>
    </body>
</html>

este es el archivo css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@charset "UTF-8";
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,500,600,700&subset=latin,latin-ext);
@import "jquery/jquery-ui.min.css";
@import "bootstrap/bootstrap.min.css";
@import "fontawesome/font-awesome.min.css";
@import "summernote/summernote.css";
@import "codemirror/codemirror.css";
@import "nvd3/nv.d3.css";
@import "mcustomscrollbar/jquery.mCustomScrollbar.css";
@import "fullcalendar/fullcalendar.css";
@import "blueimp/blueimp-gallery.min.css";
@import "rickshaw/rickshaw.css";
@import "dropzone/dropzone.css";
@import "animate/animate.min.css";
 
html * {
  outline: none !important;
}
html,
body {
  min-height: 100%;
  padding: 0px;
  margin: 0px;
  background: #f5f5f5;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #22262e;
  overflow-x: hidden;
}
.body-full-height {
  height: 100%;
}
.body-full-height body {
  height: 100%;
}
 
/* LOGIN */
.login-container {
  float: left;
  width: 100%;
  min-height: 100%;
  background: #1b1e24;
}
.login-container .login-box {
  width: 400px;
  margin: 0px auto;
  padding-top: 100px;
}
.login-container .login-box .login-logo {
  background: url("../img/logo.png") top center no-repeat;
  width: 100%;
  height: 100px;
  float: left;
  margin-bottom: 10px;
}
.login-container .login-box .login-body {
  width: 100%;
  float: left;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.login-container .login-box .login-body .login-title {
  color: #FFF;
  font-size: 19px;
  font-weight: 300;
  margin-bottom: 20px;
}
.login-container .login-box .login-body .form-control {
  border: 0px;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 15px;
  color: #CCC;
  line-height: 20px;
  height: auto;
}
.login-container .login-box .login-body .form-control:focus {
  border: 0px solid #939993;
}
.login-container .login-box .login-body .btn-link {
  color: #FFF;
  border: 0px;
  }
.login-container .login-box .login-body .btn-info {
  color: #FFF;
  border: 0px;
  border-radius: 5px;
  background: #299d1e;
  }
/* END LOGIN */

a todo esto, el resultado es este: http://ecomoto.16mb.com/pages-login-backend.html

Solo dos dudas:
- El link "¿Olvidaste la contraseña?" me gustaria que fuera hacia la izquierda y que coincidiera con la parte del textbox.
- En vez de los placeholder me gustaría poner dos iconos en los textbox y passwordbox tal como este: http://desarrollosphp.arredemo.org/

Como debería hacerlo?

Saludos y gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

Algunos problemillas con login

Publicado por txema (10 intervenciones) el 05/07/2015 17:17:02
Hola Rodrigo:

Respondiendo a tus dos preguntas:

1.- El link "¿Olvidaste la contraseña?" me gustaria que fuera hacia la izquierda y que coincidiera con la parte del textbox.
En css/theme-default.css tienes para class="login-body" un padding: 20px; por lo que te desplaza 20 px hacia la derecha.

2.- En vez de los placeholder me gustaría poner dos iconos en los textbox y passwordbox tal como ...
En este caso utilizan los iconos como si fueran texto sobre fuentes oficiales (el tema es muy actual y ya lo tocamos en temas anteriores, revisa http://zurb.com/playground/foundation-icon-fonts-3 (no es la única)
de cualquier modo, podrías poner una imagen/icomo mediante <span> previo al input y dentro de un div que le dé forma
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar