...

View Full Version : field values in css



ravi9510
08-11-2011, 01:32 PM
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.......


<!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.......


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

resdog
08-11-2011, 02:33 PM
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:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum