Incorrect button spacing

peterv12 · Jun 18, 2009

I'm attempting to evenly space and center 3 buttons at the bottom of an HTML page. It's a form that takes input and passes it to a php page. That part works great. The problem I'm having is the seemingly haphazard spacing of the submit, update & delete buttons. I'll include the code below, with the hope that one of you HTML gurus can spot my beginners mistake. The button coding is at the end of the rather lengthy page. (BTW, if you notice anything in the code that can be coded better, please let me know, as I'm just learning this stuff!) Thanks!

Code:

<?php
// leads_switch.PHP - Updated: Wednesday, June 17, 2009 - 7:40 PM
//COUNT(leadsTable.company) AS NUM
include('dbconnect.php');
//
  $record_key=$_POST['record_key'];
//
$query = "SELECT * FROM leadsTable where company_name = '$record_key'";
//
$result = mysql_query($query);
//
$rows=mysql_affected_rows(); // will return the number of rows produced by the query.
if (!$result) {
   $message  = 'Invalid query: ' . mysql_error() . "\n";
   $message .= 'Whole query: ' . $query;
   die($message);
} else {
      while ($newArray = mysql_fetch_array($result, MYSQL_ASSOC)) {
             $id  = $newArray['id'];
             $company = $newArray['company_name'];
             $contact = $newArray['contact'];
             $phone = $newArray['phone'];
             $fax = $newArray['fax'];
             $street = $newArray['street'];
             $city = $newArray['city'];
             $state = $newArray['state'];
             $zip = $newArray['zip'];
             $job_type = $newArray['job_type'];
             $license_class = $newArray['license_class'];
             $experience = $newArray['experience'];
             $date_found = $newArray['date_found'];
             $date_of_contact = $newArray['date_of_contact'];
             $notes = $newArray['notes'];
}
?>
<html>
<!-- UPDATE_LEADS_RECORD.HTML - Updated: Friday, June 12, 2009 - 12:58 PM -->
<head>
<title>Leads Process Page</title>
</head>
<body>
<!--align="center" will center the form -->
<table align="center" width="300" border="4" cellpadding="0" cellspacing="1" 
bordercolor="#ccccff" bgcolor="blue">
<tr>
<form name="form1" method="post" action="leads_process_page.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<tr>
<td colspan="4"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Update Lead</strong></td>
</tr>
<tr>
<td width="78">Company</td>
<td width="20">:</td>
<td width="294"><input type="text" name="company" value="<?php echo $company; ?>"></td>
<td> Date Found : </td>
<td width="294"><input type="text" name="date_found" value="<?php echo $date_found; ?>"></td>
</tr>
<tr>
<td width="78">Contact</td>
<td width="20">:</td>
<td width="294"><input type="text" name="contact" value="<?php echo $contact; ?>"></td>
<td> Contact Date : </td>
<td width="294"><input type="text" name="date_of_contact" value="<?php echo $date_of_contact; ?>"></td>
</tr>
<tr>
<td>Phone #</td>
<td>:</td>
<td width="294"><input type="text" name="phone" value="<?php echo $phone; ?>"></td>
</tr>
<tr>
<td>Fax #</td>
<td>:</td>
<td width="294"><input type="text" name="fax" value="<?php echo $fax; ?>"></td>
</tr>
<tr>
<td>Street</td>
<td>:</td>
<td width="294"><input type="text" name="street" value="<?php echo $street; ?>"></td>
</tr>
<tr>
<td>City</td>
<td>:</td>
<td width="294"><input type="text" name="city" value="<?php echo $city; ?>"></td>
</tr>
<tr>
<td>State</td>
<td>:</td>
<td width="294"><input type="state" name="state" size="2" maxlength="2" value="<?php echo $state; ?>"></td>
</tr>
<tr>
<td>Zip</td>
<td>:</td>
<td width="294"><input type="text" name="zip" size="5" maxlength="5" value="<?php echo $zip; ?>"></td>
</tr>
<tr>
<td>Job Type</td>
<td>:</td>
<td width="294"><input type="text" name="job_type" size="5" maxlength="5" value="<?php echo $job_type; ?>"></td>
</tr>
<tr>
<td>License Class</td>
<td>:</td>
<td width="294"><input type="text" name="license_class" size="1" maxlength="1" value="<?php echo $license_class; ?>"></td>
</tr>
<tr>
<td>Experience</td>
<td>:</td>
<td width="294"><input type="text" name="experience" size="10" maxlength="10" value="<?php echo $experience; ?>"></td>
</tr>
<tr>
<td>Notes/Results</td>
<td>:</td>
<td><textarea name="notes" cols="20" rows="3" value="<?php echo $notes; ?>"></textarea></td>
</tr>
<tr><td><br /></td></tr>
[b][COLOR=red]<tr>
<td><input type="submit" name="formoption" value="Add"></td>
<td><input type="submit" name="formoption" value="Update"></td>
<td><input type="submit" name="formoption" value="Delete"></td>
</tr>[/color][/b]
</table>
</td>
</form>
</table>
</body>
</html>
<?php } ?>

Vragabond · Jun 18, 2009

You could not place all your content in a table. That would always count as an improvement.

You have your buttons in three columns of one big table, that spans the entire page. The column widths are defined by other elements in the table, and that's how spacing is ultimately decided. You can:

1. Completely do away with the table and re-write the page using definition list.
2. End the table right before the buttons and style buttons separate from the table.
3. Put all the buttons in one cell that spans all other cells.

In all three cases you would use text-align on the parent container of the buttons to align them in the center.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

peterv12 · Jun 19, 2009

Vragabond, Thanks for your advice. Would you be willing to clarify a couple of things? I'm new to HTML and CSS. I'm not familiar with definition list, but I plan to look it up. Options 2 & 3 look good, but I'm not sure how to do that. Could you give me an example of code to use for them? I tried using colspan to attempt what you're saying in #3, but it didn't work the way I wanted it to. (I probably coded it incorrectly.) Thanks again.

peterv12 · Jun 19, 2009

Vrgabond,
Never mind explaining #3, I figured out how to do that, but I'd love to know how to do #1 & #2 if you're willing to explain.

Vragabond · Jun 19, 2009

#2:
New code, last lines:

Code:

<tr><td><br /></td></tr>
</table>
<div style="text-align: center;">
  <input type="submit" name="formoption" value="Add" />
  <input type="submit" name="formoption" value="Update" />
  <input type="submit" name="formoption" value="Delete" />
</div>
</td>
</form>
</table>
</body>

#3:
Last row, new code:

Code:

<tr>
  <td colspan="3" style="text-align: center;">
    <input type="submit" name="formoption" value="Add" />
    <input type="submit" name="formoption" value="Update" />
    <input type="submit" name="formoption" value="Delete" />
  </td>
</tr>

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

peterv12 · Jun 19, 2009

Vragabond, thank you very much for sharing your knowledge! I'd already figured out #3, and your code verifies that I did it correctly. As for #2, it's something I didn't figure out, and I'm happy to know it. I really appreciate the help!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Incorrect button spacing

peterv12

Technical User

Vragabond

Programmer

peterv12

Technical User

peterv12

Technical User

Vragabond

Programmer

peterv12

Technical User

Similar threads

Part and Inventory Search

Sponsor