Foros del Web » Creando para Internet » HTML »

Problema con box login

Estas en el tema de Problema con box login en el foro de HTML en Foros del Web. Hola buenas tardes, soy nuevo aqui en el foro y queria dejarles mi inquietud, que de seguro, para muchos sera facil de resolver..pero claro, no ...
  #1 (permalink)  
Antiguo 29/03/2016, 17:39
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Problema con box login

Hola buenas tardes, soy nuevo aqui en el foro y queria dejarles mi inquietud, que de seguro, para muchos sera facil de resolver..pero claro, no para mi..

El login seria asi para que se den idea

Usuario:
"campo para introducir datos"
Password:
"Campo para introducir datos"

Ahora.. Yo quiero eliminar las palabras Usuario y password, que estan afuera del box y ponerlas adentras del box. y que cuando pongas el mouse para escribir tus datos, esto se borre.. Muchas webs lo tienen, me estuve matando y no puedo lograr hacerlo.

Eh puesto value= para tener el campo con una palabra, pero este queda fijo y hay que borrarlo a mano, algo incomodo..

Espero que me hayan entendido

Muchas gracias
  #2 (permalink)  
Antiguo 29/03/2016, 18:44
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

Agregue
value="" placeholder="Username or Email"></p>
<input type="password" name="password" value="" placeholder="Password"></p>

En el de username or email. Anda bien y como quiero
sin embargo, en el de password me aparece la palabra oculta y al poner el mousse ni siquiera se borra
  #3 (permalink)  
Antiguo 30/03/2016, 14:26
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

hablas del placeholder?? o del label???
__________________
[email protected]
HITCEL
  #4 (permalink)  
Antiguo 30/03/2016, 15:05
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

a esto me refiero


El de usuario me aparece bien, cuando pongo el mouse y escribo la palabra se borra.
pero en el campo de contraseña, primero que la palabara aparece oculta y segundo, al poner el mousse para escribir, hay que borrarla completamente.

Cita:
<div onblur="valida1();" id="usuario" aria-hidden="true" class="hint ellipsis"></div>

<input id="usuario" aria-label="usuario" class="field" name="user" value="" placeholder="Usuario" spellcheck="false" size="30" maxlength="5096" type="text">

</div>


<div class="field-underline"></div>


<div class="space padder2"> <span class="input-msg show">




</span></div></div>
<div class="formrow">






<div class="padding2">

<div id="hPass" aria-hidden="true" class="hint ellipsis">Password</div>

<input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value=" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">
<span
class="input-msg show">


asi seria el codigo que tengo maso menos, asi me anda con el script...anda perfecto y funciona todo, no queiro tocar alguna variable que no entienda y despues que no me ande el script, solo quiero cambiar eso
  #5 (permalink)  
Antiguo 30/03/2016, 17:10
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

error:
Código HTML:
Ver original
  1. <input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value=" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

solucion:
Código HTML:
Ver original
  1. <input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

unas simples comillas no colocadas, ojo con eso
__________________
[email protected]
HITCEL
  #6 (permalink)  
Antiguo 30/03/2016, 20:19
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

Cita:
Iniciado por xfxstudios Ver Mensaje
error:
Código HTML:
Ver original
  1. <input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value=" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

solucion:
Código HTML:
Ver original
  1. <input id="pass" aria-label="Contrasena" class="field tTip" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">

unas simples comillas no colocadas, ojo con eso
uff! Me salvaste, no lo habia visto y no entendia por que no andaba. Ahi lo corregi y anda.

Te hago una ultima consulta, como podria darle estilo SOLO a los dos "box" de login, osea, donde escribis los datos.
Tengo todo el estilo al rededor, etc, pero el box de login me queda medio feo
  #7 (permalink)  
Antiguo 30/03/2016, 20:31
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

creas una clase en el css, algo asi mas o menos:

Código CSS:
Ver original
  1. .input{
  2.     width:100%;
  3.     height:15px;
  4.     border-radius:5px;
  5. }
  6. .input:hover{
  7.     border:solid;
  8.     border-color:#00BDE4;
  9.     border-width:1px;
  10. }

y la asignas a los inputs:

Código HTML:
Ver original
  1. <input id="pass" aria-label="Contrasena" class="field tTip input" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">
__________________
[email protected]
HITCEL
  #8 (permalink)  
Antiguo 30/03/2016, 20:41
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

mmm no te entendi mucho, segun tengo, el codigo de estilo es este:
<div id="label17" class="label-text" aria-hidden="true" style="display: block; color: rgb(170, 170, 170); position: absolute; top: 0px; left: 0px; width: 239px; padding: 0px; text-align: start; font-size: 13.3333px;">usuario</div>

