Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member fullmanator's Avatar
    Join Date
    Sep 2003
    Location
    Fort Lauderdale, FL
    Posts
    15
    Member #
    3091
    I'm looking for an easy way that will make an entire table cell one single link, instead of just text.

    I want to dynamically put stuff inside of it (graphic and text), but make it all one button. I've seen Javascript ways of achieving this, but I'd really rather not go that route.

    I know it is possible with CSS, I think someone told me it could be done with a List tag and making it a manual width and set the display to Block. I'm not quite sure how to achieve this.

    Any help would be greatly appreciated. :classic:

  2.  

  3. #2
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Try putting this in your table cell..
    Code:
    <a href="whatever.html">
    <div style="width: 100%; height: 100%; text-align: center; cursor: hand;">
    Link
    </div>
    </a>
    The hand cursor will only show in IE though.
    JR

  4. #3
    Junior Member
    Join Date
    Nov 2003
    Posts
    1
    Member #
    4048
    Set the cursor attribute to pointer. Works in Mozilla and IE.

  5. #4
    Junior Member fullmanator's Avatar
    Join Date
    Sep 2003
    Location
    Fort Lauderdale, FL
    Posts
    15
    Member #
    3091
    Found it, basically, you give the link you want (inside a table cell or div or whatever the following class, and it works out perfectly. Doing so doesn't require any javascript to change cursors or whatever, and IE/Netscape/Mozilla/Opera/Safari support it the same.

    ------------------------------------------

    a.button {
    display:block;
    width:100%;
    height:100%;
    }

    ------------------------------------------

    You can even make a background color change on hover by adding this to your styles.

    ------------------------------------------

    a.button:hover {
    background-color:#E1E8E8;
    }

  6. #5
    Member Tinah's Avatar
    Join Date
    Oct 2003
    Location
    Croatia/England
    Posts
    72
    Member #
    3656
    ooh i like this!
    fullmanator, you made my day!

  7. #6
    Junior Member fullmanator's Avatar
    Join Date
    Sep 2003
    Location
    Fort Lauderdale, FL
    Posts
    15
    Member #
    3091
    Thanks. Credit should go to my friend Adrian at www.clearspanmedia.com

    It's a very handy tip, and works across all browsers that support CSS, basically, everything recent. Doesn't involve Javascript at all, so even decent mini-browsers can see it perfectly.

  8. #7
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    I agree, thanks for that one
    JR

  9. #8
    Member dinologic's Avatar
    Join Date
    Jan 2003
    Posts
    54
    Member #
    539
    This is the greatest thing since sliced bread...and I truly do love sliced bread.
    :classic:
    I've seen it before, but never so uncomplicatedly. This forum rocks!

  10. #9
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    I tried fullmanators approach. It now applies bgcolor on hover for an entire cell. the trouble is that somehow the position of the text changes for the link I apply this style to. Even though I coded it in the html of the cell itself that it should align in the center (<td> valign="middle"</td>) it appears aligned to the top. Does anyone know what's going wrong?

    thanks in advance

  11. #10
    Junior Member
    Join Date
    Apr 2005
    Posts
    23
    Member #
    9543
    fullmanator, you are saying it works in Mozilla and all the browsers. Unfortunately it doesn't. I tried it in Firefox and it didn't work while in IE it works fine.


    a.button {
    width: 100%;
    height: 31px;
    padding-left:37px;
    border-top: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    background-color:#FFFFFF;
    }

    a.button:hover {
    border-top: 3px solid #D4D2B4;
    border-bottom: 3px solid #D4D2B4;
    }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com