Estilo de over para una celda

zacktagnan · #1 (**permalink**) 12/10/2006, 11:51

Hola a tod@s:

¿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.
=================================================

webosiris · #2 (**permalink**) 12/10/2006, 12:17

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;}

zacktagnan · #3 (**permalink**) 12/10/2006, 12:30

Entonces ¿para que funcione en el Internet Explorer (aparte de la v. 7) que hay que hacer?

Ó ¿es imposible?

Saludos,

zacktagnan.
========================================

DaChux · #4 (**permalink**) 12/10/2006, 12:45

pues con javascript...

fer10 · #5 (**permalink**) 12/10/2006, 13:40

tambien puedes meterlo dentro de un link en :hover

zacktagnan · #6 (**permalink**) 12/10/2006, 14:32

fer10,

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

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

Saludos,

zacktagnan.
========================================

fer10 · #7 (**permalink**) 12/10/2006, 23:12

no..
algo asi

Cita:

y el A lo haces bloque poniendole height definino .

zacktagnan · #8 (**permalink**) 13/10/2006, 03:46

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.
=====================================

fer10 · #9 (**permalink**) 13/10/2006, 08:45

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")

zacktagnan · #10 (**permalink**) 13/10/2006, 09:55

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.
============================================