en teoria, este es el del estilo de box

aqui el ejemplo

el 1 seria el mio

Última edición por ezzezhito; 30/03/2016 a las 20:48
  #9 (permalink)  
Antiguo 30/03/2016, 20:48
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

ese div segun es la etiqueta, a que le quieres dar estilo???? a las label o a los inputs????
__________________
[email protected]
HITCEL
  #10 (permalink)  
Antiguo 30/03/2016, 20:57
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

Cita:
Iniciado por xfxstudios Ver Mensaje
ese div segun es la etiqueta, a que le quieres dar estilo???? a las label o a los inputs????
A todo el recuadro que dice usuario/contraseña. creo que es el inputs... pero no se como agregarlo. hay forma de hacerlo con ese codigo que te di? pero que quede en el html, sin necesidad de hacerlo con css?
  #11 (permalink)  
Antiguo 30/03/2016, 22:18
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

Cita:
Iniciado por xfxstudios Ver Mensaje
creas una clase en el css, algo asi mas o menos:

Código CSS:
Ver original
  1. .input{
  2.     width:100%;
  3.     height:15px;
  4.     border-radius:5px;
  5. }
  6. .input:hover{
  7.     border:solid;
  8.     border-color:#00BDE4;
  9.     border-width:1px;
  10. }

y la asignas a los inputs:

Código HTML:
Ver original
  1. <input id="pass" aria-label="Contrasena" class="field tTip input" name="pass" value="" placeholder="Contraseña" spellcheck="false" size="30" maxlength="5096" type="password">
debes probar con este codigo, el que me diste no tiene nada que ver con el input como tal, aqui se explica bien, solo debes crear la clase con la que le quieras asignar el estilo a los inputs y agregarla como ver alli

Ejemplo:

class="field tTip input"

la que esta en negrillas es la clase nueva por ejemplo y se le coloca a cada input al que quieras asignarle ese estilo en particular

Ejemplo: https://jsfiddle.net/xfxstudios/w8vt6ojw/

__________________
[email protected]
HITCEL
  #12 (permalink)  
Antiguo 30/03/2016, 23:21
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

ok eh entendido, (creo)
ahora, como hago para apuntar eso al .css

Osea, creo el .css con el codigo de diseño del box, y luego como lo apunto? osea, usco class=""

pero, como apunto el archivo .css
  #13 (permalink)  
Antiguo 30/03/2016, 23:23
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

ve ESTO y te orientas mejor, cualquier otra duda avisas, claro despues de revisar el enlace. Saludos
__________________
[email protected]
HITCEL
  #14 (permalink)  
Antiguo 30/03/2016, 23:27
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

Cita:
Iniciado por xfxstudios Ver Mensaje
ve [URL="https://www.google.co.ve/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=curso%20basico%20de%20html%20y%20css"]ESTO[/URL] y te orientas mejor, cualquier otra duda avisas, claro despues de revisar el enlace. Saludos
Lo pude hacer con <link href="css/style.css" rel="stylesheet" type="text/css" \/>

Pero, con tu estilo y en un login de prueba. Ahora pruebo hacerlo directo en la web y con el mio a ver si queda bien y te comento
  #15 (permalink)  
Antiguo 30/03/2016, 23:31
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 7 meses
Puntos: 263
Respuesta: Problema con box login

perfecto amigo
__________________
[email protected]
HITCEL
  #16 (permalink)  
Antiguo 30/03/2016, 23:59
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

Ok, he probado.
Lo puse y funciona (use tu codigo de estilo)
El problema es que el codigo de estilo que tengo yo, es totalmente diferente y no se como adaptarlo al que me diste vos.

este es el que tengo, en teoria, ahi esta el estilo del box tambien
Cita:

div#ds_container{
width: 95%;

}
div#label9.label-text,div#label10.label-text{
top:2px !important;
}

#bot-nav{

float: right;
min-width: 90px
}
.input-msg.show{
font-size: 11px ! important;
font-weight: bold ! important;
width: 65% ! important;
}
#label8,#label9,#label10{
left:7px ! important;
top: 2px;
}
#expiryForm div#label9.label-text,#expiryForm div#label10.label-text{
top:0px !important;
}
#expiryForm div#label11{
left:7px !important;
}
.hsa label{
float: none ! important;
width: auto! important;
display: inline! important;
font-weight: normal! important;
}
#passwordfocusmsg{
display:none! important;
}
.btn.bigblue input.btnSignIn { background:none !important; box-shadow:none; margin-top:2px; }
.bigblue span input.btnSignIn {
padding: 7px 23px 8px 23px;
font-size: 1.3em;
color: #fff !important;
text-shadow: 0 -1px #367BBB;
display: inline-block;
}
.red {
color:red ! important;
}
tr td:last-child{

display:none;
}
p.intro{
width:70%;
}

