Jump to content

Removing space taken up by padding and margin


nK0de

Recommended Posts

I have a simple webpage which initially looks like this.

 

UAG3z.png

 

When clicked upon a link, a small form appears to the right. And the label which reads Record Added moves to the middle of the page!

 

BlOvC.png

 

How can I stop this from happening? I want that label to stay fixed where it is from the start.

 

This is the HTML code of the page

 

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
</head>
<body id="body_services">

<div id="tasks">
<ul>
   	<li><a id="add" href="#">Add a new taxi service</a></li>
       <li><a id="update" href="#">Update a taxi service</a></li>
       <li><a id="delete" href="#">Delete a taxi service</a></li>
       <li><a id="view" href="#">View taxi services</a></li>
   </ul>
</div>

<div id="addForm">
   <form id="frmAddService" name="Add">
   <table width="300" border="0">
     <tr>
       <td><label for="sid">Service ID</label></td>
       <td><input type="text" name="sid" readonly="readonly" value="<?php echo $new_sid; ?>" style="text-align: right" /></td>
     </tr>
     <tr>
       <td><label for="name">Name</label></td>
       <td><input type="text" name="name" /></td>
     </tr>
     <tr>
       <td><label for="cost">Cost</label></td>
       <td><input type="text" name="cost" /></td>
     </tr>
     <tr>
       <td><label for="active">Active</label></td>
       <td><input type="checkbox" name="active" /></td>
     </tr>
     <tr>
       <td></td>
       <td><input type="reset" value="Cancel" /> <input type="submit" value="Save" name="save" /></td>
     </tr>
   </table>
   </form>
</div>

<div id="msg">Record added</div>

<div id="updateForm">
   <form id="cmbServiceIDs" name="sids">
   <table width="400" border="0">
     <tr>
       <td><label for="serviceId">Select the Service Name</label></td>
       <td><?php echo $dropdown; ?></td>
       <td><input id="load" type="submit" value="Load" name="btnload" /></td>
     </tr>
   </table>
   </form>

   <form id="frmUpdateService" name="Update" action="" method="post">
   <table width="300" border="0">
     <tr>
       <td><label for="sid">Service ID</label></td>
       <td><input id="sid" type="text" name="sid" value="" style="text-align:right" /></td>
     </tr>
     <tr>
       <td><label for="name">Name</label></td>
       <td><input id="name" type="text" name="name" value="" style="text-align:right" /></td>
     </tr>
     <tr>
       <td><label for="cost">Cost</label></td>
       <td><input id="cost" type="text" name="cost" value="" style="text-align:right" /></td>
     </tr>
     <tr>
       <td><label for="active">Active</label></td>
       <td><input id="active" type="checkbox" name="active" value="" /></td>
     </tr>
     <tr>
       <td></td>
       <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
     </tr>
   </table>
   </form>
</div>

</body>
</html>

 

And I have one more question. Please take a look at these screenshots.

 

Auu7g.png

 

y8qgx.png

 

I use CSS margin to position the elements on the page. But as you can see, it takes up unnecessary space (orange colored areas). How can I remove them?

 

This is the CSS code.

 

* { margin:0; padding:0; }

#msg { float:right; padding-right:250px; padding-top:300px; font-size:15px; font-weight:bold; color:#C00; }

#tasks { float:left; margin-left:150px; margin-top:150px; }

#addForm { float:right; margin-right:200px; margin-top:150px; }

#updateForm { float:right; margin-top:120px; }

#cmbServiceIDs { padding-bottom:20px; }

 

Thank you :)

Link to comment
Share on other sites

What happens if you add clear; both; to #msg (and possibly to #updateForm as well)?

#msg { clear: both; float:right; padding-right:250px; padding-top:300px; font-size:15px; 
font-weight:bold; color:#C00; }

#updateForm { clear: both; float:right; margin-top:120px; }

 

You also need a doctype at the very top of the page, above the <html> tag.

<!doctype html>

Edited by Wickham
  • Upvote 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...