Atributo href en un área

Pinx0 · #1 (**permalink**) 13/07/2009, 15:22

Hola buenas, quería preguntaros a que etiquetas es posible ponerle el atributo href aparte de a y img.

Lo que quiero hacer es otorgar a un área (en mi caso un td de anchura x y altura que contiene un texto de anchura y altura considerablemente menor que x e y) de esta propiedad.

Ya se que con onclick y js puedo hacerlo, pero me interesa para la version sin javascript.

He probado a ponerlo en un div y en el propio td, tambien a poner un div dentro de un a, pero no consigo un método que sea compatible tanto en IE6+, Firefox 3+, Opera 9+, Chrome y Safari, que conforman el 99,95% de los navegadores de mi web.

hades87 · #2 (**permalink**) 14/07/2009, 03:43

al elemento a, ponle un style="display:block" y el enlace te cogerá toda la celda

kseso? · #3 (**permalink**) 14/07/2009, 06:27

"href" sólo lo puedes utilizar con un enlace. Claro que el enlace puede ser un texto o una imagen o ambos a la vez.
Si quieres que cualquier caja que contenga un enlace (una celda, por ejemplo) se comporte en toda su superficie como el mismo enlace y sea compatible con ie6, debes hacer que el enlace ocupe toda la superficie de su caja. Esto es así porque ie6 sólo reconoce las pseudoclases (:visited, :hover, :active) para los a.

Un saludo

Pinx0 · #4 (**permalink**) 15/07/2009, 07:18

Bien he hecho lo que me habeis dicho, el a abarca todo el td, con lo de display:block y con altura y anchura definidas. ¿Problema? El texto en su interior toma forzadamente una posicion vertical top, por mucho que le ponga vertical-align:middle tanto al td como al a, e incluso metiendo un div dentro del a.

Código css:

Ver original.link_menu {  display:block; width:174px; height:31px; vertical-align:middle;}
.menu_index_text_div {  width:174px; height:31px; vertical-align:middle;}
.menu_index_text { color:#FFF; font-size:13px; width:174px; vertical-align:middle;}

Código php:

Ver original<td class="menu_index_text"><a href="<?=$men['link']?>" class="link_menu"><div class="menu_index_text_div"><?=$men[$lang]?></div></a></td>

hades87 · #5 (**permalink**) 15/07/2009, 10:22

prueba al link a ponerle padding por arriba y por abajo

Pinx0 · #6 (**permalink**) 15/07/2009, 10:50

Nada, tampoco va. Mirad así me funciona, pero es un poco chapuzillas no? ¿No habrá otra solucion menos extraña xD?

Código html:

Ver original<td class="menu_index_text">
 <a href="loquesea" class="link_menu">
  <div class="menu_index_text_div">
   <table><tr><td height="7"></td></tr></table>
   blablabla
  </div>
 </a>
</td>

Código css:

Ver original.menu_index_text { color:#FFF; font-size:13px; width:174px; vertical-align:middle;}
.link_menu { width:174px; height:31px; vertical-align:middle;}
.menu_index_text_div { width:174px; height:31px; vertical-align:middle;}

kseso? · #7 (**permalink**) 15/07/2009, 11:41

¿Y así?:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
{margin:0;padding:0; outline:none; border:0; position: relative;}
td {border: 1px solid #000;}
a {text-decoration:none; display: block; padding:10px; background: #cdcdcd; color: #444;}
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="#">Hola mundo. Soy un enlace grande</a>
</td>
</tr>
</table>
</body>
</html>