Iluminar celda al pasar el raton

DJJJ · #1 (**permalink**) 19/10/2007, 20:28

Hola, como estan

hice este codigo

Código PHP:

  <html>

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>aaa</title>

</head>

 
<style>

 
td a { background-color : #000FF;width:100%;height:100%;};

td a:hover { background-color : #FF00FF;width:100%;height:100%;};

 
</style>

<body>

 
<table width = "50%">

<tr><td height ="80" bgcolor="#C0C0C0">

<a href ="#">enlace 1</a>

</td></tr>

<tr><td bgcolor="#C0C0C0">

<a href ="#">aaa</a>

</td></tr>

<tr><td bgcolor="#C0C0C0">

<a href ="#">aaa</a>

</td></tr>

 
</table>

</body>

 
</html>

pero no logro poder alinear verticalmente el "enlace 1"para que aparezca centrado. y que se ilumine toda la celda

porque si le sacamos el height:100% queda centrado pero no se ilumina toda la celda

alguna ayuda please.

gracias

Ansgar · #2 (**permalink**) 19/10/2007, 20:58

si usas dreamweaber modifica el estilo en la parte q dice bloque y seleccion en el ultimo campo la opcion "bloque".

algo asi! .. ais se rellenara la celda y no solo el fondo de texo q tienes incrustado ahi..

avisame si te funciono.

suerte ..

DJJJ · #3 (**permalink**) 20/10/2007, 06:18

otra forma, no uso el dreamweaber

Daniel Ulczyk · #4 (**permalink**) 20/10/2007, 08:45

Podés utilizar line-height:

Código HTML:

tr {
    line-height: 80px;
}

Aunque para un tr en particular debieras definar una class, por ejemplo.

De otra manera, ya que existen varias técnicas al respecto; podés consultar el siguiente enlace:

Vertical centering using CSS

DJJJ · #5 (**permalink**) 20/10/2007, 09:20

muchas gracias funciona espectacular.

ahora porque no funciona ar vertical-align:middle

que hay que recurrir a line-height: 80px;

saludos

aprendiz_82 · #6 (**permalink**) 26/02/2008, 13:59

gracias por este ejemplo, es muy util...!!!

rasmarko · #7 (**permalink**) 27/02/2008, 01:29

Podría funciona con esto:

Código:

td { vertical-align: middle; }
td a {
padding: 10px 20px 10px 20px;
display: block;
}
td a:hover { background: #FF00FF; }

Que tengas mucha suerte! ^^