Question

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?

Answer 1

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

友情链接