Noskiw Posted June 3, 2010 Share Posted June 3, 2010 It looks untidy. Is there any other way of making this all even other than adding " " because I have tried that and it still doesn't become even. Also, would there be a way of removing the large empty space at the top. This is my registration source code... <html> <form action="index.php?p=reg"> <table style="height: inherit;"><br /> <tr><td><label for="first name">First Name: </label><input type="text" name="first name" /></td></tr><br /> <tr><td><label for="last name">Last Name: </label><input type="text" name="last name" /></td></tr><br /> <tr><td><label for="email">Email: </label><input type="text" name="email" /></td></tr><br /> <tr><td><label for="username">Username: </label><input type="text" name="username" /></td></tr><br /> <tr><td><label for="password">Password: </label><input type="password" name="password" /></td></tr><br /> <tr><td><label for="password repeat">Verify Password: </label><input type="password" name="verify password" /></td></tr><br /> <tr><td><input type="submit" name="submit" value="Register" /></td></tr> </table> </form> </html> And this is my CSS code body{ background: #fff; margin: 10px; font-family: Verdana; font-size: 13px; } #mainC{ padding: 3px; border: 1px solid #000; width:100%; } #mainC_no_border{ padding:3px; width:85%; border:0px; } #header{ height:auto; border-top: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; width:100%; background: url(./images/header.png); padding:3px; } #navbar{ width: 100%; height: 25px; line-height: 22px; font-weight: bold; background: url(./images/nav_back.png) repeat-x; } .button a{ float: left; width: 100px; height: 25px; color: #000; text-decoration:none; text-align: center; } .button a:hover{ float: left; width: 100px; height: 25px; color: #fff; text-decoration:underline; text-align: center; background: url(./images/nav_back_roll.png) repeat-x; } #footer{ height:20px; width:100%; padding:3px; border-right: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; } #login_box{ width: 100%; border-top:1px solid #000; border-right:1px solid #000; border-left:1px solid #000; padding:3px; text-align:right; height: 25px; } I have no idea whether or not the css is relevant. But this page is part of a dynamic web page and it is inserted in the "mainC" div. Quote Link to comment Share on other sites More sharing options...
BizLab Posted June 3, 2010 Share Posted June 3, 2010 The 2 ways to clean that up are to use a table or a list. If you use the <ul></ul> You will need to use the CSS property - list-style: none; And that will remove the dots from the list. I use the table method... I'm not a big fan of the look of the list layout. Quote Link to comment Share on other sites More sharing options...
Noskiw Posted June 3, 2010 Author Share Posted June 3, 2010 This is what happened when I used the <table> method Here's my code. I may have done it wrong :L <form action="index.php?p=reg"> <table style="height: inherit;"><br /> <table><label for="first name">First Name: </label><input type="text" name="first name" /></table><br /> <table><label for="last name">Last Name: </label><input type="text" name="last name" /></table><br /> <table><label for="email">Email: </label><input type="text" name="email" /></table><br /> <table><label for="username">Username: </label><input type="text" name="username" /></table><br /> <table><label for="password">Password: </label><input type="password" name="password" /></table><br /> <table><label for="password repeat">Verify Password: </label><input type="password" name="verify password" /></table><br /> <table><input type="submit" name="submit" value="Register" /></table> </table> </form> Quote Link to comment Share on other sites More sharing options...
BizLab Posted June 3, 2010 Share Posted June 3, 2010 yea, you will need to look into HTML table information (layout and design) For now, use this: <table> <tr> <td>Field Title</td> <td>Input box code</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> Don't forget to buy dreamweaver for you development projects.. Also, i recommend the Head First HTML book available everywhere. It is awesome Quote Link to comment Share on other sites More sharing options...
Noskiw Posted June 3, 2010 Author Share Posted June 3, 2010 Ok, now I'm still stuck with the massive gap at the top Any ideas? Quote Link to comment Share on other sites More sharing options...
BizLab Posted June 3, 2010 Share Posted June 3, 2010 i would use CSS to remove the top margin on that table - give the table an id <table id="my_table"> and css property #my_table{ margin-top: 0px; padding-top: 0px; } or any other pixel value you want Quote Link to comment Share on other sites More sharing options...
Noskiw Posted June 3, 2010 Author Share Posted June 3, 2010 That's actually done nothing Quote Link to comment Share on other sites More sharing options...
haku Posted June 4, 2010 Share Posted June 4, 2010 The gap is caused by something in your code that you haven't shown us. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.