Foros del Web » Creando para Internet » CSS »

CSS submit

Estas en el tema de CSS submit en el foro de CSS en Foros del Web. Saludos, espero alguien me pueda ayudar con un dolor de cabeza de CSS. La cosa es así: Tengo un CSS definido para lo que será ...
  #1 (permalink)  
Antiguo 07/12/2010, 11:45
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Pregunta CSS submit

Saludos, espero alguien me pueda ayudar con un dolor de cabeza de CSS.

La cosa es así:

Tengo un CSS definido para lo que será un botón submit:

Código CSS:
Ver original
  1. .contactSubmit
  2. {
  3. cursor:pointer;
  4.     background-color:transparent;
  5.     background-image:url(./images/qa_bottom.png);
  6.     background-position:center center;
  7.     background-repeat:no-repeat;
  8.     border:medium none;
  9.     color: rgba(0, 0, 0, 0);
  10.     height:90px;
  11.     font-size: large;
  12.     font-color: #fff;
  13.     margin-left:100px;
  14.     padding:0;
  15.     text-align:center;
  16.     width:90px;
  17.     z-index:1;
  18. }

Y al momento de utilizar esta hoja de estilos en FireFox, Chrome e incluso Opera utilizo este HTML tag:

Código HTML:
Ver original
  1. <input type="submit"  class="contactSubmit" />

Sin utilizar el parámetro value=""

Como lo mencione antes en navegadores de verdad funciona de mil maravillas SOLO se ve la imagen y hace el Submit.

Sin embargo en IE 8 me sobre escribe un texto en el botón generado con submit lo raro es que no muestra en el codigo fuente del HTML el parámetro value

__________________
No por que a mi nadie me ayudo a aprender a programar yo no les voy a ayudar ...

Comunicación Web
  #2 (permalink)  
Antiguo 07/12/2010, 11:56
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Respuesta: CSS submit

Bueno, gracias a todos los que dedicaron un par de minutos a la lectura de mi pregunta.

Logre hacer que Internet Explorer no coloque el texto sobre mi lindo botón CSS

Todo se queda igual solo cambié:
Código CSS:
Ver original
  1. font-size: large;

POR

Código CSS:
Ver original
  1. font-size: 0px;

Y asunto resuelto.
__________________
No por que a mi nadie me ayudo a aprender a programar yo no les voy a ayudar ...

Comunicación Web
  #3 (permalink)  
Antiguo 07/12/2010, 11:56
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: CSS submit

en primera tienes dos errores en el css

color: rgba(0, 0, 0, 0); debe ser -> color: rgb(0, 0, 0);

font-color: #fff; la propiedad font-color no existe en css para asignar color al texto se usa color:#fff que se contra pone con la etiqueta que pusiste en rgb

y bien define en el botón así:

Código HTML:
Ver original
  1. <input type="submit" value="enviar" class="contactSubmit" />

y tu css:

Código CSS:
Ver original
  1. .contactSubmit
  2. {
  3. cursor:pointer;
  4.     background-color:transparent;
  5.     background-image:url(./images/qa_bottom.png);
  6.     background-position:center center;
  7.     background-repeat:no-repeat;
  8.     border:medium none;
  9.     height:90px;
  10.     font-size: large;
  11.     color: #fff;
  12.     text-indent:-300px;
  13.     margin-left:100px;
  14.     padding:0;
  15.     text-align:center;
  16.     width:90px;
  17.     z-index:1;
  18. }

con text-indent:-300px; haces que el texto salga de cuadro y no sea visible
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 07/12/2010, 12:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS submit

Editado:
Ag666 ya apuntó los errores.

Sólo añado que si va a utilizar font-size:0; se cure en salud y añada el line-height:0;
Y utilice la forma acortada para el background.

Por cierto, Ag666, el valor rgba si es válido en css (ver. 3). Pero su razón de ser es utilizar el cuarto valor para la transparencia y que versiones antiguas de los navegadores e ie no lo soportan (ahora no recuerdo si tampoco el 8).
  #5 (permalink)  
Antiguo 07/12/2010, 12:09
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: CSS submit

Cita:
Iniciado por kseso? Ver Mensaje
Por cierto, Ag666, el valor rgba si es válido en css (ver. 3). Pero su razón de ser es utilizar el cuarto valor para la transparencia y que versiones antiguas de los navegadores e ie no lo soportan (ahora no recuerdo si tampoco el 8).
gracias por la observación... pasare a revisar las nuevas propiedades css 3 creo que me quede un poco atrás, aun no conocía la existencia de rgba
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 07/12/2010, 12:24
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Respuesta: CSS submit

Cierto:
El porque de este codigo:
Código CSS:
Ver original
  1. color: rgba(0, 0, 0, 0);

Era por que de alguna forma desesperada en que el texto del value que no puse en ningun momento en mi submit era para poder hacerlo transparente, el font-color era alguna idea de un diseñador de algo así como 100 años de edad y veo que no le atino.

En fin llegamos a buen termino con este mensaje.

Gracias a todos.
__________________
No por que a mi nadie me ayudo a aprender a programar yo no les voy a ayudar ...

Comunicación Web
  #7 (permalink)  
Antiguo 07/12/2010, 12:41
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: CSS submit

Bueno no se si todavia es valido, pero en vez de usar input submit, no usas input image
Código HTML:
Ver original
  1. <input type="image" src="Image.png" width="000px" />

y otra observacion tambien.
Si la class contactsubmit la usas solamente para el input submit, para que definir entonces valores de la font?

Saludos
  #8 (permalink)  
Antiguo 07/12/2010, 13:28
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: CSS submit

compañero Portgaz, no es que sea valido o no usar un input image para dicha función pero en lo personal considero mas limpio usar el input sumit y modificarlo con css, esto porque si uso un input image tendría que buscar algo de java para realizar la funcion del submit y eso es un trabajo innecesario... ñ.ñ como dicen los abuelos sale mas caro el caldo que las albóndigas

en cuanto a definir valores para el font si no mostrara el texto es buena pregunta, creo que simplemente fue un despiste y al final no afecta en nada
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 07/12/2010, 13:39
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: CSS submit

Ok ok entiendo Ag666
Si a lo que te refieres con Javascript y el trabajo innecesario, es darle el efecto de "pico boton y se sume", mejor utilizas el input submit. Esta bien.

E inclusive lo tendre en cuenta para mis proyectos también ñ.ñ
Saludos.
  #10 (permalink)  
Antiguo 07/12/2010, 13:49
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: CSS submit

"pico boton y se sume" ?¿ no entendí muy bien eso jeje me sonó a albur

En fin la función del submit es enviar los datos recopilados de todo el formulario para ser procesados, y dicha función puede ser reemplazada pero es algo innecesario cuando existe algo que ya lo hace automáticamente.

Aparte imagínate un formulario grande ¬¬ me da flojera de solo pensarlo
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #11 (permalink)  
Antiguo 21/12/2010, 11:24
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Respuesta: CSS submit

Bueno gracias a todos por sus comentarios y apoyo, sin duda es una polemica bastante buena entre usar submit o image.

Lo raro de todo esto era que aun cuando mi submit NO tenia value en IE mostraba el texto "Enviar consulta" por arriba de mi imagen y eso me trajo un dolor de cabeza siendo que dicho parámetro no existía, la idea era simplemente que ningún texto existiera sobre mi imagen.

Finalmente se logro por lo que estoy agradecido con todos.
__________________
No por que a mi nadie me ayudo a aprender a programar yo no les voy a ayudar ...

Comunicación Web

Etiquetas: submit
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 21:02.