Foros del Web » Creando para Internet » CSS »

Link 100% Ancho de Celda

Estas en el tema de Link 100% Ancho de Celda en el foro de CSS en Foros del Web. NO LOGRO QUE LA CELDA DE MI TABLA (de menu) SEA EL VINCULO Y NO SOLO EL TEXO (href).... AYUDA !!!!!!!! Tengo el siguiente <STYLE> ...
  #1 (permalink)  
Antiguo 25/10/2005, 15:39
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Pregunta Link 100% Ancho de Celda

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
  #2 (permalink)  
Antiguo 25/10/2005, 15:54
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola sancroce,

Talvés este link te sirva de algo.

http://www.forosdelweb.com/f53/que-celda-completa-sea-link-343806/
__________________
_______
Jorge Rojas.
  #3 (permalink)  
Antiguo 25/10/2005, 16:04
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
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> 
__________________
Al final del día hablar es gratis, codificar no lo es
  #4 (permalink)  
Antiguo 25/10/2005, 17:24
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
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>
  #5 (permalink)  
Antiguo 25/10/2005, 18:00
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
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
__________________
Al final del día hablar es gratis, codificar no lo es
  #6 (permalink)  
Antiguo 25/10/2005, 21:30
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
  #7 (permalink)  
Antiguo 25/10/2005, 21:57
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 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
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 26/10/2005, 07:56
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
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
  #9 (permalink)  
Antiguo 26/10/2005, 08:04
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
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
__________________
Al final del día hablar es gratis, codificar no lo es
  #10 (permalink)  
Antiguo 26/10/2005, 22:23
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
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 00:09.