Skip navigation
Currently Being Moderated

How to link a table cell?

Nov 24, 2009 1:36 PM

Hi,

What would be the best way to link this table cell? I want the entire cell to be linked rather than just the text inside it.

 

<table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video">
                      <tr>
<td width="167" align="left" valign="top"><p class="navheader-lg">Video Clip</p>
                            <p class="navheader-sm">Watch a short<br />
                              testimonial video</p></td>
                      </tr>

 

Thanks so much

Laura

 
Replies
  • Currently Being Moderated
    Nov 24, 2009 3:02 PM   in reply to Lvanhoff

    This will not work.  Often you can accomplish something close by using display:block on the <a> tag inside the td, which expands the effect to make it look like it is the entire td that is linked.  Here is a tutorial on this:

     

    http://www.dreamweaverresources.com/tutorials/clickable_cell.htm

     

    BTW, your current code, which you should remove, is on the table tag rather than the td, and is using the onfocus event rather than the onclick.  But no matter, simply remove it.

     

    --

     
    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 3:42 PM   in reply to Lvanhoff

    You can't link an empty table cell to anything.  But you can add hyperlinked text to your cells and set CSS properties to display:block and  width: 100%.  See screenshot.

    DisplayBlockTD.gif

     

    Here's the code.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    table {
    width: 500px;
    margin:0 auto;
    text-align: center;
    }
    
    /**TABLE LINKS**/
    
    td a {
    display:block;
    width: 100%;
    background: #666;
    padding: 10px 0 10px 0;
    text-decoration: none;
    }
    td a:link {color:#FF0000}      
    td a:visited {color:#FFFFFF} 
    td a:hover {color:#FFFFFF; background:#FF0000}  
    td a:active {color:#FFFF00} 
    </style>
    
    </head>
    
    <body>
    <table cellpadding="0" cellspacing="0">
    <tr>
    <td><a href="#">Link Text Here</a></td>
    <td><a href="#">More Link Text</a></td>
    </tr>
    <tr>
    <td><a href="#">Link Text Here</a></td>
    <td><a href="#">More Link Text</a></td>
    </tr>
    </table>
    </body>
    </html>
    
    
    

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 4:09 PM   in reply to Lvanhoff

    It's not an empty cell, it has text and a background image, as well as a style already applied to the table.

     

    That is not evident from the code snippets you posted. 

     

    Can you advise given the code I've posted?

     

    No.  We would need to see the live page with complete HTML and CSS code.

     

    Or,  just copy & paste the code I gave you into a new, blank HTML document and play with it.  You might be surprised at what you can learn from code.

     

     

    Best of luck with your project,

     

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 5:04 PM   in reply to Lvanhoff

    Here's the td:

     

    <td class="vidA" width="167" align="left" valign="top"><a href="http://www.12results.com/video1.html" onclick="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400');retur n false">
          <span class="navheader-lg">Video Clip</span><br />
          <span class="navheader-sm">Watch a short testimonial video</span></a>
    </td>

     

    paste it in your table to replace the current td.

     

    And here's the css to paste this into your css:

     

    .vidA a {
        text-decoration: none;
        display:block;
        background-color:#B1D6D5;
        padding:14px;
        background-image: url(../images/videoclip-imageandcolor.gif) no-repeat scroll right bottom;
    }
    .vidA a:link, .vidA a:visited, .vidA a:hover{
        color:black;
    }
    .vidA a:hover{
        background-color:#C4F894;
       
    }
    .vidA p {
        margin:14px;
    }

     

    There are two other things (at least) to do:

     

    1) must remove the background styling from the  backgroundbox-video class

     

    2) edit the image /images/videoclip-imageandcolor.gif to be a transparent gif with current blue bg color changed to transparent.

     

    Hope that helps.

     

    -- 

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 5:13 PM   in reply to Lvanhoff

    It is perfect that you've put the graphic on the exact bg color you'll be resting the

    image upon once it is transparent.  That's exactly the right way to make a transparent image that will hide the jaggies!  In Fireworks, use the dropper in the transparent tool to select that blue bg and make it transparent. Using "index color" setting should work

     

    -- 


    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 5:23 PM   in reply to Lvanhoff

    I've put up my test page for you to see it in action (without the background image)

     

    http://divahtml.com/test/lvanhoff.html

     

    -- 


    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 6:17 PM   in reply to Lvanhoff

    Your online page does not have the new html, so can not tell what might be going on just yet.

     

    But I also realize now that if yiou do wish to have the bg color chage on hover as I have it now, you will have to use the a:hover selector to style its  background image to a new version of the same image but with its transparency created with the hover bg color as index for the transparency.  Else you'll get the jaggies on mouseover.

     

    If you upload the new page, and the current bg image that you say you are having trouble with, we can take a look.  I might be a while getting back to you as it is getting a bit late in the day.

     

    -- 

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 6:28 PM   in reply to Lvanhoff

    Remove these from you css:

     

    .vidA p {
        margin:5px;
    }

     

    and

     

    .audioA p {
        margin:5px;
    }

     

    (there are no <p> tags in this td any more.)

     

    But after that, I cannot tell what the problem is without seeing your page online.

     

    -- 


    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 6:31 PM   in reply to Lvanhoff

    so i could change the image as it is now (to show as it is now) but swap image to a slightly different color version on hover?

    Forgot to reply to this part of yoru question.  Yes you could do this, but you must make the bg image considerably larger so when users increase theri font size the bg image will still fill the td.

     

    so i could change the image as it is now (to show as it is now) but swap image to a slightly different color version on hover?

     

    Away for a while now............................................................

     

    -- 

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2009 8:36 PM   in reply to Lvanhoff

    Ahh, spotted the trouble.  Change background-image style to this:

     

        background-image: url(../images/videoclip-imageandcolor-tr.gif) ;

     

    and then add this position style right below it:


        background-position: bottom right;

     

    Now it'll work.

     

    -- 

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2009 9:56 AM   in reply to Lvanhoff

    Sure, just add the new image as background in this selector:

     

    .vidA a:hover{
         background-color:#C4F894;
           background-image: url(...);
    }    

     

    This might be a good time to mark this as Correctly Answered so the folks who help will not need to click on this thread any more.  Thanks!

     

    --

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2009 11:33 AM   in reply to Lvanhoff

    http://www.12results.com/images/audioclip-imageandcolor-tr-over.gif is not on the server.  Gotta upload it!

     

    --

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 25, 2009 12:36 PM   in reply to Lvanhoff

    Excellent!  Glad we got it working.  Happy to help.

     

    --

     

    E. Michael Brandt

    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions

    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

    --
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points