Que la celda completa sea un link

[sjam7]

Hola, tengo una tabla donde esta un menu asi:

Código:

<tr>
<td bgcolor="#FCFCFC" onmouseover='this.style.background="#00ffff"' onmouseout='this.style.background="white"'>
<a href="catalogo.asp>Catalogo</a>
</td>
</tr>

La celda mide 160px de ancho pero el texto no, lo que hago con esto es que al poner el mouse encima de la celda esta cambie de color, esto va bien, pero lo que quiero es que TODA la celda se tome como si fuera el enlace, como si fuera una imagen y que no solamente al ponerse sobre el texto se pueda hacer click.

Espero me haya explido por que yo ya me hice bolas espero su ayuda, gracias

PD, de preferecia si se puede que sea sobre el mismo tag <td> mejor

[caricatos]

Iniciado por sjam7

...

PD, de preferecia si se puede que sea sobre el mismo tag <td> mejor

En el tag td puedes usar el evento click pero tendrías que simular el comportamiento (poner cursor pointer y tranajar el status...)...

No estoy seguro pero puedes poner el enlace con un width del 100% (si te interesa puedes definir los enlaces dentro de celdas...
td a {
width: 100%;
height: 100%;
}

Saludos

[Rafael]

Si, completo un poco, más bien haz tu

td a {width: 100px; height: 50px; display: block;}

y deja que la celda se amolde al link, que en realidad este es el que queda como la imagen.

Y juega con tu a:hover.

[sjam7]

y esto no me afectaria a todos los td's?

[JavierB]

Hola sjam7

Fijate que caricatos y Rafael han puesto td a eso quiere decir que afectará a las etiquetas <a> que estén dentro de una etiqueta <td>

Saludos,

[sjam7]

la pregunta es por que todo mi contenido esta en tablas, por eso pregunto

[baccxus]

Puedes hacerlo, como te digeron antes, sólo con CSS y sin necesidad de usar onmouse...:

estilo:

Código:

.td1 {
width: 160px;
}
.td1 a:link {
background-color: #FCFCFC;
display: block;
}
.td1 a:hover {
background-color: #00FFFF;
}

Y así queda tu tabla:

Código HTML:

<table><tr><td class="td1"><a href="catalogo.asp">Catalogo</a></td></tr></table> 

Espero te sirva.

Saludos,

[sjam7]

he intentado ver como lo hace el buen Al en:
http://www.poderlocal.net/v3/

pero no entiendo el como

[Rafael]

Sjam7.

Al usar Css hay ciertos conceptos como cascada, herencia y selectores.

Básicamente, dependiendo de cómo escribas el código te afecta, no es como en la "multiplicación", aquí "el órden de los factores SI altera el producto".

Por ejemplo, si quieres afectar TODAS las celdas de tu página usas por ejemplo td {color: #CCC;}

Pero en este caso lo que se escribió fué por ejemplo:
td a {color: #CCC;}
Lo que dice es "Afecta a todos los links que se encuentren dentro de una celda, no a los que estén fuera ni a las celdas en sí mismas".

Poner a td {color: #CCC;} es una cosa coompletamente diferente, aunque no se debe meter una celda dentro de un link, supuestamente dice:
"Afecta a las celdas que estén dentro de un link".


Baccxus está usando además clases, esto es más específico aún.

.td1 a{color: #CCC;}

Significa "afecta a los links que estén dentro de alguna "cosa" marcada como tipo td1". Si queremos ser más claros ponemos

td.td1 a {color: #CCC;}

y ya no es cualquier cosa, es una celda del tipo td1.

[JavierB]

Hola de nuevo.

Tienes puesta una clase a la celda:

<td width="100%" height="25" align="left"><a href="default.asp" class="menu_link">Home</a></td>

y le aplican un estilo similar al que ya te han comentado:

http://www.poderlocal.net/v3/estilos.css

Saludos,

[sjam7]

aqui esta aplicado como me dice el buen baccxus, diganme ustedes si hay algo mal

http://eventos.rentandowebs.com

en la porqueria de IE me descuadra las celdas y en FX nomas no se ve

[baccxus]

viejito, puedes poner los "circulitos" en el CSS también y hacer que cambién al poner el mouse encima:

Código:

.td1 {
width: 160px;
}
.td1 a:link {
background-color: #FCFCFC;
display: block;
background-image: url(images/bullet1.gif);
background-position: left center;
background-repeat: no-repeat;
padding-left: 25px;
}
.td1 a:hover {
background-color: #00FFFF;
background-image: url(images/bullet1.gif); /*no se como se llama el otro circulito*/
background-position: left center;
background-repeat: no-repeat;
padding-left: 25px;
}

Además te ahorrarías un montón y no tendrías que poner en cada celda la imagen y el espacio.

Por otro lado, abusas de las tablas (no sé porque) si todo el diseño lo puedes hacer con CSS y te evitarías tanto dolor de cabeza, además puedes colocar todos los Scripts del encabezado por aparte.

[sjam7]

de hecho todo esta hecho con asp, entonces la celda solo la pongo una vez, ademas hay varios includes que me hacen mucho mas facil todo

de css, estoy empezando a ver como va, y empece mal :-s

[baccxus]

Iniciado por sjam7

de hecho todo esta hecho con asp, entonces la celda solo la pongo una vez, ademas hay varios includes que me hacen mucho mas facil todo

Me lo imaginé!

Iniciado por sjam7

de css, estoy empezando a ver como va, y empece mal :-s

Mal no, nadie puede nacer sabiendo, primero hay que gatear para luego caminar y al final correr!!!.
Saludos,

[Rafael]

Asp, hummm, entonces el problema si será el ancho y alto fijo... Trata com el td a {
width: 100%;
height: 100%;
}
de Caricatos pero ponle display: block;

tal vez a las celdas ponles padding: 0;

td {padding: 0;}

[sjam7]

pues sigue sin verse como quiero, solo se sombrea y sigue siendo enlace el texto, por eso sigo con las tablas hasta que pueda usar css pa lo que quiero

[baccxus]

Viendo el código que te postié (o posteé?) funciona, seguro es algo heredado, pero es que ese enredo de código....!!!

Estoy tomándome un break y buscaré ayudarte,

Saludos,

[programeitor]

Hola.

Aplicando el estilo solo al link o a un id.

a{display:block;width:100%;height:100%;}

[seudoCodigo]

El problema es que ese efecto no funciona con el Internet Explorer. Por alguna razon IE no maneja el display: block igul que lo hace Firefox.

Con CSS puedes lograr tambien rollovers, chekate una pagina de uno de mis clientes. El menu lo hice totalmente con CSS, nada de javascripts. http://www.acitechnologypr.com

[programeitor]

.

Ie entiende display:block igual que Ns.

¿ has hecho la prueba de un modo similar a este ?:

<style>
a{display:block;width:100%;height:100%;}
td{width:160px;text-align:center;}
</style>
<table border=1>
<tr>
<td>
<a href=>
Home
</a>
</td>
</tr>
</table>

yo lo he probado, y me funciona, es decir, toda la celda es un link.

.

[seudoCodigo]

Gracias programeitor, si funciona, no lo habia intentado de esa forma.

[sjam7]

Iniciado por programeitor

.

Ie entiende display:block igual que Ns.

¿ has hecho la prueba de un modo similar a este ?:

<style>
a{display:block;width:100%;height:100%;}
td{width:160px;text-align:center;}
</style>
<table border=1>
<tr>
<td>
<a href=>
Home
</a>
</td>
</tr>
</table>

yo lo he probado, y me funciona, es decir, toda la celda es un link.

.

Pero no afecta a todos los enlaces y tablas?

[Rafael]

Tal vez limitalo a una tabla asignandole
table class=Efectos

y tu css
table.Efectos a {bla bla bla.}

En fin limítalo asignando class donde necesites.