Foros del Web » Creando para Internet » CSS »

Alinear Input con imagen

Estas en el tema de Alinear Input con imagen en el foro de CSS en Foros del Web. Hola amigos, He intentado alinear una imagen a un input (campo de texto) de modo que el campo de texto se vea con bordes redondeados, ...
  #1 (permalink)  
Antiguo 18/11/2010, 14:19
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Alinear Input con imagen

Hola amigos,

He intentado alinear una imagen a un input (campo de texto) de modo que el campo de texto se vea con bordes redondeados, por lo que debería ser mas menos así:

<img><input><img>

Lamentablemente, el input no se alinea y las imagenes quedan más arriba que la caja de texto.

¿Alguna solución?

Saludos
__________________
La Pana
  #2 (permalink)  
Antiguo 18/11/2010, 14:56
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear Input con imagen

ponle tu imágen redondeada de fondo al input, no creo que varíes los tamaños de los campos input, en todo caso, muestranos tu css y el ejemplo de la web online.

Saludos.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 18/11/2010, 15:12
Avatar de kalvinman  
Fecha de Ingreso: octubre-2006
Ubicación: Bogota Colombia
Mensajes: 849
Antigüedad: 11 años, 1 mes
Puntos: 22
Respuesta: Alinear Input con imagen

Hay dos formas en las que yo suelo hacer este tipo de cosas:

La primera es crear la imagen de fondo colocarla en un div o en un tabla como fond y ensima el input con fondo transparente. <input type="text" style="background-color:transparent; " />

La segunda me parece mas interesante es usando CSS 3 y la funcion border radius que permite crear redondeado a los campos y objetos mediante CSS
Código CSS:
Ver original
  1. -webkit-border-radius: 4px;
  2. -moz-border-radius: 4px;
  3. border-radius: 4px;
  #4 (permalink)  
Antiguo 18/11/2010, 15:27
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Respuesta: Alinear Input con imagen

Hice algo mejor. Una tabla con 3 columnas y en cada celda los elementos con padding y spacing 0 y ya.

Funciona perfecto.

Gracias de todas maneras
__________________
La Pana
  #5 (permalink)  
Antiguo 18/11/2010, 15:39
Avatar de kalvinman  
Fecha de Ingreso: octubre-2006
Ubicación: Bogota Colombia
Mensajes: 849
Antigüedad: 11 años, 1 mes
Puntos: 22
Respuesta: Alinear Input con imagen

JEJEJJE si funciona perfecto pero no es algo mejor, estarás cargando mas gráficos, usando una tabla innecesariamente y pasando de usar 4 o 5 lineas de código a usar unas 20 lineas.
  #6 (permalink)  
Antiguo 18/11/2010, 15:51
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear Input con imagen

¿algo mejor????? tanto te costaba ponerlo de background con css? =S el border radius no sale en ningún ie a menos que uses un archivo htc, lo cual para mi no es problema, pero para los demás creo que sí por eso no lo sugerí.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #7 (permalink)  
Antiguo 18/11/2010, 17:15
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Alinear Input con imagen

Cita:
Iniciado por Dalvenjha Ver Mensaje
¿algo mejor????? tanto te costaba ponerlo de background con css?
Así es. Esa era la manera correcta.
  #8 (permalink)  
Antiguo 19/11/2010, 06:39
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Respuesta: Alinear Input con imagen

Lo que pasa es que así creo una caja genérica para todo el sitio, entonces sin importar la longitud de la caja de texto, la tabla se adapta manteniendo la forma.
Si hubiese hecho un css con un fondo tendría que crear un estilo para cada una de las cajas con distinto ancho.

Gracias a todos.

Saludos
__________________
La Pana
  #9 (permalink)  
Antiguo 19/11/2010, 07:05
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear Input con imagen

Taaaaaaaaaaaaaaaaaaaaaaaantos inputs tienes? en todo caso podías usar border-radius como sugirió alguien en vez de hacer chapuzas.

Busca PIE.htc en google eso hará que te funcione el border radius en IE.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #10 (permalink)  
Antiguo 19/11/2010, 08:20
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Alinear Input con imagen

Cita:
Iniciado por ztikma Ver Mensaje
Lo que pasa es que así creo una caja genérica para todo el sitio, entonces sin importar la longitud de la caja de texto, la tabla se adapta manteniendo la forma.
Si hubiese hecho un css con un fondo tendría que crear un estilo para cada una de las cajas con distinto ancho.

Gracias a todos.

Saludos
Nada de eso. Como dice mi abuela "Oye consejo para que llegues a viejo" (Claro, el "CSS" de mi abuela es Cultivar, Surcar y Sembrar). Te hice un ejemplo que espero se explique por sí mismo:

http://www.darioferrer.com/varios/caja-input/1.php
  #11 (permalink)  
Antiguo 19/11/2010, 09:07
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Respuesta: Alinear Input con imagen

Gran ejemplo, meta. Voy a aplicarlo y les aviso.

Saludos
__________________
La Pana
  #12 (permalink)  
Antiguo 19/11/2010, 09:41
Avatar de kalvinman  
Fecha de Ingreso: octubre-2006
Ubicación: Bogota Colombia
Mensajes: 849
Antigüedad: 11 años, 1 mes
Puntos: 22
De acuerdo Respuesta: Alinear Input con imagen

Cita:
Iniciado por Dalvenjha Ver Mensaje
Taaaaaaaaaaaaaaaaaaaaaaaantos inputs tienes? en todo caso podías usar border-radius como sugirió alguien en vez de hacer chapuzas.

Busca PIE.htc en google eso hará que te funcione el border radius en IE.
WOWWWWW no concia PIE esta de lujooooo
  #13 (permalink)  
Antiguo 19/11/2010, 10:15
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Alinear Input con imagen

Ah sí encontré eso como solución cuando estaba trabajando la página de este año de Buena Onda, lo uso más que nada para los border-radius, pero tiene otras utilidades.

Saludos!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Etiquetas: alinear, input
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 19:51.