How can I create buttons under a grid?

Question

I have a grid of 5 columns and 5 rows using an unordered list. The grid has an image and underneath the image there is a hyperlink and a description, both of which are coming from a database (FileMaker Pro via PHP). So, each grid cell consists of three li items. Now what I would like to do is have two buttons under each item in the grid. The buttons are images and I want to grab the users click via Post. Here is what I have:

<form action="studio_grid_submit.php" method="post">
 <input type="hidden" name="submitted" value="true">
 <input type="image" src="images/accept.png" width="32" height="32" alt="Accept">
 <input type="image" src="images/revise.png" width="32" height="32" alt="Revise">
</form>

I then tried to put that form into an li item, first as another li item on the parent level and then as a child level as the last item. Neither worked. The image, although 32x32 was stretched horizontally. How can I add two buttons underneath each item in the grid?

Thanks.

Answer 1

I don't think this is an effective use of an unordered list. It's too simple of a layout to require nesting.

I would use the unordered list to make the grid-wrapper, but use "regular" HTML for the inside of each cell.

Use a combination of floats and clears.

input type="image" is best dealt with using CSS:

.submit {
    width:32px;
    height:32px;
    background-image:url(../Images/accept.png);
    float:left;
}