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

    field values in css

    hi all,
    i have created one simple login form with 5 fields as shown below.
    my fields are not in straight line with their corresponding colons.my fields are slightly above their corresponding colons.
    kindly tell me how to make fields with their corrresponding colons as equal.
    means like the below one...
    Username :

    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>
    <h1>Login Form </h1>
    <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<span>:</span></label>
        <input type="text"  name="realname" id="name" />
    	<span id="realnameerror"></span>
        
    	<label for="email">Email Id<span>:</span></label>
        <input type="text"  name="email" id="email" />
    	<span id="emailerror"></span>
        
    	<label for="password">Password<span>:</span></label>
        <input type="password"  name="password" id="password"  >
    	<span id="passworderror"></span>
    	
        <label for="repassword">Retype Password<span>:</span></label>
        <input type="password"  name="password2" id="password2" >
    	<span id="password2error"></span>
    	
    	<label for="phoneno">Phone no<span>:</span></label>
        <input type="text"  name="phoneno" id="phoneno" maxlength="10" />
    	<span id="phonenoerror"></span>
    	
    	<input type="submit" value="Submit" class="submit" />
      </form>
    </div>
    </body>
    </html>
    below is my css code.......
    Code:
    * 
    {
     margin:5; 
     padding:5;
    }
    
    body 
    {
      font:12px Verdana, Arial, Helvetica, sans-serif; 
      color:black;
    }
    
    #wrapper 
    { 
      width:800px; 
      margin:50px auto;
    }
    
    .form 
    {
      float:left; 
      padding:10px 10px 10px 10px; 
      background:lightblue; 
      border:10px white;
     }
    
    .form label 
    {
      position:relative;
      float:left; 
      width:140px; 
      padding:10px 10px 0px 5px;
      font-weight:bold;
      clear:left;
    }
    
    .form label span
    {
      position:absolute;
      top:0;
      right:5px;
      color:black;
    }  
    
    .form span
    {
      float:left;
      margin-top:1em;
      margin-left:0.5em;
      color:red;
    }
    
    .form select 
    {
      float:left; 
      width:146px;
      margin-top:10px;
    }
    
    .form input 
    { 
      width:11em;
      float:left; 
      margin-top:10px;
    }
    
    .form .submit 
    {
        width:auto;
        clear:both;
    }

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Your labels are above the input boxes because they are aligned to the top of the input fields. If the labels will always be on one line, you can just adjust your padding:

    Code:
    .form label {
        clear: left;
        float: left;
        font-weight: bold;
        padding: 12px 10px 0 5px;
        position: relative;
        width: 140px;
    }


  •  

    Posting Permissions

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