Link 100% Ancho de Celda

sancroce · #1 (**permalink**) 25/10/2005, 14:39

NO LOGRO QUE LA CELDA DE MI TABLA (de menu) SEA EL VINCULO Y NO SOLO EL TEXO (href).... AYUDA !!!!!!!!

Tengo el siguiente <STYLE>

A.Menu:link {text-decoration:none;color:black; display: block}
A.Menu:visited {text-decoration:none;color:black;display: block}
A.Menu:hover{text-decoration:none;display:block;font-weight:bold; width:100%; height:100%}
A.Menu:active{text-decoration:none;color:black;display: block}

.separador {border-right: 1px solid #BBAADD; display: block}
</style>

aplicado a la siguiente tabla
<table background="images/BtnFondo.jpg" style="border: 1px solid #BCCFDE" height="25" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" align="center" class="separador">
<font size="2" face="Tahoma" class="Sombra">
<a class="Menu" href="Pagina1.asp" >Pagina1</a>
</font>
</td>
<td width="10%" align="center" class="separador">
<font size="2" face="Tahoma" class="Sombra">
<a class="Menu" href="Pagina2.asp">Pagina2</a>
</font>
</td>
</tr>
</td>

MUCHAS GRACIAS

iconogt · #2 (**permalink**) 25/10/2005, 14:54

Talvés este link te sirva de algo.

http://www.forosdelweb.com/f53/que-celda-completa-sea-link-343806/

baccxus · #3 (**permalink**) 25/10/2005, 15:04

primero que todo "A" no es lo mismo que "a" para los navegadores que respaldan 100% el CSS, eso debes cambiarlo.

Lo segundo es que debes aplicarle la clase a la celda y no al link.

Saludos,

PD: también puedes resumir tu código y dejarlo así:

Código:

table {border: 1px solid #BCCFDE; background-image:url (images/BtnFondo.jpg); width: 100%;}
td {width: 50%; text-align: center}
table, tr, td {border-collapse: collapse;}
.menu a:link, .menu a:visited, .menu a:active {text-decoration:none; color:black; display: block;}
.menu a:hover{font-weight:bold;}
.separador {border-right: 1px solid #BBAADD; display: block}

y la tabla queda así:

Código HTML:

<table>
<tr>
<td class="menu separador">
<a href="Pagina1.asp" >Pagina1</a>
</td>
<td class="menu">
<a href="Pagina2.asp">Pagina2</a>
</td>
</tr>
</table>

sancroce · #4 (**permalink**) 25/10/2005, 16:24

Trabaje sobre lo ultimo recomendado... y ....
ALGO MUY LOCO PASA Y ME HA PASADO ANTES...

Si hacen Copy-Paste del siguiente codigo veran que solo tiene el comportamiento deseado la primer celda. Las otras celdas solo se activan sobre el texto

Disculpen si estoy muy verde con este tema... gracias

<%@ LANGUAGE = VBScript%>
<%Option Explicit%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<style type="text/css">
table {border: 1px solid #BCCFDE; background-image:url (images/BtnFondo.jpg); width: 100%;}
td {width: 20%; text-align: center}
table, tr, td {border-collapse: collapse;}

.menu a:link, .menu a:visited, .menu a:active {text-decoration:none; color:black; display: block;}
.menu a:hover{font-weight:bold;}
.separador {border-right: 1px solid #BBAADD; display: block}
</style>

</head>

<body class="body" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<table width="770" border="0" align="center" bgcolor="#2C5783" cellspacing="0" cellpadding="0">
<tr>
<td>
<table>
<tr>
<td class="menu separador"><a href="Pagina1.asp">Pagina1</a></td>
<td class="menu separador"><a href="Pagina1.asp">Pagina2</a></td>
<td class="menu separador"><a href="Pagina1.asp">Pagina3</a></td>
<td class="menu separador"><a href="Pagina1.asp">Pagina4</a></td>
<td class="menu separador"><a href="Pagina2.asp">Pagina5</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>

baccxus · #5 (**permalink**) 25/10/2005, 17:00

Disculpa Sancroce, no lo había probado con explorer, con mozilla si funcionó

voy a indagar acerca de este error y te posteo luego.

Saludos

Rafael · #6 (**permalink**) 25/10/2005, 20:30

Un par de cosas. No hay definido ningún estilo "menu separador"
El a no tiene definido un ancho width. Asígnenle uno y entonces el navegador sabrá cuanto pretendemos que mida el link en sí mismo, como objeto block, si no, pues lo que mida el texto.

baccxus · #7 (**permalink**) 25/10/2005, 20:57

Cita:

Iniciado por Rafael

No hay definido ningún estilo "menu separador"

De hecho hay dos clases definidas, una es menu, y la otra es separador, aunque, viendolo mejor sancroce, para pintar los bordes de las tablas se usa un pequeño truco: Se hacen los bordes superior e izquierdo de la tabla

Código:

table {border-top: 1px solid #BCCFDE; border-left: 1px solid #BCCFDE; ...

y los bordes inferior y derecha de las celdas

Código:

td {border-bottom: 1px solid #BCCFDE; border-right:1px solid #BCCFDE;...

Así nos evitamos el uso de una clase nueva (en este caso separador) y si necesitamos seguir agregando más filas o culumnas a nuestra tabla no haya que poner en cada celda nueva la clase "separador".

Por otro lado no doy con la respuesta a nuestro anterior problema, y lo que dice Rafael referente a que hay que darle a los link "a" un ancho, pues creo que no, dado a que "display:block" hace que el elemento tome el 100% del ancho del renglón que le corresponda, por eso firefox lo interpreta bien, falta ver si es por eso que IE no lo toma en una columna, poque en la otra si lo acepta.

Saludos

sancroce · #8 (**permalink**) 26/10/2005, 06:56

Desde ya muchas gracias a todos por participar en esta cuestion.

Estoy de acuerdo con baccxus en lo referente al with=100% porque lo he probado con y sin el y pasa siempre lo mismo.

Lo mas raro o loco de el codigo anterior es que funciona con la 1er celda pero no con las otras.

Estuve viendo otras cosas y me encontre algo como esto: Que opinan al respecto?

http://www.w3schools.com/css/tryit.a...=trycss_float5

Saludos

baccxus · #9 (**permalink**) 26/10/2005, 07:04

Esta es una forma de hacer lo que quieres, yo te había posteado lo de la tabla, porque usas tablas, pero si quieres entrar de lleno a CSS, mucho más que mejor, y estaríamos aquí para ayudarte.

Saludos

Rafael · #10 (**permalink**) 26/10/2005, 21:23

Cita:

Iniciado por baccxus

Por otro lado no doy con la respuesta a nuestro anterior problema, y lo que dice Rafael referente a que hay que darle a los link "a" un ancho, pues creo que no, dado a que "display:block" hace que el elemento tome el 100% del ancho del renglón que le corresponda,

En teoría, pero ponle width: 100% a .menu a:link, y funcionan todos los links del ejemplo.