Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: white space

  1. #1
    New Coder
    Join Date
    Sep 2004
    Location
    California
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    white space

    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.


    <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>
    Last edited by truviet911; 07-10-2007 at 01:37 AM.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Can you post the CSS also?
    .
    .

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Why do you have inputs outside of your form tags? And why do you have to form tags when you only need one?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Sep 2004
    Location
    California
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jutlander View Post
    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 .

  • #5
    New Coder
    Join Date
    Sep 2004
    Location
    California
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Add margins or padding to position the elements of the form.

    To move an element up 5 px
    {margin-top: -5px;}
    {margin-bottom: 5px;}
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #7
    New Coder
    Join Date
    Sep 2004
    Location
    California
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by truviet911; 07-10-2007 at 05:01 AM.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by truviet911 View Post
    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.

    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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 and try to implement it in future (adding to the post above!)
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    New Coder
    Join Date
    Sep 2004
    Location
    California
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    This code can be improved.

    Code:
    <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. by the way ur explaination is really nice.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by truviet911 View Post
    yea in dreamweaver has all those ready. hiih but i coded in notepad.
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    And Dreamweaver’s pre-made templates aren’t a guarantee for well written code either…

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    That’s true, yes (would be a poor new version if the wouldn’t improve things ). 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •