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

D

David Smithz

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

Don And Sis

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
 
A

Andrew Bailey

David Smithz said:
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
 
D

David Smithz

Andrew Bailey said:
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.
 
D

David Smithz

Jonathan N. Little said:
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.
 
D

David Smithz

David Smithz said:
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.
 
B

BootNic

David Smithz said:
[email protected]
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>
 
J

Jonathan N. Little

David said:
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.
 
S

Steve Greenaway

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

David Smithz

BootNic said:
To treat a link as a block element, just declare it with CSS.
[snip]

Thanks for the code listing which I tried out. Unfortunately it still does
not actually achieve what I'm after.

I took your code and run it and it was what I wanted except for the fact
that the text in the boxes was not bottom right aligned as I wanted.
Previous research has showed me that the only way I can achieve this is by
using a table as the vertical-align style property does not have an effect.

I took your code and amended it by adding the table so that I could position
the text and I get exactly the same problem that I was originally reporting.
Maybe I am approaching the problem of vertically positioning the text in the
wrong way but I do not know of another one.

try the code below to see what I mean:

<!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;
text-align:right;
height:20em;
vertical-align:text-bottom;
}
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"><table height="100%" > <tr><td
valign="bottom" align="right">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.> </td></tr></table></a>
</div>
</body>
</html>

Thanks
 
J

Jonathan N. Little

David said:
<a class="blocka" href="./index2.php"><table height="100%" > <tr><td
^ ^^^^^

"A" is an inline element, it cannot contain a block element such as a
"TABLE"!

http://www.w3.org/TR/html4/struct/links.html#edef-A

You can use CSS to style your A element as a block and specify some
dimensions to probably accomplish what you wish. How about a URL to an
example of what you really trying to accomplish then these little code
snippets.

Also if your hoping for presentational consistency, transitional doctype
is *not* helping you.
 
J

Jim Moe

