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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help centering a form

    hello - this is probably a dumb question for most of you, but I really don't have any programming experience, but I'm trying to make a site look nice. I've attached a file for a registration form. I'm trying to get the form to appear centered on the screen, but with the form elements still aligned in a block. Can anyone help? If you need the code from other supporting files, just let me know and I'll post them. THANKS!

    Code:
    <?php include_once('classes/signup.class.php'); ?>
    <?php include_once('header.php'); ?>
    
    <div class="row">
    	<div class="span6">
    		<form class="form-horizontal" method="post" action="sign_up.php" id="sign-up-form">
    			<fieldset>
    				<div class="control-group">
    					<label class="control-label" for="name"><?php _e('Full name'); ?></label>
    					<div class="controls">
    						<input type="text" class="input-xlarge" id="name" name="name" value="<?php echo $signUp->getPost('name'); ?>" placeholder="<?php _e('Full name'); ?>">
    					</div>
    				</div>
    				<div class="control-group" id="usrCheck">
    					<label class="control-label" for="username"><?php _e('Username'); ?></label>				
    					<div class="controls">
    						<input type="text" class="input-xlarge" id="username" name="username" maxlength="15" value="<?php echo $signUp->getPost('username'); ?>" placeholder="<?php _e('Choose your username'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="password"><?php _e('Password'); ?></label>				
    					<div class="controls">
    						<input type="password" class="input-xlarge" id="password" name="password" placeholder="<?php _e('Create a password'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="password_confirm"><?php _e('Password again'); ?></label>				
    					<div class="controls">
    						<input type="password" class="input-xlarge" id="password_confirm" name="password_confirm" placeholder="<?php _e('Confirm your password'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="email"><?php _e('Email'); ?></label>				
    					<div class="controls">
    						<input type="email" class="input-xlarge" id="email" name="email" value="<?php echo $signUp->getPost('email'); ?>" placeholder="<?php _e('Email'); ?>">
    					</div>
    				</div>
    
    				<div class="control-group">
    					<?php $signUp->profileSignUpFields(); ?>
    				</div>
    				
    				<div class="control-group">
    					<?php $signUp->doCaptcha(true); ?>
    				</div>
    
    			</fieldset>
    			<input type="hidden" name="token" value="<?php echo $_SESSION['jigowatt']['token']; ?>"/>
    			<button type="submit" class="btn btn-primary"><?php _e('Create my account'); ?></button>
    		</form>
    	</div>
    	
    
    <?php include_once('footer.php'); ?>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Ca we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Ca we have a link to your page?
    I don't even have the page up yet. But if you go to the developer's website, and look at the live demo, you can see what the page looks like. It's at http://codecanyon.net/item/php-login..._preview/49008. Then, click the "Sign In" link, and then click the "Join Today" link. You'll see the form on this page. On my file, I've removed the placeholder text that appears on the right side of the page, and for some reason the header and footer doesn't appear on my page, but that's ok with me. All I really want to do is center the form in the middle of the screen rather than having it stay on the left.

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Detroit, MI
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post
    The beginning <div> for your form has a class assigned to it named "row" however i don't know what your css looks like for that class so I can't tell you if you can just adjust that code or what, but if you change the code in that page to the written code below, it will center the form for you within whatever space it's living in. I've set the width to 250px though so you'll need to adjust based on what your preference is.

    Code:
    <?php include_once('classes/signup.class.php'); ?>
    <?php include_once('header.php'); ?>
    
    <div class="row" style="margin:auto; width:250px;">
    	<div class="span6">
    		<form class="form-horizontal" method="post" action="sign_up.php" id="sign-up-form">
    			<fieldset>
    				<div class="control-group">
    					<label class="control-label" for="name"><?php _e('Full name'); ?></label>
    					<div class="controls">
    						<input type="text" class="input-xlarge" id="name" name="name" value="<?php echo $signUp->getPost('name'); ?>" placeholder="<?php _e('Full name'); ?>">
    					</div>
    				</div>
    				<div class="control-group" id="usrCheck">
    					<label class="control-label" for="username"><?php _e('Username'); ?></label>				
    					<div class="controls">
    						<input type="text" class="input-xlarge" id="username" name="username" maxlength="15" value="<?php echo $signUp->getPost('username'); ?>" placeholder="<?php _e('Choose your username'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="password"><?php _e('Password'); ?></label>				
    					<div class="controls">
    						<input type="password" class="input-xlarge" id="password" name="password" placeholder="<?php _e('Create a password'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="password_confirm"><?php _e('Password again'); ?></label>				
    					<div class="controls">
    						<input type="password" class="input-xlarge" id="password_confirm" name="password_confirm" placeholder="<?php _e('Confirm your password'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="email"><?php _e('Email'); ?></label>				
    					<div class="controls">
    						<input type="email" class="input-xlarge" id="email" name="email" value="<?php echo $signUp->getPost('email'); ?>" placeholder="<?php _e('Email'); ?>">
    					</div>
    				</div>
    
    				<div class="control-group">
    					<?php $signUp->profileSignUpFields(); ?>
    				</div>
    				
    				<div class="control-group">
    					<?php $signUp->doCaptcha(true); ?>
    				</div>
    
    			</fieldset>
    			<input type="hidden" name="token" value="<?php echo $_SESSION['jigowatt']['token']; ?>"/>
    			<button type="submit" class="btn btn-primary"><?php _e('Create my account'); ?></button>
    		</form>
    	</div>
    	
    
    <?php include_once('footer.php'); ?>
    However, you may want to assign the DIV an ID in your CSS to keep it separated. for example:

    Code:
    #registrationform {
    margin:auto;
    width:250px;
    }
    Then replace the code to be:

    Code:
    <?php include_once('classes/signup.class.php'); ?>
    <?php include_once('header.php'); ?>
    
    <div id="registrationform" class="row" >
    	<div class="span6" >
    		<form class="form-horizontal" method="post" action="sign_up.php" id="sign-up-form">
    			<fieldset>
    				<div class="control-group">
    					<label class="control-label" for="name"><?php _e('Full name'); ?></label>
    					<div class="controls">
    						<input type="text" class="input-xlarge" id="name" name="name" value="<?php echo $signUp->getPost('name'); ?>" placeholder="<?php _e('Full name'); ?>">
    					</div>
    				</div>
    				<div class="control-group" id="usrCheck">
    					<label class="control-label" for="username"><?php _e('Username'); ?></label>				
    					<div class="controls">
    						<input type="text" class="input-xlarge" id="username" name="username" maxlength="15" value="<?php echo $signUp->getPost('username'); ?>" placeholder="<?php _e('Choose your username'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="password"><?php _e('Password'); ?></label>				
    					<div class="controls">
    						<input type="password" class="input-xlarge" id="password" name="password" placeholder="<?php _e('Create a password'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="password_confirm"><?php _e('Password again'); ?></label>				
    					<div class="controls">
    						<input type="password" class="input-xlarge" id="password_confirm" name="password_confirm" placeholder="<?php _e('Confirm your password'); ?>">
    					</div>
    				</div>
    				<div class="control-group">
    					<label class="control-label" for="email"><?php _e('Email'); ?></label>				
    					<div class="controls">
    						<input type="email" class="input-xlarge" id="email" name="email" value="<?php echo $signUp->getPost('email'); ?>" placeholder="<?php _e('Email'); ?>">
    					</div>
    				</div>
    
    				<div class="control-group">
    					<?php $signUp->profileSignUpFields(); ?>
    				</div>
    				
    				<div class="control-group">
    					<?php $signUp->doCaptcha(true); ?>
    				</div>
    
    			</fieldset>
    			<input type="hidden" name="token" value="<?php echo $_SESSION['jigowatt']['token']; ?>"/>
    			<button type="submit" class="btn btn-primary"><?php _e('Create my account'); ?></button>
    		</form>
    	</div>
    
    
    <?php include_once('footer.php'); ?>
    Make sense?

    Also the class="row", depending on what it's code is within your CSS, may throw some things off, i'm not sure if you need it, try removing that portion of the code if you're still having issues and just leave the <div id="registrationform"> or <div style="margin:auto; width:250px;">
    Last edited by kelisaid; 12-19-2012 at 02:00 PM.


  •  

    Posting Permissions

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