views:

347

answers:

1

I have a form which is presented in a table. In the third column, there are 4 rows for selecting the preferred method of contact (radio buttons). I'm currently using a label to write this text in the first row. I'm told, however, it doesn't look as nice as using a custom image.

The image is supposed to sit nicely amongst the form content with an arrow pointing to these radio buttons. I figured the easiest way to do this would be to set a fixed width on the columns then set the table's background image to the image I've been given and position it (with background-position) to where it should sit. With the column widths set, there shouldn't be a problem of alignment.

Any other ideas on how to do this?

A: 

My suggestion: instead of putting the background on the table, put the background on a table cell with rowspan=3, meaning it will cover the area to the right of all three radio buttons. Here's an HTML sample illustrating the technique. Note that you'll need to carefully size each column (and the enclosing table) to make sure your image fits in properly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<style type="text/css">
table.contactForm
{
    background-color:#EBF3F7;
    width:681px;
} 
table.contactForm td
{
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:0px;
    padding-right:0px;
    white-space:nowrap;
    height:25px;
}
table.contactForm td.first
{
    width:200px;    
}
table.contactForm label
{
    padding-left:5px;
}
table.contactForm td.second
{
    width:200px;
    text-align:right;
}
table.contactForm td input[type=text]
{
    width:180px;    
}
table.contactForm td.third
{
    width:20px; 
    text-align:right;
}
table.contactForm td.imageArrows
{
    background-image:url(background.jpg);
    background-repeat:no-repeat;
    background-position:left center;
    width:261px;
    height:78px;
    padding:0px;
}

</style>
</head>

<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>

</table>
</body>
</html>
Justin Grant