Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Hyperlink for entire table cell rather then just the text - how is it done?

Reply
Thread Tools

Hyperlink for entire table cell rather then just the text - how is it done?

 
 
David Smithz
Guest
Posts: n/a
 
      12-10-2006
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.




 
Reply With Quote
 
 
 
 
Don And Sis
Guest
Posts: n/a
 
      12-10-2006
THis the whole table get hilited.

<table href=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>

Don


 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-10-2006
Please Don, no HTML formated messages in newsgroups. Plain text only.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Andrew Bailey
Guest
Posts: n/a
 
      12-10-2006

"David Smithz" <(E-Mail Removed)> wrote in message
news:q_Jeh.14235$(E-Mail Removed) .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


 
Reply With Quote
 
David Smithz
Guest
Posts: n/a
 
      12-10-2006
"Andrew Bailey" <(E-Mail Removed)> wrote in message
> 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


Hi Andy,
I tried this with excitiement but unfortunetly it did not work for me making
no difference. Is there perhaps something else I have to set?

I event tried setting the height as a style instead of an attribute (style="
height:100%") but with no luck.

In fact embedding the div like you said actually changes the behaviour of
the mouse cursor when moving over the text. Rather then displaying the
pointing finger for a URL (desirable) it instead shows a text editing cursor
(not desirable).

Thanks for any more input.



 
Reply With Quote
 
David Smithz
Guest
Posts: n/a
 
      12-10-2006

"Jonathan N. Little" <(E-Mail Removed)> wrote in message
news:e5df2$457b93f3$40cba796$(E-Mail Removed)...
> Please Don, no HTML formated messages in newsgroups. Plain text only.


Hi,
As far as I know it was plain text. I did give some HTML examples of what I
was doing. But apologies if this is not the done thing.



 
Reply With Quote
 
David Smithz
Guest
Posts: n/a
 
      12-10-2006

"David Smithz" <(E-Mail Removed)> wrote in message news:1ESeh.14308
> Hi Andy,
> I tried this with excitiement but unfortunetly it did not work for me
> making no difference. Is there perhaps something else I have to set?
>
> I event tried setting the height as a style instead of an attribute
> (style=" height:100%") but with no luck.
>
> In fact embedding the div like you said actually changes the behaviour of
> the mouse cursor when moving over the text. Rather then displaying the
> pointing finger for a URL (desirable) it instead shows a text editing
> cursor (not desirable).
>
> Thanks for any more input.


Further to my previous post I have found that things work better. If I move
the anchor to the outer div like so:

<a href="./index.htm">
<!-- Note anchor has been moved outside the div-->
<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%;
">URL TO FOLLOW. I WANT TO BE ABLE TO CLICK ANYWHERE
IN TABLE CELL,, NOT JUST THE ACTUAL TEXT </td>
</tr>
</table>
</div>
</a>

It works perfectly on Firefox. However, in IE the link does not work (one
clicks but it does not go through). I can fix this in IE if I remove the
style information from the table.

Therefore If I change:
<table style="width:100%; height:100%; border:0px; padding:0px;">
to :
<table>

it follows the link, but then I loose the ability to position the text in
the cell at the bottom right hand corner.

In fact as soon as I add :
<table height="100%">
(the height info as a attribute or as part of the style, IE stops the link
from working).

So is this a bug or something? Any ideas on what is going on here is really
appreciated.



 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      12-10-2006
> David Smithz <(E-Mail Removed)> wrote:
> news: q_Jeh.14235$(E-Mail Removed)
> 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:


[snip]

> 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).

No need for Javascript
> Thanks in advance.

To treat a link as a block element, just declare it with CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
a.blocka, a.blocka:link {
background-color: rgb(255, 255, 224);
color: rgb(0, 128, 0);
display: block;
margin: auto;
padding: 0.3em;
text-decoration: none;
width: 10em;
}
a.blocka:visited {
background-color: rgb(15, 0, 15);
color: rgb(240, 255, 240);
}
a.blocka:hover {
background-color: rgb(173, 216, 230);
color: rgb(255, 0, 0);
text-decoration: underline;
}
a.blocka:active,
a.blocka:focus {
background-color: rgb(255, 90, 0);
color: rgb(255, 215, 0);
}
</style>
</head>
<body>
<div>
<a class="blocka" href="./index2.php">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec nibh. Integer velit ligula,
faucibus eu, consequat non, molestie nec, orci. Vestibulum
varius, dui sit amet.</a>
</div>
</body>
</html>

--
BootNic Sunday, December 10, 2006 10:44 AM

"This seems like a case where we need to shoot the messenger."
*Charlie Kaufman on Cypherpunks list*

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-10-2006
David Smithz wrote:
> "Jonathan N. Little" <(E-Mail Removed)> wrote in message
> news:e5df2$457b93f3$40cba796$(E-Mail Removed)...
>> Please Don, no HTML formated messages in newsgroups. Plain text only.

>
> Hi,
> As far as I know it was plain text. I did give some HTML examples of what I
> was doing. But apologies if this is not the done thing.
>
>
>


--WebTV-Mail-14478-9001
Content-Description: signature
Content-Disposition: Inline
Content-Type: Text/HTML; Charset=US-ASCII
Content-Transfer-Encoding: 7Bit

Nope, it was HTML.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Steve Greenaway
Guest
Posts: n/a
 
      12-10-2006
Kermit the Frog stuck a mic in David's face, who said:

>I have a 1row * 1 column table containing a text which acts as a hyperlink.


I have to admit that I don't understand why you're using a single-celled
table. Seems like a lot of extra markup to simply define a box around
something.

--
- Steve
The bagpipes: the missing link between noise and sound.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Stretch a <TABLE> background image to fill the entire cell Water Cooler v2 HTML 3 07-12-2006 10:48 PM
Help. SessionID is x then y then x then y BodiKlamph@gmail.com ASP General 0 09-03-2005 03:02 PM
Formatting a single line without effecting the entire table with the Text::Table module Mothra Perl Misc 10 03-11-2005 03:56 PM
Newbie question about CSS - can you apply a style to an entire table or only to a <TD> cell Shiperton Henethe HTML 5 09-19-2003 01:58 AM



Advertisments