Foros del Web » Creando para Internet » CSS »

Botón Rollover - Me Falta Algo

Estas en el tema de Botón Rollover - Me Falta Algo en el foro de CSS en Foros del Web. Hola a todos, En la realización de un botón rollover de lo más simple e insignificante me encuentro con que por alguna razón que no ...
  #1 (permalink)  
Antiguo 17/07/2007, 08:02
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Botón Rollover - Me Falta Algo

Hola a todos,

En la realización de un botón rollover de lo más simple e insignificante me encuentro con que por alguna razón que no llego a comprender no acaba de funcionar.

Tendría que ser un botón todo en verde oliva y con las letras en blanco en reposo.

En hover, tendría que dar un fondo blanco, letras en oliva y un borde 2px en oliva a juego con el texto interior.

No me funciona. Algo me falta y no sé qué es.

El botón sería:

<div id=contacto><a href="contacto.html">Contacto</a></div>

Y el CSS:

#contacto {
MARGIN: 0px 0px 0px 0px;
PADDING: 0px;
POSITION: absolute;
FONT-SIZE: 12px;
background: #ff0000;
WIDTH: 122px;
HEIGHT: 24px;
TOP: 0px;
LEFT: 0px;
}
#contacto A {
MARGIN: 22px 0px 22px 0px;
PADDING: 0px 30px 0px 31px;
COLOR: #ffffff;
BACKGROUND: #006600;
BORDER: #006600 2px solid;
TEXT-DECORATION: none;
}
#contacto A:hover {
MARGIN: 22px 0px 22px 0px;
FONT-SIZE: 12px;
FONT-FAMILY: tahoma;
FONT-WEIGHT: bold;
COLOR: #006600;
BORDER: #006600 2px solid;
BACKGROUND: #ffffff;
}

Parece como si el padding correspondiente no funcionase más que en izquierda y derecha. No obedece en inferior y superior. El resultado es que el botón se ve bien a lo largo, pero no a lo alto y bajo, sin borde en el hover en dichas direcciones, ya que el borde sólo aparece en izquierda y derecha.

Extraño (que seguramente será una tontería), pero algo me falta.

Agradecería vuestra ayuda.

Un saludo.
  #2 (permalink)  
Antiguo 17/07/2007, 09:22
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Botón Rollover - Me Falta Algo

Hola,

tal vez con una imagen entenderíamos mejor el efecto que quieres lograr, además de que nos digas en qué navegador lo estás probando, porque yo lo veo bien en Firefox 2 y Explorer 7. Por ahora te digo que <a> es un elemento inline, por lo que margin y padding generalmente no van a funcionar como lo esperas. puedes poner

Código:
#contacto A {
display:block;
/*lo demas*/
}
a ver qué tal te funciona

saludos
  #3 (permalink)  
Antiguo 17/07/2007, 09:34
 
Fecha de Ingreso: noviembre-2005
Mensajes: 825
Antigüedad: 12 años, 1 mes
Puntos: 8
Re: Botón Rollover - Me Falta Algo

Sabía que faltaba algo.

Gracias Demiurgo.
  #4 (permalink)  
Antiguo 19/07/2007, 12:16
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Re: Botón Rollover - Me Falta Algo

Los elementos se ponen en minusculas... a en lugar de A no es la causa del problema y quiza nunca lo sea, pero es una regla general.
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 22:21.