Best way to present buttons to page links

[tp_michele_jones]

Hi All,

This is what I've done, but I'm wondering if you have any suggestions
on a better way. I don't like the fact that I can't control the spaces
between the buttons very well.

<table class="vcbodytext" width="640">
<tr>
<td align="right">
<form method="link" action="founders.asp"><input type="submit"
style="width:281px;height:23px" Value="Vancliffen Arts Foundation
Founders">&nbsp;&nbsp;&nbsp;</form>

<form method="link" action="examprogramI.asp"><input type="submit"
style="width:281px;height:23px" Value="Vancliffen International
Examination Programs">&nbsp;&nbsp;&nbsp;</form>

<form method="link" action="donationpledge.asp"><input type="submit"
style="width:281px;height:23px" Value="Pledge A
Donation">&nbsp;&nbsp;&nbsp;</form></td>

<td align="left">
<form method="link" action="2005winners.asp">&nbsp;&nbsp;&nbsp;<input
type="submit" style="width:281px;height:23px" Value="Winners of the
2005 Audition Competition"></form>

<form method="link"
action="danceprogramsI.asp">&nbsp;&nbsp;&nbsp;<input type="submit"
style="width:281px;height:23px" Value="Vancliffen International Dance
Programs"></form>

<form method="link" action="DonationByCCI.asp">&nbsp;&nbsp;&nbsp;<input
type="submit" style="width:281px;height:23px" Value="Donazioni Via
Carta Dicredito"></form></td>
</tr>
</table>

Here's what it looks like http://www.vancliffen.com/italian.asp

Thanks,

Michele

 

[Leif K-Brooks]

Hi All,

This is what I've done, but I'm wondering if you have any suggestions
on a better way. I don't like the fact that I can't control the spaces
between the buttons very well.

<form method="link" action="founders.asp"><input type="submit"
style="width:281px;height:23px" Value="Vancliffen Arts Foundation
Founders">&nbsp;&nbsp;&nbsp;</form>

How about using normal links and then styling them to look like buttons?
Even better, how about _not_ styling them to look like buttons?

 

[Hywel Jenkins]

Hi All,

This is what I've done, but I'm wondering if you have any suggestions
on a better way. I don't like the fact that I can't control the spaces
between the buttons very well.

Why use forms for links? What data are you submitting? Anyway, change
them to images, or style a span so that it looks like a button.

 

[tp_michele_jones]

Styling a button is easy for you smart people, but I'm a beginner. I
can't get the raised effect. Here's what I have:

..vcbuttons{
font-family: verdana, arial, courier;
font-size:11px;
line-height:16px;
color:#000000;
background-color:#D4D0C8;
border-styleutset;
border-color:#000000;
border-width:4px;
width:280px;
border:2px;
cursor:hand;
text-decoration:bold;
}
<form method="link" action="founders.asp"><input class="vcbuttons"
type="submit" Value="Vancliffen Arts Foundation Founders"></form>

I remember seeing a shading option once, but can't find it. Help,
please.

Michele

 

[Els]

Styling a button is easy for you smart people, but I'm a beginner. I
can't get the raised effect. Here's what I have:
[snip]

border-styleutset;
border-color:#000000;
border-width:4px; [snip]
border:2px;

[snip]
I remember seeing a shading option once, but can't find it. Help,
please.

To get the outset effect, I personally never use 'outset', because
some browser(s) don't understand what I want (forgot which one though
- probably IE).
I'd take the background-color of the button, and give the top and left
borders of the button a slightly lighter colour, and the bottom and
right borders a darker one.

Not sure what you want the 'border:2px' to do if you already stated
'border-width:4px' though. Won't have any effect afaics.

 

[Steve Pugh]

Styling a button is easy for you smart people, but I'm a beginner. I
can't get the raised effect. Here's what I have:

border:2px;

border: 2px; is the same as setting

border-style: none;
border-color: [same as color];
border-width: 2px;

so you've overwritten the individual border- properties that you've
set earlier. What do you actually want the border to be?

I remember seeing a shading option once, but can't find it.

There's a full list of CSS 2.1 properties at
http://www.w3.org/TR/CSS21/propidx.html.
There are other properties in CSS2 or CSS3 but 2.1 gives the best
chance of actually being supported by browsers at this moment.

Steve

 

[tp_michele_jones]

How about just making a standard windows gray button, like the ones on
the toolbar at the bottom of the windows screen.

 

[Steve Pugh]

How about just making a standard windows gray button, like the ones on
the toolbar at the bottom of the windows screen.

Depends on whether you mean WinXP buttons or old style Windows
buttons.

Also depends what you're creating them for.

For real buttons use the appropriate HTML element - <input> of various
types or <button>.

For examples of Windows buttons use an image.

For anything else, forget about copying a particular OS (your users
will be using a selection of operating systems anyway) and create a
style that suits your site.

Steve