p#your-{
width:100%! important;
}
div.column.last.main.daw2sv{
width:100%! important;
}
h3.hsa.heading
{
font-size: 14px ! important;
margin-right: 0;
word-wrap: break-word;
}
#send-temporary-security-code-to{
font-weight:bold;
font-size:12px ! important;
margin: 15px 0 10px 0;
}
h2.headingStyle{
font-size: 20px! important;
}
div.formrow.radio.hsa{
padding-bottom: 5px! important;
}
.recovery{
padding-top:15px;
}
/*Expiry specific css start*/
strong{
font-weight:bold;
color:black
}

#expiryForm p.intro,#harvest p.intro,#harvest p,.formrow label{
width:100%;
font-size:14px;
color: #333;
}
#ds_container{
padding-top: 2%
}
#expiryForm #ds_container{

width:87%
}
#expiryForm .formrow{
margin: 14px 0px 0 -10px;
}
#passwordfocus{
color: #666;
font-size: 11px;
letter-spacing: 0.07mm;
}
#passText{margin-left:0px!important}

div#bot-nav-panel{
width: 100%;
}
#refresh_device_div,span#refresh_device{
float:left;
}
#refresh_device_div{
width: 50%;
}
/*Hack to make the article tag expand based on the internal div tags (which have float css) , without using overflow:hidden


Since overflow:hidden causes problems to display the password-pop up correctly*/
/* new clearfix */
.base-template:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .base-template { zoom: 1; } /* IE6 */
*:first-child+html .base-template { zoom: 1; } /* IE7 */
.base-template { overflow:visible!important; }
/*Expiry specific css end*/
/* End hide from IE-mac */
/*****************CUSTOM ADDED FOR DS LOGIN & HSA::::END********************/

div#recovery-key-container{
text-align:center;
}
//for offline devices
.edit .formrow {

margin: 1em 9px 0 0;

width: 449px;
}

.formrow.hsa.offline span.bubble-originator {
position: relative;
}

.formrow.hsa.offline .bubble-originator {
display: none;
}
.formrow.hsa.offline .information-popup-wrapper {
left: 0;
}

.topPosition {
top: -45px;
}

.information-popup-wrapper {
position: absolute;
display: none;
z-index: 10;
}
.topcap {
position: absolute;
top: -13px;
right: 14px;
width: 252px;
background: url(../../../../) no-repeat 0 0;
z-index: 9999;
height: 13px;
}

.validation-dialog-offline {
width: 205px;
padding: 0 20px 0px 55px;
background: url(../../../../) no-repeat 0 0;
background-position: center;
display: inline-block;
position: relative;
z-index: 999999;
height: 100%;
}
.bottomcap {
left: 14px;
position: absolute;
bottom: -13px;
right: 14px;
height: 13px;
width: 252px;
background: url(../../../..) no-repeat 0 0;
z-index: 9999;
}

/*information pop up*/


/*.information-popup-wrapper {
position: absolute;
display: none;
z-index: 10;
}

.information-popup-wrapper.offline-device-status {
//left: 227px;
left: -108px;
}

.information-popup-wrapper.ipad-3 {
//top: -161px;
top: -236px;
left: -111px;
}*/

.information-popup-wrapper h1 {
font-weight: bold;
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
margin-left: 14px;
word-wrap: break-word;
}

.information-popup-wrapper .info-dialog {
padding-top: 5px;
padding-bottom: 5px;
}

.information-popup-wrapper .info-dialog h1,
.information-popup-wrapper .info-dialog p {
margin: 0 0 5px -12px;
padding: 0;
}

.information-popup-wrapper.horizontal .info-dialog h1,
.information-popup-wrapper.horizontal .info-dialog p {
margin: 5px 15px 5px -20px;
}

.information-popup-wrapper .info-dialog h1 {
font-weight: bolder;
font-size: 12px;
}

.information-popup-wrapper .info-dialog p {
font-weight: normal;
}

.information-popup-wrapper .topcap,
.information-popup-wrapper .bottomcap {
left: 14px;
}

.formrow.hsa.offline .information-popup-wrapper {
left: 0;
}
.hsa .device-list .row.offline .status-text:hover + .information-popup-wrapper {
display: block;
}

