|
|
Posted by Andrew Bailey on 12/11/06 09:32
"Andrew Bailey" <andy@idontwantanyspam.com> wrote in message
news:o5Reh.7946$Qa6.1249@newsfe6-gui.ntli.net...
>
> "David Smithz" <dave1900@blueyonder.co.uk> wrote in message
> news:q_Jeh.14235$k74.11144@text.news.blueyonder.co.uk...
>> 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.
>>
>>
>>
>>
>
>
> Hi David,
>
> Just put a nested <div> inside your anchor like this....
>
> <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"><div height="100%"> URL TO FOLLOW. I WANT TO BE
> ABLE TO CLICK ANYWHERE
> IN TABLE CELL,, NOT JUST THE ACTUAL TEXT </div></a></td>
> </tr>
> </table>
>
> </div>
>
>
> Hope that helps
>
> Andy
>
Hi David,
I know this works as I created the following test page and made sure it
works...
<html>
<body>
<style>
..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)
</style>
<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"><div height="100%"> URL TO FOLLOW. I WANT TO BE ABLE
TO CLICK ANYWHERE
IN TABLE CELL,, NOT JUST THE ACTUAL TEXT </div></a></td>
</tr>
</table>
</div>
</body>
</html>
I suggest you take this and alter it one bit at a time until you figure out
which addition breaks it. Also, I use the same technique on my own website
www.microbuild.com for all of the left nav buttons.
Hope this helps
Andy
[Back to original message]
|