...

View Full Version : style on a td to make it look like a button



crmpicco
09-02-2005, 01:46 PM
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

webby
09-02-2005, 02:17 PM
<td class="whatever">Link code here</td>
Then in your style sheet:


.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 (http://www.google.com/search?hl=en&q=css+display+block)
google: css border (http://www.google.com/search?hl=en&lr=&q=css+border)
google: css background image (http://www.google.com/search?hl=en&lr=&q=css+background+image)
google: css positioning (http://www.google.com/search?hl=en&lr=&q=css+positioning) (instead of tables) ;)

glenngv
09-02-2005, 02:21 PM
<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.

webby
09-02-2005, 02:27 PM
glenngv,

You can save yourself a lot of repetitive code with an external style sheet (http://www.google.com/search?hl=en&lr=&q=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. :)

NancyJ
09-02-2005, 02:50 PM
glenngv,

You can save yourself a lot of repetitive code with an external style sheet (http://www.google.com/search?hl=en&lr=&q=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 :D

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.

mrruben5
09-02-2005, 02:58 PM
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;
}
/* */



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum