SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adjusting form on page

    I just typed a simple form from my Sitepoint book, but it doesn't look like the book example.

    I'm looking for a way to be able to easily move it over to the left and maybe move it down as well so it so it is in the center of my page.

    I'm working on PHP now and just want a reasonably formatted form, but don't want to do much CSS today (i.e. don't send me to some tutorial!).

    Not sure if you want a screenshoot attached or my code?!


    TomTees

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Without attached code we can do absolutely nothing to help . A link would be preferable but posting full HTML/CSS will suffice as well .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the link or your CSS woulld be handy.

    Edit: Sorry was the same time Ryan

  4. #4
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Without attached code we can do absolutely nothing to help . A link would be preferable but posting full HTML/CSS will suffice as well .
    Here is what I have so far...

    index.php
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>User Registration Form</title>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<link rel="stylesheet" type="text/css" href="registration.css">
    	</head>
    	<body>
    		<h1>User Registration Form</h1>
    		<form method="post" action="registration.php">
    			<!-- Registration Fields -->
    			<div>
    				<label for="firstname">First Name:</label>
    				<input type="text" name="firstname" class="txt" id="firstname" />
    			</div>
    			<div>
    				<label for="lastname">Last Name:</label>
    				<input type="text" name="lastname" class="txt" id="lastname" />
    			</div>
    			<div>
    				<label for="email">E-mail:</label>
    				<input type="text" name="email" class="txt" id="email" />
    			</div>
    			<div>
    				<label for="email2">Re-enter E-mail:</label>
    				<input type="text" name="email2" class="txt" id="email2" />
    			</div>
    			<div>
    				<label for="password1">Password:</label>
    				<input type="password" name="password1" class="txt" id="password1" />
    			</div>
    			<div>
    				<label for="password2">Re-enter Password:</label>
    				<input type="password" name="password2" class="txt" id="password2" />
    			</div>
    			<!-- Submit button -->
    			<div>
    				<input type="submit" name="btnSubmit" value="Register" class="btn" id="btnSubmit" />
    			</div>
    		</form>
    	</body>
    </html>
    <?php
    /* 
     * To change this template, choose Tools | Templates
     * and open the template in the editor.
     */
     
    ?>


    registration.css
    Code CSS:
    h1 {
    		font: 1.2em Arial, Helvetica, sans-serif;
    }
     
    input.txt {
    	color: #00008B;
    	background-color: #E3F2F7;
    	border: 1px inset #00008B;
    	width: 200px;
    }
     
    input.btn {
    	color: #00008B;
    	background-color: #ADD8E6;
    	border: 1px outset #00008B;
    }
     
    form div {
    	clear: left;
    	margin: 0;
    	padding: 0;
    	padding-top: 0.6em;
    }
     
    form div label {
    	float: left;
    	width: 40%;
    	font: bold 0.9em Arial, Helvetica, sans-serif;
    }

    I've been reading HTML/CSS books on and off over the last year but haven't internalized things much.

    Need to focus on PHP for now.

    Will come back to my Head First and Sitepoint books if I can get my backend website working.

    In the meantime, some HTML/CSS help would, well, help!



    TomTees

    P.S. Why doesn't Sitepoint make the code boxes wider so people don't have to scroll left/right?! That is sooo annoying!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, your labels are width:40&#37;. Since no parent has a width it will be 40% of the viewport. The label is much too wide. Lower the width on the label, or set a width on the <form> to make the calculated 40% width on the label smaller (aka if the viewport is 1000px wide, and the label has the 40% width, it will be 400px wide.) Make the form element smaller then 1000px to make it the desired width

    Or just change the label width. Whatever floats your boat

    Your post wasn't all that clear on what else you wanted moved?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what you've got is wrong markup. you have html 4.01 strict DTD but use the self closing tag feature for empty elements that belongs to an xhtml markup. start with that

  7. #7
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, your labels are width:40%. Since no parent has a width it will be 40% of the viewport. The label is much too wide. Lower the width on the label, or set a width on the <form> to make the calculated 40% width on the label smaller (aka if the viewport is 1000px wide, and the label has the 40% width, it will be 400px wide.) Make the form element smaller then 1000px to make it the desired width

    Or just change the label width. Whatever floats your boat

    Your post wasn't all that clear on what else you wanted moved?
    How can I make the form smaller and centered?

    I added

    Code CSS:
    width: 70%;


    TomTees

  8. #8
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    Quote Originally Posted by noonnope View Post
    what you've got is wrong markup. you have html 4.01 strict DTD but use the self closing tag feature for empty elements that belongs to an xhtml markup. start with that
    So which is better...

    From my Sitepoint book:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml" lang="en-US">
    	<head>
    		<title>User Registration Form</title>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<link rel="stylesheet" type="text/css" href="registration.css">
    	</head>
    	<body>
    	</body>
    </html>

    From the NetBeans template:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>User Registration Form</title>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		<link rel="stylesheet" type="text/css" href="registration.css">
    	</head>
    	<body>
    	</body>
    </html>
    I never understand all the nuances of the HTML headers...



    TomTees

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just because it comes from a sitepoint book doesn't mean you shouild use it (sorry SP! )

    You shouldn't ever use an XHTML doctype unless you plan on serving the mime type as XHTML because otherwise you are basically just using fake XHTML (if you were eto serve the mime type for XHTML then it wouldn't work in IE)

    I prefer to stick with HTML 4.01 strict and code by those standards.

    To answer your question, I'd typically go for the netbeans doctype, however it depends on how you code the rest of your page
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Just because it comes from a sitepoint book doesn't mean you shouild use it (sorry SP! )

    You shouldn't ever use an XHTML doctype unless you plan on serving the mime type as XHTML because otherwise you are basically just using fake XHTML (if you were eto serve the mime type for XHTML then it wouldn't work in IE)

    I prefer to stick with HTML 4.01 strict and code by those standards.

    To answer your question, I'd typically go for the netbeans doctype, however it depends on how you code the rest of your page
    So my code above from NetBeans was okay?

    How about my question on centering things left to right?

    And to address another posters question, I was also curious how to center or at least move down my form so it is centered more vertically.



    TomTees

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well..if the forms the only thing on the page and there no height set on it try this.

    If you want it centered horizontally, then apply a width to the <form> element (aka width:50&#37; or something) and hten give margin:0 auto .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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