Foros del Web » Creando para Internet » CSS »

Imagen de botón cortada

Estas en el tema de Imagen de botón cortada en el foro de CSS en Foros del Web. Hola, le he instalado un botón para buscar en el menú de un blog, pero no sé por qué razón la imagen que he puesto ...
  #1 (permalink)  
Antiguo 30/06/2011, 04:58
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 8 años, 7 meses
Puntos: 5
Imagen de botón cortada

Hola, le he instalado un botón para buscar en el menú de un blog, pero no sé por qué razón la imagen que he puesto sale cortada. A ver si alguien se puede pasar por www.bdebelleza.blogspot.com y me puede echar una mano, porque por más vueltas que le doy no doy con la tecla.
Un saludo.

P/D He conseguido que salga entera haciendola más pequeña pero claro, ahora es mas estrecha que la barra de menú y al estar ajustada arriba y a la izquierda no queda bien, me gustaría o bien poder centrar la imagen de ahora o bien poder poner la otra grande sin que se corte para cubrir todo el hueco del botón.

Última edición por kahlo84; 30/06/2011 a las 05:14
  #2 (permalink)  
Antiguo 30/06/2011, 05:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 1 mes
Puntos: 1010
Respuesta: Imagen de botón cortada

intenta con la propiedad background-position para colocar la imagen como mas te interese
  #3 (permalink)  
Antiguo 30/06/2011, 05:22
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: Imagen de botón cortada

Muchas gracias por responder, con background position he conseguido mover la imagen y podría centrarla pero el problema es que como puedes ver ahora mismo, al mover la imagen aunque sea solo unos pocos pixeles se corta, por lo que sigo igual... :(
  #4 (permalink)  
Antiguo 30/06/2011, 05:32
 
Fecha de Ingreso: noviembre-2009
Mensajes: 41
Antigüedad: 7 años, 7 meses
Puntos: 10
Respuesta: Imagen de botón cortada

Se corta porque tienes el background-position a 5px 5px, seguramente lo has puesto para que no quede pegado a la parte izquierda y superior, pero entonces no tiene suficiente width ni height para mostrar todo la imagen, le faltan esos 5px.

De todas formas, si quieres separar el input, deberías hacerlo con margin, no con el background-position, además quita el float, el margin right y añade un text-indent para que no quede el texto de Buscar pegado a la izquierda de la imagen, yo lo pondría así:

lin 821:

Código:
#b-query {
    background: url("http://img833.imageshack.us/img833/6283/buscarg.png") no-repeat scroll 0 0 transparent;
    border: none;
    color: #000;
    font: 15px Georgia,serif;
    margin: 8px;
    text-indent: 10px;
    width: 167px;
}
  #5 (permalink)  
Antiguo 30/06/2011, 05:59
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: Imagen de botón cortada

Guauuu, justo lo que quería, ha quedado perfecto!! Muchisimas gracias!!!! :D
  #6 (permalink)  
Antiguo 30/06/2011, 13:46
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: Imagen de botón cortada

Hola de nuevo, el menú y la opción de buscar andan perfectas, pero tengo un problemilla parecido al añadir imágenes al menú. Como podeis ver, el botón de RSS y la bandera inglesa tienen un tamaño diminuto (15 px de alto) porque si las pongo un poco más grande o bien se me hace mucho más alto el menú entero, o bien se me descuadra la caja de busqueda y me aparece debajo. Supongo que debe tener algo que ver con los márgenes (estoy un poco verde en css) pero no tengo ni idea de como arreglarlo y poder poner las imágenes aunque sea un poco más grandes.
Muchas gracias.
  #7 (permalink)  
Antiguo 01/07/2011, 09:03
 
Fecha de Ingreso: noviembre-2009
Mensajes: 41
Antigüedad: 7 años, 7 meses
Puntos: 10
Respuesta: Imagen de botón cortada

Para esto primero deberias poner un class específico en estos <li> en concreto, para que así con css puedas reducir el padding-top y padding-bottom del <a> que va dentro, pero sólo en estos <li>, en el resto (links de texto) no. Por eso necesitas añadir-le un class.

Así luego puedes poner la imagen un poco más grande y te cabrán bien.
  #8 (permalink)  
Antiguo 02/07/2011, 10:28
 
Fecha de Ingreso: diciembre-2008
Mensajes: 211
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: Imagen de botón cortada

Bueno pues he intentado poner los códigos y al cargar el blog me desaparecio parte del menú, e incluso parte del código del widget! Supongo que lo habré hecho mal, voy a tener que repasar css aunque no sé en que me habré podido equivocar... si no se hubiera borrado parte del código podría copiaroslo a ver donde estaba el fallo...

Etiquetas: Ninguno
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 06:33.