.formrow.hsa label,
.formrow.hsa.offline label {
float: none;
display: inline;
text-align: left;
width: auto;
}

.formrow.hsa.offline span.bubble-originator {
position: relative;
}
.hsa .device-list .row.offline .status-text:hover {
cursor: pointer;
}

.formrow.hsa.offline .bubble-originator {
display: none;
}

.formrow.hsa.offline label:hover {
cursor: pointer;
}

.information-dialog {
position: relative;
padding: 0 20px 3px 5px;
background: url(../../../../) repeat-y 0 0;
z-index: 999999;
background-position: center;
height: 100%;
}

.information-dialog {
width: 231px;
}

.information-dialog em,
.information-dialog p {
font-size: 12px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
margin-left: 14px;
}

.information-dialog em {
font-weight: bold;
}

.information-dialog p {
font-weight: normal;
word-wrap: break-word;
}
article.base-template{
min-height:450px;
}
.main-footer .gf-sosumi{
padding-top:15px;
}
img.img-22{
margin-top:-5px;
}
div.right div.button-panel{
padding-top:1em ! important;
}
.biggrey span{
padding: 7px 23px 8px 23px;
}
a{
text-decoration:none;
}
p.bubble_info_style{
display:inline-block;
font-size:12px ! important;
color:black;
}
.formrow.hsa.offline label{
font-size:12px ! important;
}
/*span#ipad-offline-information1.bubble-originator{
display:inline ! important;
}*/
.formrow.hsa.offline .horizontal{

left:-10px ! important;
}
.formrow.hsa.offline .topPosition{
top: -53px ! important;
}
span#refreshingDeviceList,#refreshing{
width:200px ! important;
padding-top:10px ! important;
font-size:1em ! important;
}
span#refreshImage,#refreshing.show{

display:inline;
padding-top:10px ! important;
}
#refreshingDeviceList,#refreshing {
background: url('../../../../') 0% 90% no-repeat;
padding-left: 18px;
color: #929292 !important;
height: 16px;
line-height: 16px;
display: none;
background-size: 16px 16px;
}
#resendImage{
color: #08C;
font-size: 12px;
position:relative;
left:-12px;
}
#resendImage img{
padding-right:5px !important;
}
a{
text-decoration:none !important;
}
#bot-nav-panel.styler{
padding-top:20px;
}

label.radio-label{
font-size: 12px ! important;
}
#rkOverlayPanel .button-panel hr{
display:none;
}
.accountLocked #rkOverlayPanel #bot-nav-panel.styler{
padding-top:2px ! important;
}
.grey_out p{
margin-top: -12px ! important;
text-align: left;
width: 250px;
color: #999;
}
.grey_out img{
width: 14px;
height: 17px;
}
h2#your-apple-id-heading{
font-size: 20px ! important;
font-weight: normal;
}
p#your-apple-id.intro{

font-size: 14px;
line-height: 1.5em;
color: #888;
}
.sign-in-panel h2,h2.infoString,h4.editableLabel{
font-size:20px !important;
font-weight: normal;
}
div#label7.label-text,div#label8.label-text,div#label6.label-text{
left:7px ! important;
top:2px ! important;
}
a#rkLink{
font-size: 12px ! important;
}

p#after-trusted-device-choices{
font-size: 12px ! important;
}

div.right.manage div.button-panel{
margin-top:-10px;
}
#refreshImage img,.send-code #resendImage img{
width: 14px;
height: 17px;
}
.grey_out img{
margin-top: -7px ! important;
}
.editableLabel,#harvest p,.birthdate{

margin-bottom: 0.8em! important;
}
#birthYear +.alert{
top: 45px ! important;
right: 300px;
}
#harvest .button-panel
{
margin-top: 3em ! important;
}

#harvest span.formwrap.security-question.tbox-wrap{
background: none ! important;
}

#harvest select.questionsWidth{
width:310px;
}
div.support{
bottom: 0px ! important;
left: 0px ! important;
}
span#rememberBrowser{
font-size: 12px; float: left; padding-left: 10px; padding-top: 3px;
}

span#rememberMeCheckBox{
float:left;padding-bottom: 1px;padding-left: 5px;
}
.grey_out{
color: #999;
}
  #17 (permalink)  
Antiguo 31/03/2016, 00:42
 
Fecha de Ingreso: marzo-2016
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: Problema con box login

ok, ah quedado bastante bien, eh estado probando algunas cosas.
Me falta, adjuntarle unas imagenes al rededor del box, ahi en codigo de arriba, estan, pero aqui, en este codigo nuevo, no puedo apuntarlas y que queden

Etiquetas: box, login
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:41.