Foros del Web » Creando para Internet » CSS »

Crear un menú en el que cambie el fondo de la celda al pasar el ratón

Estas en el tema de Crear un menú en el que cambie el fondo de la celda al pasar el ratón en el foro de CSS en Foros del Web. Buenas. La cuestión es que me gustaría crear un menú en el que pasase el ratón por encima y el fondo de la celda de ...
  #1 (permalink)  
Antiguo 24/05/2005, 04:30
 
Fecha de Ingreso: mayo-2005
Mensajes: 4
Antigüedad: 12 años, 6 meses
Puntos: 0
Crear un menú en el que cambie el fondo de la celda al pasar el ratón

Buenas.

La cuestión es que me gustaría crear un menú en el que pasase el ratón por encima y el fondo de la celda de la tabla cambiase de color. ¿Cómo se podría hacer esto? He buscado por la página, pero hay tanta info que me he quedao loco.

¿Alguien me puede echar un cable?

Gracias.
  #2 (permalink)  
Antiguo 24/05/2005, 05:01
Avatar de izar  
Fecha de Ingreso: enero-2004
Mensajes: 519
Antigüedad: 13 años, 10 meses
Puntos: 1
Creo que esto te puede servir como orientacion (aunque hay cosas q no estan bien echas, pero ahorita no tengo tiempo de depurar, hice un Ctrl+c -> Ctrl+v) hay mezclado css y etiquetas html q pueden hacerse por css, pero para el efecto q buscas, está lo importante.

Código:
<STYLE TYPE="text/css">
TABLE {font -size:10 pt;font-weight:normal; color:white;font-family:verdana}
TD{height:7pt}
A:link{color:white;text-decoration:none}
A:visited{color:white;text-decoration:none}
A:hover{color:white;text-decoration:none}
</STYLE>

<TABLE align="left" width="15%" height="138" border= "2" cellspacing="0"  bgcolor="#A28C11" bordercolordark="#A28C11" bordercolorlight="#E6C71A">
        <TR> 
          <TD style="font-size:10pt;font-weight:bold;color:white"  WIDTH="15%" HEIGHT="22"  onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" > 
            <a  href="index2.html">Inicio</a></font></TD>
        </TR>
        <TR> 
         <TD style="font-size:10pt;font-weight:bold;color:white" WIDTH="15%" HEIGHT="22"  bgColor="#E6C71A"           onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" >
            <a  href="descargas.html">Descargas</a></font></TD>
        </TR>
        <TR> 
          <TD style="font-size:10pt;font-weight:bold" WIDTH="15%" HEIGHT="22"  onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" >
            <a  href="foro">foro</a></font></TD>
        </TR>
        <TR> 
          <TD style="font-size:10pt;font-weight:bold" WIDTH="15%" HEIGHT="22" onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" > <a href="chat">Chat</a></font></TD>
        </TR>
        <TR> 
        <TD style="font-size:10pt;font-weight:bold" WIDTH="15%" HEIGHT="22" onmouseover="this.style.backgroundColor='#E6C71A';"this.style.cursor='hand'" onmouseout="this.style.backgroundColor='#A28C11';"this.style.cursor='default'" > <a href="acerca.html">Acerca</a></font></TD>
          </a>
        </TR>
      </TABLE>
suerte

Última edición por izar; 24/05/2005 a las 05:16
  #3 (permalink)  
Antiguo 24/05/2005, 05:53
 
Fecha de Ingreso: mayo-2005
Mensajes: 4
Antigüedad: 12 años, 6 meses
Puntos: 0
Muchas gracias.

Eso exactamente es lo que quería.

Pero la idea era meterlo todo en la hoja de estilos.

¿Sería posible?

Un saludo.
  #4 (permalink)  
Antiguo 24/05/2005, 07:57
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
aca hay un buen ejemplo:
http://css.maxdesign.com.au/listamatic/vertical10.htm
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 25/05/2005, 05:32
 
Fecha de Ingreso: mayo-2005
Mensajes: 4
Antigüedad: 12 años, 6 meses
Puntos: 0
Esta me va perfecta. Ya he personalizado el menú, pero tengo un problemilla.

Meto el menú en una columna de una tabla de 120 de ancho. Luego hago que el contenedor tenga también 120 de ancho:

#navcontainer a{
display: block;
padding: 2px 2px 2px 5px;
border: 1px solid #333;
width: 120px;
height: 15px;
background-color: #FFE6E6;
background-image: url(boto1.gif);
}

El problema es el siguiente: en Explorer se me ve perfecto, pero cuando visualizo con Firefox, se me sale de la tabla (quiero decir, que hace que la tabla aumente de 120 de ancho).

He estado mirando y es debido al padding del navcontainer y a los bordes de 1 pixel que pongo. No tengo mucha idea de css, pero creo que Explorer y Firefox lo "interpretan diferente". Firefox pone esos 120 más el padding y los bordes, y Explorer mete el padding y los bordes dentro de los 120 pixeles que tengo establecidos en la columna.

¿Hay alguna manera de hacer que se vea igual? ¿O kaka pa mi web?

Un saludo y seguid así.
  #6 (permalink)  
Antiguo 25/05/2005, 06:12
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Buitrako

Echa un ojo a este enlace que dejó kemie (¡hola! ) en otro mensaje:

http://www.disenorama.com/articulos/...o_de_cajas.htm

Saludos,
  #7 (permalink)  
Antiguo 25/05/2005, 16:07
 
Fecha de Ingreso: mayo-2005
Mensajes: 4
Antigüedad: 12 años, 6 meses
Puntos: 0
¡Muchas gracias Javier!

La verdad es que me ha parecido un enlace muy interesante. Ya tengo la página en favoritos...

Por simple curiosidad: ¿vosotros qué hacéis en estos casos?

¡Un saludo!
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 13:39.