JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



fields using css problem


R

keyboard_arrow_up
0
keyboard_arrow_down


First Post Mark as Spam ravi9510
Posts: 11 - Registered: 2011-08-09 07:42:13

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






JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising