Foros del Web » Creando para Internet » CSS »

Como cambiar atributos en botones css

Estas en el tema de Como cambiar atributos en botones css en el foro de CSS en Foros del Web. Hola tengo un problema para cambiar los atributos de la imagen en un boton css rollver y quiero cambiarlo de forma a las medidas de ...
  #1 (permalink)  
Antiguo 30/06/2011, 14:55
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 5 años, 10 meses
Puntos: 3
Exclamación Como cambiar atributos en botones css

Hola tengo un problema para cambiar los atributos de la imagen en un boton css rollver y quiero cambiarlo de forma a las medidas de la imagen es decir si tengo una imagen de 200x80 sea a esa media el codigo que tengo es el siguiente:

Código HTML:
<html>
	<head>
	<style type="text/css">
	.cinco a {
		font-family: Comic Sans MS, Comic Sans MS, sans-serif;
		font-size: 0px;
		text-decoration: none;
		color: #000000;
		background-image: url(http://dl.dropbox.com/u/33016972/icon2.png);
		background-repeat: no-repeat;
		background-position: center center;
		padding:35px;
	}
	.cinco a:hover {
		font-family: Arial Black, Comic Sans MS, sans-serif;
		font-size: 0px;
		text-decoration: none;
		color: #000000;
		background-image: url(http://dl.dropbox.com/u/33016972/icon1.png);
		padding:40px;
	}


	</style>
	</head>
	
	<body>
	<div class="cinco">
	<a href="url">url</a>
	</div>
	</body>
	</html> 
Donde dice padding es donde es el problema no se puede ajustar con width y height gracias espero me hayan entendido y me puedan ayudar :D
  #2 (permalink)  
Antiguo 30/06/2011, 15:16
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Como cambiar atributos en botones css

agrege las propiedades

- display:block
- width
- height
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 01/07/2011, 01:33
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Como cambiar atributos en botones css

Pero entre donde las coloco ??? en padding ???
  #4 (permalink)  
Antiguo 01/07/2011, 10:10
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Como cambiar atributos en botones css

quiero pensar que el padding usted lo coloco pensando que el link crecería tanto ancho como algo... siendo así y siguiendo el mismo patrón que tiene su código quedaría de la siguiente forma:

Código CSS:
Ver original
  1. .cinco a {
  2.     display:block;
  3.     width:35px;
  4.     height:35px;
  5.     text-indent:100px;
  6.     text-decoration: none;
  7.     background: url(http://dl.dropbox.com/u/33016972/icon2.png) no-repeat center center;
  8. }
  9. .cinco a:hover {
  10.     width:40px;
  11.     height:40px;
  12.     background-image: url(http://dl.dropbox.com/u/33016972/icon1.png);
  13. }

le sugiero pase a leer algun libro o tutorial sobre CSS, para empezar le recomiendo este -> clic aquí

Edito: el tipo de letra, color y tamaño no son necesarios si los va a ocultar...
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 02/07/2011, 00:06
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Como cambiar atributos en botones css

Oye pero sale como un link normal ya no sale ni la imagen ??? no abra otra forma de hacer botones asi ? rollover ? por su atencion gracias y gracias Ag666
  #6 (permalink)  
Antiguo 02/07/2011, 00:51
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Como cambiar atributos en botones css

aunque ciertamente cometí un error en el código anterior, este no afecta al mostrar la imagen... acabo de probar el código y funciona perfectamente... le dejo el código tal cual lo he implementado.

mi error estuvo en text-indent:100px; debió de ser en negativo -> text-indent:-100px;

y el codigo que con el que acabo de probar fue:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5.     <meta name="author" content="Ag666" />
  6.     <title>Untitled 1</title>
  7. <style type="text/css">
  8.     .cinco a {
  9.         display:block;
  10.         width:35px;
  11.         height:35px;
  12.         text-indent:-100px;
  13.         text-decoration: none;
  14.         background: url(http://dl.dropbox.com/u/33016972/icon2.png) no-repeat center center;
  15.     }
  16.     .cinco a:hover {
  17.         width:40px;
  18.         height:40px;
  19.         background-image: url(http://dl.dropbox.com/u/33016972/icon1.png);
  20.     }
  21. </head>
  22.  
  23.     <div class="cinco">
  24.     <a href="url">url</a>
  25.     </div>
  26.  
  27. </body>
  28. </html>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 02/07/2011, 13:39
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Como cambiar atributos en botones css

Oh gracias si sirvio pero mi error era comprobarlo en navegador safari el dual tiene incompatibilidad lo probe con internet explorer y si funciona no habra posibilidad de hacerlo compatible con todos o la mayoria de navegadores ? perdon si molesto y de verdad mil gracias de nuevo a Ag666 me ah salvado el pellejo :D
  #8 (permalink)  
Antiguo 03/07/2011, 08:04
Avatar de Sanchy_com  
Fecha de Ingreso: marzo-2011
Ubicación: Uruguay
Mensajes: 35
Antigüedad: 6 años, 2 meses
Puntos: 5
Respuesta: Como cambiar atributos en botones css

Debería funcionar en Safari.

Qué es exactamente lo que sucede cuando lo probás con Safari?

Tal vez lo que este sucediendo es que la imagen de fondo al hacer el hover este tardando en cargar y por eso no la hayas visto.

Si es eso te convendria hacer un Sprite. Eso es, poner las 2 imagenes en 1 misma. Una seguida de la otra (vertical u horizontalmente). Y al hacer :hover simplemente cambias el background-position

Por ejemplo:

Código:
.cinco a {
background: url(icon-sprite.png) no-repeat left top; (con left top posicionas la imagen de fondo en su vertice superior izquierdo)
}
    
.cinco a:hover {        
background-position:left -35px; (35px es la altura que se debe "bajar" la imagen de fondo para "llegar" a la segunda imagen, con un valor negativo "bajas" y con un valor positivo "subis")
    }

Practica un poco para ver como funciona. Suerte :)
__________________
Sanchy.com - Diseño de Páginas Web en Uruguay

Última edición por Sanchy_com; 03/07/2011 a las 14:04
  #9 (permalink)  
Antiguo 04/07/2011, 02:54
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Como cambiar atributos en botones css

Hola gracias por responder ya probe el codigo de Sanchy_com pero no ah resultado a un sigue teniendo incompatibilidad con safari opera y netscape aun no lo eh proboda con google chrome espero me puedan ayudar lo necesito de verdad mil gracias.
  #10 (permalink)  
Antiguo 04/07/2011, 10:07
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Como cambiar atributos en botones css

tal vez tengas algo mas en el código que este afectando, el código que te proporcione tiene compatibilidad con todos los navegadores e inclusive por tu comentario de incompatibilidad lo he probado en todos los navegadores actualmente mas utilizados (safari, chrome, IE7-9, opera y FF)

todo anda perfecto... el netscape nunca lo tomo en cuenta quizás porque no conozco nadie que lo utilice, mas tarde lo descargare solo para hacer esta prueba.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #11 (permalink)  
Antiguo 06/07/2011, 00:40
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Como cambiar atributos en botones css

entonces la pregunta es como poner el codigo ??? y donde colocar cada atributo eso es lo que me falla
  #12 (permalink)  
Antiguo 06/07/2011, 09:54
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.663
Antigüedad: 9 años, 3 meses
Puntos: 913
Respuesta: Como cambiar atributos en botones css

si tienes el código tal cual te lo di debería funcionar... coloca en un archivo html el código que te proporcione en la respuesta #6 y pruebalo funciona perfectamente en todos los navegadores....

la falla que puedas tener en el resto de tu sitio sin ver el sitio en vivo o en su defecto el código es imposible ayudarte.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: menu-css-horizontal, rollover
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 07:23.