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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    submit button in css& html

    hi all,
    i have created one simple login form using html an css.in that login form how to change the position of the submit button to center, right and left.
    presently it is left now....
    where to change the position......
    below is my html code..
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamic Inline Form Validation Demo</title>
    <link rel="stylesheet" type="text/css" href="messages1.css" />
    <script type="text/javascript" src="messages1.js"></script>
    </head>
    <body>
    <div id="wrapper">
      <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
        <label for="name">User Name:</label>
        <input type="text" name="realname" id="name" />
    	<span id="realnameerror"></span>
        
    	<label for="email">Email Id:</label>
        <input type="text" name="email" id="email" />
    	<span id="emailerror"></span>
        
    	<label for="password">Password:</label>
        <input type="password" name="password" id="password" />
    	<span id="passworderror"></span>
    	
        <label for="repassword">Retype Password:</label>
        <input type="password" name="password2" id="password2" />
    	<span id="password2error"></span>
    	
    	<label for="phoneno">Phone no:</label>
        <input type="text" name="phoneno" id="phoneno" />
    	<span id="phonenoerror"></span>
    	
    	<input type="submit" value="Submit" class="submit" />
      </form>
    </div>
    </body>
    </html>
    below is the css for it.....
    Code:
    * 
    {
     margin:0; 
     padding:0;
    }
    
    body 
    {
      font:12px Verdana, Arial, Helvetica, sans-serif; 
      color:black;
    }
    
    #wrapper 
    {
      width:700px; 
      margin:50px auto;
    }
    
    .form 
    {
      float:left; 
      padding:10px 10px 10px 10px; 
      background:lightblue; 
      border:2px solid white;
    }
    
    .form label 
    {
      float:left; 
      width:130px; 
      padding:10px 10px 0 0; 
      font-weight:bold;
      text-align:right;
      clear:left;
    }
    
    .form span
    {
      float:left;
      margin-top:1em;
      margin-left:0.5em;
      color:red;
    }
    
    .form select 
    {
      float:left; 
      width:146px; 
      margin-top:10px;
    }
    
    .form input 
    {
      float:left; 
      margin-top:10px;
    }
    
    .form .submit 
    {
      clear:both;
    }
    
     #msg 
    {
      display:none; 
      position:absolute; 
      z-index:200; 
      background:url(images/msg_arrow.gif) left center no-repeat; 
      padding-left:7px;
    }
    #msgcontent 
    {
      display:block; 
      background:yellow; 
      border:2px solid orange; 
      border-left:none; 
      padding:5px; 
      min-width:150px; 
      max-width:250px;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Wrap your submit button in a DIV tags and use CSS's text-align property to align submit button according to your wish... like.. left, right or center


  •  

    Posting Permissions

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