View Full Version : table background like button

03-07-2005, 02:09 PM
i like your site and and love your way of explaination i hope you can help me before 2 years i visited Guistuff.com there is a popup window was appeared and its background likes a windows menu it is looks like a button as 3d object of windows and looking so good i thaught it is an image i changed my windows appreance colour then the page's background colour was auto chage as my appreance colour it was table based i saved that page they used style in table now i have lost that page and now i need to make page like that and i have no knowledge of style sheet and new to html but basics i know.
i am finding this page or tutorial last 4 hour now i'm tired i hope you can help me please Reply me and suggest me what should i do.
thanks Ghaniz

03-08-2005, 06:40 AM
I was posted this thread yesterday but could not get help please please please HELP me :confused:

03-08-2005, 09:24 AM
Considering the number of views and the lack of response I fear your question is not clear enough; I understand that if English is not your native language it can be difficult, but please try to decribe your question in more detail.
Guistuff still exists; perhaps you can find something similar to what you are looking for and lead us to an example.

03-08-2005, 10:41 AM
for reply me yes it is true english is not my language I'm toofar from USA and UK,
and on this topic i don't know how to explain and even i havent any example.
but i want to know about a tutorial wich is describe that how to make table back ground like button...
i saw a tutorial about it but there is the use of border, color it means that if visitor change the appearance color the page still gray,
but i have visited on a page which was table based and backgroung looks like button when i changed my windows appreance color the page color was changed they use any kind of style in table and show same color of my appreance.

i hope now you can help me to make that style ,

i have many E-mails to Guistuff to getting help but they are not replying therefore i have to post this thread on your forum.

03-08-2005, 10:57 AM
The usual trick to make any element (it doesn't need to be a table) have a button-like appearance is to set the border colors on the top and left to a slightly lighter version of the fill color, and the bottom and right borders to a slightly darker one.
This can easily be accomplished using Cascading Style Sheets (CSS) using the various border properties; a demonstration of this effect can be seen at the Brainjar site (http://www.brainjar.com/) where it is applied to various page elements.

If you are working on a page where you want to apply such an effect, then maybe you can supply the markup ("code") so I or someone else can give a more specific example.

03-08-2005, 11:15 AM
Yes it is what i looking for, the page's background like a little bevel and it creates a effect of button can you tell me the trick to do this.
Or make me a Example page it would be very help full for me.

03-08-2005, 12:58 PM
This can be accomplished using CSS border properties; say, you have a header div you want to give a background color and a beveled edge, and the header has id "header":

<div id="header">
<p>This is some text in a paragraph.</p>
the following rule will set the color and border (I chose a medium grayish blue):

#header {
background-color: #99c;
border: 2px solid;
border-color: #ccf #669 #669 #ccf;
The background-color property sets the background color (no real surprise there... :p ), the border shorthand property sets the border width (2 pixels) and style (a solid line) and the border-color shorthand property sets the color for each of the sides in the order top - right - bottom - left (clockwise, starting at 12 o'clock).

03-08-2005, 03:24 PM
thank you sir!
but i am sorry to say that i never use css before would you please tell me where should i paste the codes :eek: ooops!

03-08-2005, 03:57 PM
For this, I'd like to refer to the HTML Dog tutorials (http://htmldog.com/guides/cssbeginner/applyingcss/); they do a far better job then I!

03-08-2005, 05:18 PM
thank You very Much for help me i was almost satisfied by your code but other person on sitepoint forum gave me this

#btn {
border:1px solid;
border-color:ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;

it is really what i need.
change color when visitor change windows appearance color. :)
you really sincerely help me God bless You