Jump to content
Stef's Coding Community
nK0de

Removing space taken up by padding and margin

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 :)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

If I do that, it moves the label way down like this

 

MQuML.png

 

Yes, I have specified the doctype in my page. I just removed it when posting the code here. :)

Share this post


Link to post
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...