David said:
I have a 1row * 1 column table containing a text which acts as a hyperlink.
Why are you using a table at all?
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).
In the example below you can click anywhere in the <p>, position the
<div> wherever you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Big URL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.bigurl { border: 1px solid #789; width:70%; height: 5em;
position: absolute; top: 1em; left: 2em; }
.bigurl p { border: 1px solid #000; text-align:center; }
.bigurl a { display:block; }
</style>
</head>

<body>
<div class="bigurl">
<p>
<a href="./index.htm"> URL to follow. I can click anywhere
<br>in this link, not just the actual text.</a>
</p>
</div>
</body>
</html>
 
D

David Smithz

Jonathan N. Little said:
You can use CSS to style your A element as a block and specify some
dimensions to probably accomplish what you wish.

See my posting that will follow this in aswer to this.
How about a URL to an example of what you really trying to accomplish then
these little code snippets.
I'll try and get something up on a public server.
Also if your hoping for presentational consistency, transitional doctype
is *not* helping you.
I looked up "transitional doctype" on google as this was the first I heard
about it. I had always ignored the line that dreamweaver inserted but see
that is what it is to do with.
So it seems I am better instead to use the strict version like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

going by: http://www.w3schools.com/tags/tag_doctype.asp

Thanks and see my posting that follows.
 
D

David Smithz

Steve Greenaway said:
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.

Hi guys and thanks for all the input. I do confess there is probably some of
the CSS theory missing from my knowledge which I am trying to address.

The reason for the table is the ability to be able to vertically position
the text within a <div>. Previously I had looked up ways of doing this
because using the style property vertical-align:bottom did not seem to
have any effect.

I was reading about this only applying to inline elements (I'm still new to
CSS really) and the guides I found online (not sure where) said you can use
a table to get the positioning by using the valign:bottom attribute on the
<td> element.

This made sense to me so I went with it.

If anyone can show me away to take rectangle section of the screen that I
format looks wise as I choose.
Make the entire rectangle selectable as a hyperlink and have the text in the
rectangle positioned so that it is on the right hand side and to the bottom
then I would be very happy.

So imagine a section like the below (hopefully displayed OK)
-------------------------------
| |
| |
| |
| |
| My text here |
-------------------------------

When I move my cursor into the above, it should change to the pointing
finger and anywhere I select in the region will take me through to my
desired URL.

Also when I move the mouse over the section the background colour of the
area needs to change (I don't mind doing this using JavaScript).

If I do not have the text positioned at the bottom right, I can get this to
work easily, however, getting the text positioned bottom right seems to be
very hard when making all of my other requirements still true.

If anyone has an example of the above working I would be very grateful.

Thanks.
 
D

David Smithz

Jonathan N. Little said:
Also if your hoping for presentational consistency, transitional doctype
is *not* helping you.

Boo hoo.

I just spent two hours+ solid trying to work out why suddenly my code looked
different in Firefox to IE. I could not just figure it out. An old copy of
my HTML I had still worked however even when using the same style sheet.
Unfortunately I choose to work backwards through the file comparing an old
copy that works against a new copy that didn't (After trying playing around
with padding settings and much more)

Banging my head against a wall I finally discovered the reason was because I
had changed the top line transitional doctype. I forgot I had changed that
(without really understanding it) after reading the post above.

Morale of the story:

Try as hard as you can to understand what you are changing before
implementing it! I have to revert back to transitional because then
everything looks the same on IE or firefox.
 
J

Jonathan N. Little

David said:
Hi guys and thanks for all the input. I do confess there is probably some of
the CSS theory missing from my knowledge which I am trying to address.

The reason for the table is the ability to be able to vertically position
the text within a <div>. Previously I had looked up ways of doing this
because using the style property vertical-align:bottom did not seem to
have any effect.

I was reading about this only applying to inline elements (I'm still new to
CSS really) and the guides I found online (not sure where) said you can use
a table to get the positioning by using the valign:bottom attribute on the
<td> element.

This made sense to me so I went with it.

If anyone can show me away to take rectangle section of the screen that I
format looks wise as I choose.
Make the entire rectangle selectable as a hyperlink and have the text in the
rectangle positioned so that it is on the right hand side and to the bottom
then I would be very happy.

So imagine a section like the below (hopefully displayed OK)
-------------------------------
| |
| |
| |
| |
| My text here |
-------------------------------

When I move my cursor into the above, it should change to the pointing
finger and anywhere I select in the region will take me through to my
desired URL.

Also when I move the mouse over the section the background colour of the
area needs to change (I don't mind doing this using JavaScript).

If I do not have the text positioned at the bottom right, I can get this to
work easily, however, getting the text positioned bottom right seems to be
very hard when making all of my other requirements still true.

If anyone has an example of the above working I would be very grateful.

strict doctype, work even in IE and no JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Boxed Link</title>

<style type="text/css">
A.boxed{ display: block; width: 15em; padding: 5em 0 0 0;
background-color: #eee; text-align: right; }
A:hover.boxed{ background-color: #ff0; }
</style>
</head>

<body>
<div>Here is one way <a href="#" class="boxed">Lower Right</a></div>
</body>
</html>
 
B

BootNic

Jim Moe said:
news: (e-mail address removed)
David said:
I have a 1row * 1 column table containing a text which acts as a
hyperlink.
Why are you using a table at all?
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).
In the example below you can click anywhere in the <p>, position the [snip]
.bigurl a { display:block; }
IE wants a background color for this to work as intended.
[snip]
 
A

Andrew Bailey

Andrew Bailey said:
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
 
D

David Smithz

Andrew Bailey said:
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

Thanks again Andy. However, I took the code, pasted into a website and
displayed it. On first glance it appears to work, but that is because the
text fills the entire square. The moment I reduced the amount of text so
that it was only one word, I still had to click on the actual word to make
the hyperlink work (at least in IE 6 anyway).

Actually though. I posting made be Jonathan below does seem to of solved my
problem by taking a different (And I'm sure proper) approach.

See my next posting and cheers for the input.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top