Css format

HTML & CSS
1

hi all,
i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
how to display the 5th field in correct format…below is the code i have written in css…

if there are more than 4 fields tell me how to display all in correct format.

    .form label 
     {
       float:left; 
       width:100px; 
       padding:10px 10px 0 10px 0; 
       font-weight:bold;
    }
2

You’ll need to show us your full HTML and CSS for us to be able to help with this. When you say you get an error, what do you mean? Is the form field not displaying the way you want, or are you getting a PHP error?

3

The first thing i can see is you have 5 values in your padding property which only accepts 4 values which are (top, right, bottom and left), also without a link to your page it’s hard to diagnose any issues occurring with your page.

EDIT: You beat me again ralph :slight_smile:

4

here is my complete css code and html code.
in html i have 5 fields username,email id,password,retype password and
phone no.i have to display them in order as it is common in many pages.but my last field(phone no) is not correctly fitting in the
.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px 0;
font-weight:bold;
}
i am getting doubt in the above code only tell me what to do to get the correct format


* 
{
 margin:0; 
 padding:0
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:#666
}

#wrapper 
{
  width:300px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:0 10px 10px 10px 10px; 
  background:#f3f3f3; 
  border:2px solid #cfcfcf;
}

.form label 
{
  float:left; 
  width:100px; 
  padding:10px 10px 0 10px 0; 
  font-weight:bold;
}

.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:#f3e6e6; 
  border:2px solid #924949; 
  border-left:none; 
  padding:5px; 
  min-width:150px; 
  max-width:250px;
}

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>
<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="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
    <label for="name">Full Name:</label>
    <input type="text" name="name" id="name" />
    
	<label for="email">Email Address:</label>
    <input type="text" name="email" id="email" />
    
	<label for="password">Password:</label>
    <input type="text" name="password" id="password" />
	
    <label for="repassword">Retype Password:</label>
    <input type="text" name="repassword" id="repassword" />
	
	<label for="phoneno">Phone no:</label>
    <input type="text" name="phoneno" id="phoneno" />
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>
5

s i have 5 fields to display but i have only in padding property only 4
what to do to accept 5 or more than 5.

6

The only problem I see is that you need to add clear: left to your labels (red) and you need to fix the padding values (blue), as SgtLegend said:

.form label 
{
  float:left; 
  width:100px; 
  [COLOR="blue"]padding:10px 10px 0 0;[/COLOR] 
  font-weight:bold;
 [COLOR="Red"] clear:left;[/COLOR]
}

.form 
{
  float:left; 
  [COLOR="blue"]padding: 10px; [/COLOR]
  background:#f3f3f3; 
  border:2px solid #cfcfcf;
}
7

I think you have a misunderstanding of how the padding property works, padding applies to the inside of an element and all elements based on the selector in the CSS. In your case the selector is .form label, if we are to set

.form label {
    padding: 10px 10px 0 10px;
}

This will set the top, right and left padding for all the label elements on the page that are within the element that contains the class .form. To fix the issue you are having with the phone no all you need to do is simply add the clear property with a value of left so the label elements clear the padding of the previous label.

.form label {
    clear: left;
    float: left;
    width: 100px;
    padding: 10px 10px 0 10px;
    font-weight: bold;
}

EDIT: ralph with the post win again, your getting good at this :smiley:

8

i need to increase my form value in
.form
{
float:left;
padding:0 10px 10px 10px;
background:#f3f3f3;
border:2px solid #cfcfcf;
}
field tell me how to change it because retype password field in not in correct position to its text box.
also i need colons in each field to be displayed in correct manner like

 username            :textbox
 email id               :
 password            : 
 Retype password  :
 phone no            :

twll me how to do it…

9

how to change the length of the form field
so that retype password should be in single line…
and colons in each field should display in same way one after other