|
|
Posted by David Smithz on 12/10/06 02:08
Hi there,
I have a 1row * 1 column table containing a text which acts as a hyperlink.
My aim is to have the text positioned in the cell but the visitor to be able
to click anywhere within the cell to be able follow the hyperlink. (Not just
the actual text itself and without relying on JavaScript).
I'm using the following code:
<div id="ExBox1" class="ExBox">
<table style="width:100%; height:100%; border:0px; padding:0px;">
<tr>
<td style="text-align:right; vertical-align:bottom; height:100%;
"><a href="./index.htm"> URL TO FOLLOW. I WANT TO BE ABLE TO CLICK ANYWHERE
IN TABLE CELL,, NOT JUST THE ACTUAL TEXT </a></td>
</tr>
</table>
</div>
With the class for ExBox defined as:
..ExBox {
position:absolute;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666666;
background-position: center center;
font-weight: bold;
letter-spacing: 0.04em;
width:150px; height:70px;
z-index:1;
left: 100px; top: 100px;
text-align: right;
}
..ExBox a:link { color:#FFFFFF; text-decoration:none;
vertical-align:text-bottom;}
..ExBox a:active { color:#FFFFFF; text-decoration:none;
vertical-align:text-bottom;}
..ExBox a:visited { color:#FFFFFF; text-decoration:none;
vertical-align:text-bottom;}
..ExBox a:hover { color:#FFFFFF; text-decoration:none;
vertical-align:text-bottom;}
(Note: I added the vertical-align:text-bottom part when I was experimenting
and probably now not necessary)
I have tried a few things (e.g. such as putting the anchor (<A>) around the
table rather then the text in the table but it does not work properly when I
do this.
Any suggestions on how to achieve this?
(I will also be adding the effect (via JavaScript) that when the mouse is
moved into the cell the entire background colour changes - I can achieve
this but no point having it if you cannot actually follow the URL until
moving over the text).
Thanks in advance.
Navigation:
[Reply to this message]
|