Hyperlink a table cell?

[Guest]

On my web site, I've simulated navigation buttons by making a table of single
rows. I've colored the background, added the text and hyperlinked the text.
My "less than computer savy" manager never clicks the words on the button,
but instead clicks on a "blank space" in the cell and wants it to take him to
the desired location. To get around this, I've added spaces before and after
the "text" and hyperlinked this. Works great. However, I've noticed on
certain laptops, my button don't look good. Because of their video
card/driver - the text wraps (because of the extra spaces). This made me
wonder, is there a way to just simply select a cell and hyperlink it? That
way the user could click anywhere in the button and it would work. Then I
could remove the extra spaces to compensate.

 

[Mark Fitzpatrick]

Unfortunately no. You can't have a table cell selected for a link. You could
possibly do this with javascript by setting an onclick event to open a
hyperlink, but this isn't that great a solution because it only works for
some browsers. This is also one of those cases where you'll end up adding
tons of effort for yourself to accomodate the lowest common denominator.

Something you could do with your buttons is to place a transparent gif image
in there to force the cells to be a certain width. For example, you have a
table that is ten rows high by one column wide for your navigation. In the
bottom cell of the table you place a transparent gif image that's 1 pixel
high by whatever you want wide, say 150 pixels wide. This will help force
the table cells to maintain a certain width.

Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage

 

[=?Windows-1252?Q?Rob_Giordano_\=28aka:_Crash_Gordo]

Why not make your own button graphic images?


| On my web site, I've simulated navigation buttons by making a table of single
| rows. I've colored the background, added the text and hyperlinked the text.
| My "less than computer savy" manager never clicks the words on the button,
| but instead clicks on a "blank space" in the cell and wants it to take him to
| the desired location. To get around this, I've added spaces before and after
| the "text" and hyperlinked this. Works great. However, I've noticed on
| certain laptops, my button don't look good. Because of their video
| card/driver - the text wraps (because of the extra spaces). This made me
| wonder, is there a way to just simply select a cell and hyperlink it? That
| way the user could click anywhere in the button and it would work. Then I
| could remove the extra spaces to compensate.

 

[Jon Spivey]

Hi,

You can make the whole cell clickable like this
<style type="text/css">
#Nav a{
position:relative;
display:block;
background-color:red;
text-decoration-none;
color:white;
}
#Nav a:hover{
background-color:blue;
}
</style>
<table id="Nav">
<tr>
<td width=120><a href="page.htm">Page 1</a></td>
<td width=120><a href="page2.htm">Page 2</a></td>
etc.....

Mess about with colors/fonts/padding etc to get the effect you want.

 

[Ronx]

Try this.
<td><a href="page.htm" style="display:block">link text</a></td>

Note:
May have adverse effects on Netscape 4.

 

[Andrew Murray]

it would be easier to make images for the links, rather than messing around with
linking to table cells, but I don't think it can be done and I remember a similar
question no long ago, but forget the answers that were given in that case.

To make "space" around the link simply set the cell spacing/padding to a few
pixels wide, and center the text inside the cell, and drag the height to whatever
you want.

The word wrapping issue has nothing to do with the video driver; it is the width
of the table cell vs the length of the text within the cell.