Foros del Web » Creando para Internet » CSS »

Que la celda completa sea un link

Estas en el tema de Que la celda completa sea un link en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2005, 17:09
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Que la celda completa sea un link

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
  #2 (permalink)  
Antiguo 21/10/2005, 19:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Cita:
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 21/10/2005, 19:54
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
  #4 (permalink)  
Antiguo 22/10/2005, 08:44
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
y esto no me afectaria a todos los td's?
  #5 (permalink)  
Antiguo 22/10/2005, 10:08
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 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,
  #6 (permalink)  
Antiguo 22/10/2005, 10:30
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
la pregunta es por que todo mi contenido esta en tablas, por eso pregunto
  #7 (permalink)  
Antiguo 22/10/2005, 11:10
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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,
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 22/10/2005, 11:26
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
he intentado ver como lo hace el buen Al en:
http://www.poderlocal.net/v3/

pero no entiendo el como
  #9 (permalink)  
Antiguo 22/10/2005, 11:31
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
  #10 (permalink)  
Antiguo 22/10/2005, 11:34
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 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,
  #11 (permalink)  
Antiguo 22/10/2005, 11:48
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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
  #12 (permalink)  
Antiguo 22/10/2005, 12:25
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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.
__________________
Al final del día hablar es gratis, codificar no lo es
  #13 (permalink)  
Antiguo 22/10/2005, 12:35
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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
  #14 (permalink)  
Antiguo 22/10/2005, 12:38
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Cita:
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é!
Cita:
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,
__________________
Al final del día hablar es gratis, codificar no lo es
  #15 (permalink)  
Antiguo 22/10/2005, 12:39
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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;}
  #16 (permalink)  
Antiguo 22/10/2005, 12:42
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
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
  #17 (permalink)  
Antiguo 22/10/2005, 14:59
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
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,
__________________
Al final del día hablar es gratis, codificar no lo es
  #18 (permalink)  
Antiguo 22/10/2005, 21:23
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Hola.

Aplicando el estilo solo al link o a un id.

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


  #19 (permalink)  
Antiguo 22/10/2005, 22:25
Avatar de seudoCodigo  
Fecha de Ingreso: octubre-2003
Ubicación: Puerto Rico
Mensajes: 163
Antigüedad: 14 años, 1 mes
Puntos: 1
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

Última edición por seudoCodigo; 23/10/2005 a las 21:53
  #20 (permalink)  
Antiguo 23/10/2005, 09:21
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
.

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.

.
  #21 (permalink)  
Antiguo 23/10/2005, 21:52
Avatar de seudoCodigo  
Fecha de Ingreso: octubre-2003
Ubicación: Puerto Rico
Mensajes: 163
Antigüedad: 14 años, 1 mes
Puntos: 1
Gracias programeitor, si funciona, no lo habia intentado de esa forma.
  #22 (permalink)  
Antiguo 24/10/2005, 09:06
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Cita:
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?
  #23 (permalink)  
Antiguo 24/10/2005, 14:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
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 10:34.