Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder crmpicco's Avatar
    Join Date
    Jan 2005
    Location
    Mauchline, Scotland
    Posts
    1,094
    Thanks
    15
    Thanked 1 Time in 1 Post

    Unhappy style on a td to make it look like a button

    I have a <td> cell inside a table.

    Is there anyway to put a style on it to make it appear as a button or something that looks like it needs to be pressed?

    TIA.

    Picco

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <td class="whatever">Link code here</td>
    Then in your style sheet:

    Code:
    .whatever {
       width: ##px;
       height: ##px;
       background-image:url(image.jpg);
    }
    Or you could use a border around the table cell instead of using an image. If you set the link to display:block, you can even change the border to invert when the link is hovered on, and the same can be said for the background image.

    It all depends on what you want to do exactly.

    google: css display block
    google: css border
    google: css background image
    google: css positioning (instead of tables)
    Last edited by webby; 09-02-2005 at 01:22 PM.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    <table>
    <tr><td style="border:4px outset lightgrey;background-color:silver;">Button</td></tr>
    </table>
    <table>
    <tr><td style="border:4px inset lightgrey;background-color:silver;">Button</td></tr>
    </table>
    That's what I did in my SameGame script.

  • #4
    New Coder
    Join Date
    Aug 2005
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    glenngv,

    You can save yourself a lot of repetitive code with an external style sheet. Not only does it save you from having to type (or paste) things over and over, but the style sheet only has to be downloaded once by the user and gets cached on their computer, saving a lot of load time for all those people on dialup.

    This is also true when using css positioning (see link in my previous post) instead of tables, as you can replace all that table code with an external style sheet.

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by webby
    glenngv,

    You can save yourself a lot of repetitive code with an external style sheet. Not only does it save you from having to type (or paste) things over and over, but the style sheet only has to be downloaded once by the user and gets cached on their computer, saving a lot of load time for all those people on dialup.

    This is also true when using css positioning (see link in my previous post) instead of tables, as you can replace all that table code with an external style sheet.
    blessed are the n00bs

    I'm pretty sure glen knows this already what with him being here for 3 years and having over 7k posts

    I think he was just trying to show the effect quickly and easily for the original poster to see. And FWIW if this was only 1 button it would be more efficient to add the style inline than to create and external stylesheet just for 1 button.

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    td.button a {
    display:block;
    background:#069;
    border:1px outset #069;
    text-decoration:none;
    font-weight:bold;
    line-height:1.5em;
    padding:0 .5em;
    color:#fff;
    }
    
    td.button a:hover {
    background:#09c;
    border-color:09c;
    }
    
    /*IE5 mac hide\*/
    * html td.button, td.button a {
    height:1px;
    float:left;
    }
    /* */
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •