Comunidad de diseño web y desarrollo en internet online

Ayuda: Links que ocupen toda la celda en una tabla

Citar            
MensajeEscrito el 03 Sep 2007 03:13 pm
Hola, estoy haciendo una tabla para poner la programación de una radio, cada programa tiene su página donde figura la información de dicho programa. El tema es que, como cada programa tiene diferente cantidad de tiempo de emisión, las celdas de la tabla, en su mayoria, tienen diferente tamaño. Lo que no logro hacer es que los enlaces de cada programa ocupen la totalidad de sus celdas correspondientes.
Lo puedo hacer si le aplico un padding (en pixels) diferente a cada tag <a>, pero me seria mas cómodo algo que me sirva para todos por igual.
Espero que se haya entendido.

Dejo el código que tengo

Código :

<table width="100%" align="center" cellspacing="1" border="0" id="programacion">
   <tr>
      <th></th>
      <th>Lunes</th>
      <th>Martes</th>
      <th>Mi&eacute;rcoles</th>
      <th>Jueves</th>
      <th>Viernes</th>
      <th>S&aacute;bado</th>
      <th>Domingo</th>
   </tr>
   <tr>
      <td>10</td>
      <td rowspan="3" colspan="5" title="La Primera de EVP">
         <a href="programas/la_primera_de_evp.html" style="padding:20px 111px;">La Primera de EVP</a>
      </td>
      <td rowspan="14"></td>
      <td rowspan="14"></td>
   </tr>
   <tr>
      <td>11</td>
   </tr>
   <tr>
      <td>12</td>
   </tr>
   <tr>
      <td>13</td>
      <td rowspan="2" title="Vivos">
         <a href="programas/vivos.html">Vivos</a>
      </td>
      <td title="M&uacute;sica">
         <a href="programas/musica.html">M&uacute;sica</a>
      </td>
      <td rowspan="2" title="M&uacute;sica">
         <a href="programas/musica.html">M&uacute;sica</a>
      </td>
      <td rowspan="2" title="Vivos">
         <a href="programas/vivos.html">Vivos</a>
      </td>
      <td title="M&uacute;sica">
         <a href="programas/musica.html">M&uacute;sica</a>
      </td>
   </tr>
   <tr>
      <td>14</td>
      <td title="Covers">
         <a href="programas/covers.html">Covers</a>
      </td>
      <td title="Covers">
         <a href="programas/covers.html">Covers</a>
      </td>
   </tr>
   <tr>
      <td>15</td>
      <td rowspan="3" colspan="5" title="La Segunda de EVP">
         <a href="programas/la_segunda_de_evp.html" style="padding:20px 108px;">La Segunda de EVP</a>
      </td>
   </tr>
   <tr>
      <td>16</td>
   </tr>
   <tr>
      <td>17</td>
   </tr>
   <tr>
      <td>18</td>
      <td rowspan="6" title="M&uacute;sica">
         <a href"programas/musica.html">M&uacute;sica</a>
      </td>
      <td rowspan="2" title="Bandas Under">
         <a href="programas/bandas_under.html">Bandas Under</a>
      </td>
      <td rowspan="6" colspan="2" title="M&uacute;sica">
         <a href="programas/musica.html">M&uacute;sica</a>
      </td>
      <td rowspan="2" title="La Previa del F&uacute;tbol">
         <a href="programas/la_previa_del_futbol.html">La Previa del F&uacute;tbol</a>
      </td>
   </tr>
   <tr>
      <td>19</td>
   </tr>
   <tr>
      <td>20</td>
      <td rowspan="4" title="M&uacute;sica">
         <a href="programas/musica.html">M&uacute;sica</a>
      </td>
      <td rowspan="4" title="M&uacute;sica">
         <a href="programas/musica.html">M&uacute;sica</a>
      </td>
   </tr>
   <tr>
      <td>21</td>
   </tr>
   <tr>
      <td>22</td>
   </tr>
   <tr>
      <td>23</td>
   </tr>
</table>


Código :

#programacion{
   background:#000000;
   color:#384046;
   font-size:11px;
   text-align:center;
}
#programacion th{
   background:#999999;
}
#programacion td{
   background:#C9C9C9;
   padding:2px;
}
#programacion a{
   outline:red solid thin;
   color:#384046;
}
#programacion a:hover{
   color:#384046;
   text-decoration:none;
}


Es re novata la pregunta, lo se.. no merezco vivir en este mundo :crap:

Por PabloHdS

251 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Sep 2007 07:43 pm

Código :

#programacion a{
   outline:red solid thin;
   color:#384046;
   display:block;
   width:100%;
   height:100%;
}


Prueba con eso

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

firefox
Citar            
MensajeEscrito el 03 Sep 2007 07:52 pm
mmmmmmmm. nop, width y height al 100% no cambian el espacio que ocupa un link, con display:block; hago que ocupen el ancho de la celda, pero no se como hacer para que ocupe el alto de la celda.
Gracias Von Frick

Por PabloHdS

251 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Sep 2007 09:52 pm
Antes lo he intentado, pero no me salía con el height. Con CSS no se me ocurre nada. Prueba con javascript.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 04 Sep 2007 11:12 pm
dale altura en pixeles al td con CSS (no porcentajes)

Por gonarin

32 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.