Foros del Web » Creando para Internet » CSS »

Estilo de over para una celda

Estas en el tema de Estilo de over para una celda en el foro de CSS en Foros del Web. Hola a [email protected]: ¿Cómo hacer lo siguiente? Tengo una celda establecida de esta forma por defecto: Código: <td id="paso1" style="padding:5px; background-color:#eeeeee;" onmouseover="mostrarcapa1('paso1txt','paso1'); cambio_colover1(this);">1<img id="paso1img" style="background-image:url(imags/icoListaPasos_n.gif)" ...
  #1 (permalink)  
Antiguo 12/10/2006, 12:51
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 12 años, 8 meses
Puntos: 3
Estilo de over para una celda

Hola a [email protected]:

¿Cómo hacer lo siguiente?

Tengo una celda establecida de esta forma por defecto:

Código:
<td id="paso1" style="padding:5px; background-color:#eeeeee;"
onmouseover="mostrarcapa1('paso1txt','paso1');
cambio_colover1(this);">1<img id="paso1img"
 style="background-image:url(imags/icoListaPasos_n.gif)"
height="5" alt="" hspace="3" src="imags/invisible.gif"
 width="6" vspace="1" border="0" />Recogida</td>
Y quiero que al pasar el ratón por encima su formato sea

Código:
<td id="paso0" style="padding:5px; color:#009933; 
background-color:#feefb1; font-weight:bold;" 
onmouseover="mostrarcapa0('paso0txt','paso0');
cambio_colover(this);">0<img id="paso0img"
 style="background-image:url(imags/icoListaPasos_v.gif)"
 height="5" alt="" hspace="3" src="imags/invisible.gif"
 width="6" vspace="1" border="0" />Proceso</td>
Pues eso ¿como establecer estos estilos y que al pasar por encima con el cursor se establezca el formato deseado?

Saludos,

zacktagnan.
=================================================
  #2 (permalink)  
Antiguo 12/10/2006, 13:17
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
a) No entiendo porque aplicás CSS inline cuando le estás dando un id a la celda
b) Lo que vos querés solo con CSS va a funcionar en todos los exploradores MENOS IE6, ya que este último acepta el hover solo sobre los enalces (IE 7 ya acepta el hover en cualquier lado)

En tu archivo CSS:
Código:
#paso1{
padding:5px;
background-color:#eeeeee;}

#paso1:hover{
color:#009933;
background-color:#feefb1;
font-weight:bold;}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 12/10/2006, 13:30
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 12 años, 8 meses
Puntos: 3
Entonces ¿para que funcione en el Internet Explorer (aparte de la v. 7) que hay que hacer?

Ó ¿es imposible?

Saludos,

zacktagnan.
========================================
  #4 (permalink)  
Antiguo 12/10/2006, 13:45
 
Fecha de Ingreso: diciembre-2003
Mensajes: 204
Antigüedad: 14 años
Puntos: 2
pues con javascript...
  #5 (permalink)  
Antiguo 12/10/2006, 14:40
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
tambien puedes meterlo dentro de un link en :hover
__________________
Saludos
FT.
www.fernando.com.mx
  #6 (permalink)  
Antiguo 12/10/2006, 15:32
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 12 años, 8 meses
Puntos: 3
fer10,

¿Quieres decir que meta la celda dentro de una etiqueta de vínculo?

¿<a><td>...</td></a>?


Saludos,

zacktagnan.
========================================
  #7 (permalink)  
Antiguo 13/10/2006, 00:12
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
no..
algo asi


Cita:
<td><a href="#"></a></td>
y el A lo haces bloque poniendole height definino .
__________________
Saludos
FT.
www.fernando.com.mx
  #8 (permalink)  
Antiguo 13/10/2006, 04:46
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 12 años, 8 meses
Puntos: 3
Perdona por insistir fer10...

Pero si pones...

Código:
<td><a href="#"></a></td>
Y quieres que toda la celda cambie de color de fondo al pasar el cursor, es decir yendo de background-color:#eeeeee; al background-color:#feefb1;...
Si este estilo lo defines en la hoja de estilos y luego lo aplicas al vínculo

Código:
<td><a href="#" class="cambioFondo"></a></td>
Sólo cambiará todo el fondo de la celda si logras que el vínculo ocupe toda la celda...


Respecto a...

Cita:
y el A lo haces bloque poniendole height definino .
No estiendo bien a que te refieres. Lo del bloque me suena a una propiedad de estilos ¿es así?... Y lo del ¿height definino?...¿qué es y aplicado a la etiqueta <a> ó a la <td>? ¿No haría fal ta también un width...?

Saludos,

zacktagnan.
=====================================
  #9 (permalink)  
Antiguo 13/10/2006, 09:45
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
Cita:
Sólo cambiará todo el fondo de la celda si logras que el vínculo ocupe toda la celda...
efectivamente esa es la intencion..

Cita:
No estiendo bien a que te refieres. Lo del bloque me suena a una propiedad de estilos ¿es así?...
el elemento bloque, mas que ser de los estilos es una forma de visualisacion en html, y existen elementos bloques y en linea..

effectivamente con estilos puedes definir algunos elementos en linea como bloque, es la intencion de hacer el elemento <a> en como bloque..
Cita:
Y lo del ¿height definino?..
tienes que poner el height de lo que quieras que mida la celda, o igual dejar que solo se estire.
Cita:
. ¿No haría fal ta también un width...?
no por que un elemento bloque mide todo el width si este no ha sido definido entonces no ahy necesidad de definirlo. solo el height.
Cita:
¿qué es y aplicado a la etiqueta <a> ó a la <td>?
para lograr el esto encesitas meter todo los elementos en linea a la etiqueta <a> como : img, span, etc.. y ya ahy la formateas dentro de ella.. alineando espacios alturas etc.

oviamente todo se aplica al link ya que en i6< no soporta ninguna etiqueta mas que <a> :hover

pd: escribo bien feo =(... (definino= "definido")
__________________
Saludos
FT.
www.fernando.com.mx

Última edición por fer10; 13/10/2006 a las 09:50 Razón: detallando el mensaje
  #10 (permalink)  
Antiguo 13/10/2006, 10:55
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 12 años, 8 meses
Puntos: 3
Vale fer10...

Ya lo he probado.

Entonces es poner la celda así:

Código:
...
<table style="width:50%;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#" class="menu">Paso 0</a></td>
...
El estilo usado en la etiqueta <a> queda así:

Código:
<style type="text/css">
<!--
.menu {
	padding:5px;
	background-color:#eeeeee;
	display: block;/* PARA QUE LA PROPIEDAD DE COLOR DE FONDO OCUPE TODA LA CELDA */
}
a.menu:link, a.menu:active, a.menu:visited {
	color: #999999;
	text-decoration: none;
}
a.menu:hover {
	color:#009933;
	background-color:#feefb1;
	font-weight:bold;
}
-->
</style>
Y ya está. Bien. Lo único que si se pasa por encima de la zona fuera del vínculo, el cambio no funciona pero bueno. Aún y todo ya está.

Gracias otra vez fer10 por tu ayuda. Hasta otra...

Saludos,

zacktagnan.
============================================
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 03:07.