...

View Full Version : white space



truviet911
07-10-2007, 02:32 AM
hey guys. im designing anew homepage right now and i encountered this problem. im creating a form in dreamweaver for the user to log in . and it takes a bit of space. so my question is . is it possible to move my password field up close to the user name field? or maybe i use the form fuction wrong. cuz i check there is not <br> tags or anything.
http://www.tuanpham.net/test.jpg

<div align="left"><span class="style5">Username:</span>
<input type="text" name="User" id="User">
<form name="form1" method="post" action="">
<p><span class="style5">Password:</span>
<input type="password" name="Pass" id="Pass">
</p>

</form>
<div align="left">
<form name="form2" method="post" action="login.php">
<input type="image" name="Submit" src="images/btn.login.gif" alt="Login">
</form>
</div>

Jutlander
07-10-2007, 02:39 AM
Can you post the CSS also?

_Aerospace_Eng_
07-10-2007, 05:06 AM
Why do you have inputs outside of your form tags? And why do you have to form tags when you only need one?

truviet911
07-10-2007, 05:38 AM
Can you post the CSS also?
judlander: that does do anything with css.

hey aerospace: i think you right. haven't deal with forms for a long time . :D

truviet911
07-10-2007, 05:46 AM
here i fix the code already . but then the problem still there.

<form name="form1" method="post" action="login.php">
<div align="left">
<p><span class="style6">Username:
</span>
<input type="text" name="Username" id="Username">
</p>
<p><span class="style7">Password:
</span>
<input type="text" name="Password" id="Password">
</p>
<p>
<input type="image" name="Login" src="images/btn.login.gif" id="Login" value="Submit">
</p>
</div>
</form>

twodayslate
07-10-2007, 05:48 AM
Add margins or padding to position the elements of the form.

To move an element up 5 px
{margin-top: -5px;}
{margin-bottom: 5px;}

truviet911
07-10-2007, 05:55 AM
thanks alot bro. it works now haven't code for awhile . :-)


<form name="form1" method="post" action="login.php">
<div align="left">
<p><span class="style6">Username:
</span>
<input style="margin:0px 0px -15px 0px" type="text" name="Username" id="Username">
</p>
<p><span class="style7">Password:
</span>
<input style="margin:0px 0px -5px 0px" type="text" name="Password" id="Password">
</p>
<p>
<input type="image" name="Login" src="images/btn.login.gif" id="Login" value="Submit">
</p>
</div>
</form>

Arbitrator
07-10-2007, 03:27 PM
thanks alot bro. it works now haven't code for awhile . :-)


<form name="form1" method="post" action="login.php">
<div align="left">
<p><span class="style6">Username:
</span>
<input style="margin:0px 0px -15px 0px" type="text" name="Username" id="Username">
</p>
<p><span class="style7">Password:
</span>
<input style="margin:0px 0px -5px 0px" type="text" name="Password" id="Password">
</p>
<p>
<input type="image" name="Login" src="images/btn.login.gif" id="Login" value="Submit">
</p>
</div>
</form>This code can be improved.


<form name="form1" method="post" action="login.php">
<div>
<label for="Username">Username:</label>
<input type="text" id="Username" name="Username">
</div>
<div>
<label for="Password">Password:</label>
<input type="password" id="Password" name="Password">
</div>
<div>
<input type="image" id="Login" name="Login" value="Submit" alt="Login" width="Ö" height="Ö" src="images/btn.login.gif">
</div>
</form>

Notes

Use id instead of name attributes on the form element.
Use label elements to mark form control labels.
Use the for attribute of label elements to associate them with their respective form control elements.
Use type="password" for password form controls.
Specify an alt attribute for form controls of type="image".
Specify the intrinsic width and height of images via the width and height attributes to optimize page load times.
Put CSS in an embedded (style element) or external (CSS file) style sheet instead of inline (style attribute).
Donít use p elements to mark up non‐paragraph content.
Donít use stylistic attributes such as align. Use CSS instead.
Use descriptive id and class attribute names instead of meaningless names like style6.
Use source code indentation to maximize readability.

ahallicks
07-10-2007, 06:08 PM
The default margins on the <p> tags are probably what were causing the problems in the first place. Using properly coded markup, and the correct tags for the correct elements would have saved you a lot of trouble. Read up about semantic code (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) and try to implement it in future (adding to the post above!)

truviet911
07-11-2007, 08:02 AM
This code can be improved.


<form name="form1" method="post" action="login.php">
<div>
<label for="Username">Username:</label>
<input type="text" id="Username" name="Username">
</div>
<div>
<label for="Password">Password:</label>
<input type="password" id="Password" name="Password">
</div>
<div>
<input type="image" id="Login" name="Login" value="Submit" alt="Login" width="Ö" height="Ö" src="images/btn.login.gif">
</div>
</form>

Notes

Use id instead of name attributes on the form element.
Use label elements to mark form control labels.
Use the for attribute of label elements to associate them with their respective form control elements.
Use type="password" for password form controls.
Specify an alt attribute for form controls of type="image".
Specify the intrinsic width and height of images via the width and height attributes to optimize page load times.
Put CSS in an embedded (style element) or external (CSS file) style sheet instead of inline (style attribute).
Donít use p elements to mark up non‐paragraph content.
Donít use stylistic attributes such as align. Use CSS instead.
Use descriptive id and class attribute names instead of meaningless names like style6.
Use source code indentation to maximize readability.


yea in dreamweaver has all those ready. hiih but i coded in notepad.:D by the way ur explaination is really nice.

_Aerospace_Eng_
07-11-2007, 08:33 PM
yea in dreamweaver has all those ready. hiih but i coded in notepad.:D

And? I can code in Dreamweaver or Notepad, doesn't matter and I still use the elements and attributes mentioned by Arbitrator. Using notepad isn't an excuse to why you have poorly written code.

VIPStephan
07-11-2007, 08:59 PM
And Dreamweaverís pre-made templates arenít a guarantee for well written code eitherÖ

_Aerospace_Eng_
07-11-2007, 09:02 PM
And Dreamweaverís pre-made templates arenít a guarantee for well written code eitherÖ

Agreed though with the release of CS3 they have gotten better.

VIPStephan
07-11-2007, 09:09 PM
Thatís true, yes (would be a poor new version if the wouldnít improve things :D). The problem with this spry stuff is, however, that every website is different and requires different approaches regarding semantics and itís really hard (if possible at all) to generate templates that are suited for every scenario. So I think good olí hand-welded code is still unsurpassable. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum