fields using css problem

**ravi951** · Aug 11th, 2011, 05:57 AM

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;
}

**kows** · Aug 11th, 2011, 10:17 AM

because you're positioning the colon absolutely. the following lines say that any <span> elements inside of a <label> element inside of an element with the class "form" should be positioned absolutely -- 5 pixels from the right edge and 0 pixels from the top edge:

Code:

.form label span
{
  position:absolute;
  top:0;
  right:5px;
  color:black;
}

Since you want the colons to be higher (right?), you can change the top property to move it up or down however you need to.

Thread: fields using css problem

Thread Tools

Display

fields using css problem

Re: fields using css problem

Posting Permissions