Exploding Garrmondo Weiner Interactive Swiss Army Penis - Is it possible to have CSS buttons with own background?

Exploding Garrmondo Weiner Interactive Swiss Army Penis (http://www.gamingforce.org/forums/index.php)

- Help Desk (http://www.gamingforce.org/forums/forumdisplay.php?f=36)

- - Is it possible to have CSS buttons with own background? (http://www.gamingforce.org/forums/showthread.php?t=6380)

Is it possible to have CSS buttons with own background?

Hi guys.
Are there any CSS experts in here? I'm curious about CSS buttons.
1. If I have a JPG image, can it be the default image for all buttons?

Now for a more complicated question.
2. If my image contains 3 parts, X Y Z, is it still possible to use CSS?
X and Z will be the same for all buttons. Y is the dynamic part which will be expanded (dependent on how long the button is).

http://img215.imageshack.us/img215/9607/button2yy.jpg

Also, does anybody know what font the default Macromedia is using? It only says "size 2, 3, 5, +1, +2" etc..
Here is a picture:
http://img215.imageshack.us/img215/4799/font7ps.jpg

Hope you guys understand.
Thanks

1. Anything can be a "default", you just need define a class, define some properties of said class, then apply the class to any object you want to use the stylings therein.

2. This is possible, though you will need to use empty elements, which I am not that big a fan of. Take, for example, this code (all inline styles to shrink the code):

Code:

<div class="button">

   <p style="display: inline; background: url(left.jpg) no-repeat;"></p>

   <p style="display: inline; background: url(repeat.jpg) repeat-y;">Content</p>

   <p style="display: inline; background: url(right.jpg) no-repeat;"></p>

</div>

The "display: inline" style is to make them stack horizontally. <p> will normally not do so, and due to this it must be forced.

3. That's a sans-serif default font. It appears to be Arial, at 10 point size.

Hmmm...
The code goes in the CSS file right?

Code:

<div class="button">

   <p style="display: inline; background: url(left.jpg) no-repeat;"></p>

   <p style="display: inline; background: url(repeat.jpg) repeat-y;">Content</p>

   <p style="display: inline; background: url(right.jpg) no-repeat;"></p>

</div>