crear enlace en una celda > cómo?

nachopro · #1 (**permalink**) 03/07/2005, 23:07

buenas y santas.

deseo que una celda, con un texto incluido, actúe como botón o enlace

mi códico actualmente es así:

Código HTML:

<td class="none" onMouseOver="this.className='resaltar'" onMouseOut="this.className='none'"><a href="a-salir.html">Salir</a></td>

como puedo hacer para que el <a href... afecte a toda la celda dando sensación de botón??

bueno, muchas gracias =)

CORE · #2 (**permalink**) 03/07/2005, 23:42

Hola

<td class="none" onMouseOver="this.className='resaltar'" onMouseOut="this.className='none'"><a href="a-salir.html" style="width:100%;height:100%;display:block;">Sali r</a></td>

creo qeu si puede funcionar

saludos

baccxus · #3 (**permalink**) 04/07/2005, 11:40

Sin necesidad de "onmouse", sólo que en la clase colocar display:block: ejemplo

Código HTML:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.link, .link a:link, .link a:active, .link a:visited {
text-decoration:none;
background-color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#000099;
display:block
}
.link a:hover{
background-color:#333;
text-decoration:underline;
color:#FFFFFF;
display:block;
}
</style>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td class="link"><a href="tu-link.html">Todo el texto que se te venga en gana</a></td>
  </tr>
</table>
</body>
</html>

Saludos

nachopro · #4 (**permalink**) 04/07/2005, 11:45

gracias.. a ambos =)
aunque la segunda opción es más "económica" =)

gracias

nachopro · #5 (**permalink**) 04/07/2005, 13:53

Don baccxus
tengo una complicación:
mi código es así >

Código HTML:

.boton a:link, .boton a:active, .boton a:visited {
	display:block;
	text-decoration: none;
	font-size: x-small;
}
.boton a:hover {
	background-color: #CCCCCC;
	border: 1px solid #000000;
	text-decoration: none;
	font-size: x-small;
}

los <td> que uso tienen una altura de 18px para evitar que, al utilizar .boton a:hover se deforme la tabla

ahora, bien.. intené darle la misma altura de 18px a .boton a:link, .boton a:active, .boton a:visited y no hay manera.. el background color excede dicho tamaño y deforma la tabla

se le ocurre alguna solución??

gracias

baccxus · #6 (**permalink**) 04/07/2005, 14:05

claro:

.boton a:link, .boton a:active, .boton a:visited {
display:block;
text-decoration: none;
font-size: x-small;
max-height:18px;
height:18px;
}

Saludos

PD: creo que también deberás hacerlo en el a:hover, de todas maneras nos avisas, OK?

nachopro · #7 (**permalink**) 04/07/2005, 14:20

disculpá que te joda taaanto.. pero ya casi lo tengo.. veamos:

Código HTML:

.boton a:link, .boton a:active, .boton a:visited {
	display: block;
	max-height: 18px;
	height: 18px;
	text-decoration: none;
	font-size: x-small;
}
.boton a:hover {
	background-color: #CCCCCC;
	max-height: 16px;
	height: 16px;
	border: 1px solid #000000;
	text-decoration: none;
	font-size: x-small;
}

ahora bien, la tabla no se deforma al estar hover

pero sí se corre el texto.. su altura varía

mi intención sería la siguiente:

Código:

. 
. TEXTO
. 

//////////

.+-----+
.|TEXTO|
.+-----+

es decir, que todo quede tal cual lo original. sólo que con el resaltado y borde

baccxus · #8 (**permalink**) 04/07/2005, 14:43

cómo es eso correr el texto?

baccxus · #9 (**permalink**) 04/07/2005, 16:28

Ahhh... es que no pusiste:
.botón, .boton a:link, .boton a:active, .boton a:visited {...
Entonces lo que no tenga link hace que todo se desproporcione,

Prueba y me avisas

nachopro · #10 (**permalink**) 04/07/2005, 16:54

hola, no.. no es ese el problema > acá te dejo el link
es como que se resalta no la celda, sino el texto.. no queda centrado verticalmente en el block de color
http://npserver.no-ip.org/problema.gif << acá está el ejemplo

gracias =)

nachopro · #11 (**permalink**) 04/07/2005, 17:24

me doy por vencido.. es el maldito borde el que deforma el texto...

baccxus · #12 (**permalink**) 04/07/2005, 20:06

Puedes hacerlo así:

en vez de poner la clase en la celda

Código HTML:

<td class="boton">

le haces la clase a cada link, o sea

Código HTML:

<td><a href="link1.html" class="boton">link1</a>
<a href="link2.html" class="boton">link2</a>
<a href="link3.html" class="boton">link3</a></td>

y eso es todo, tengo un ejemplo de lo que te digo en una de las páginas que diseñé: www.photura.com, el menú está hecho con clases así.

Saludos

PD: También puedes comenzar a cambiar tus tablas por CSS al 100%

nachopro · #13 (**permalink**) 04/07/2005, 21:00

muchísimas gracias.. its a live (?)

jeje

ahora, la cereza del postre.. sabés cómo centrar el texto verticalmente en el block ???

saluuuuuuuuuuuuuddddddddddddddddd