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

Discussion in 'HTML' started by David Smithz, Dec 10, 2006.

  1. David Smithz

    David Smithz Guest

    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.
     
    David Smithz, Dec 10, 2006
    #1
    1. Advertising

  2. David Smithz

    Don And Sis Guest

    Re: Hyperlink for entire table cell rather then just the text -how...

    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
     
    Don And Sis, Dec 10, 2006
    #2
    1. Advertising

  3. Re: Hyperlink for entire table cell rather then just the text - how...

    Please Don, no HTML formated messages in newsgroups. Plain text only.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 10, 2006
    #3
  4. "David Smithz" <> wrote in message
    news:q_Jeh.14235$...
    > 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
     
    Andrew Bailey, Dec 10, 2006
    #4
  5. David Smithz

    David Smithz Guest

    "Andrew Bailey" <> 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.
     
    David Smithz, Dec 10, 2006
    #5
  6. David Smithz

    David Smithz Guest

    Re: Hyperlink for entire table cell rather then just the text - how...

    "Jonathan N. Little" <> wrote in message
    news:e5df2$457b93f3$40cba796$...
    > 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.
     
    David Smithz, Dec 10, 2006
    #6
  7. David Smithz

    David Smithz Guest

    "David Smithz" <> 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.
     
    David Smithz, Dec 10, 2006
    #7
  8. David Smithz

    BootNic Guest

    > David Smithz <> wrote:
    > news: q_Jeh.14235$
    > 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*
     
    BootNic, Dec 10, 2006
    #8
  9. Re: Hyperlink for entire table cell rather then just the text - how...

    David Smithz wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:e5df2$457b93f3$40cba796$...
    >> 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
     
    Jonathan N. Little, Dec 10, 2006
    #9
  10. 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.
     
    Steve Greenaway, Dec 10, 2006
    #10
  11. David Smithz

    David Smithz Guest

    "BootNic" <> wrote in message
    > 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
     
    David Smithz, Dec 10, 2006
    #11
  12. Re: Hyperlink for entire table cell rather then just the text - howis it done?

    David Smithz wrote:

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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 10, 2006
    #12
  13. David Smithz

    Jim Moe Guest

    Re: Hyperlink for entire table cell rather then just the text - howis it done?

    David Smithz wrote:
    >
    > 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>


    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Dec 10, 2006
    #13
  14. David Smithz

    David Smithz Guest

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

    "Jonathan N. Little" <> wrote

    > 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.
     
    David Smithz, Dec 10, 2006
    #14
  15. David Smithz

    David Smithz Guest

    "Steve Greenaway" <> wrote in message
    >>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.


    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.
     
    David Smithz, Dec 10, 2006
    #15
  16. David Smithz

    David Smithz Guest

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

    "Jonathan N. Little" <> wrote in message
    news:86904$457c4287$40cba7a4$...
    >
    > 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.
     
    David Smithz, Dec 11, 2006
    #16
  17. Re: Hyperlink for entire table cell rather then just the text - howis it done?

    David Smithz wrote:
    > "Steve Greenaway" <> wrote in message
    >>> 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.

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


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 11, 2006
    #17
  18. David Smithz

    BootNic Guest

    > Jim Moe <> wrote:
    > news:
    > David Smithz wrote:
    >>
    >> 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]

    --
    BootNic Sunday, December 10, 2006 10:57 PM

    My problem lies in reconciling my gross habits with my net income.
    *Errol Flynn*
     
    BootNic, Dec 11, 2006
    #18
  19. "Andrew Bailey" <> wrote in message
    news:eek:5Reh.7946$...
    >
    > "David Smithz" <> wrote in message
    > news:q_Jeh.14235$...
    >> 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
     
    Andrew Bailey, Dec 11, 2006
    #19
  20. David Smithz

    David Smithz Guest

    "Andrew Bailey" <> wrote in message
    news:DA9fh.7522$...
    >
    > 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.
     
    David Smithz, Dec 11, 2006
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Shiperton Henethe
    Replies:
    5
    Views:
    1,138
    Adrienne
    Sep 19, 2003
  2. Water Cooler v2
    Replies:
    3
    Views:
    36,995
    Water Cooler v2
    Jul 12, 2006
  3. Mufasa
    Replies:
    7
    Views:
    547
    Homer J. Simpson
    Aug 14, 2007
  4. Replies:
    0
    Views:
    313
  5. Mothra
    Replies:
    10
    Views:
    483
    Anno Siegel
    Mar 11, 2005
Loading...

Share This Page