HI,

I try to align form box with css but not working. I can do with table but want to learn with css.

 

<form id="form1" name="form1" method="post" action="send.php">
 <p>Last  name:                             

   <input name="lastname" type="text" id="lastname" size="30" maxlength="50" />
 </p>


 <p>First  name:                            
   <input name="firstname" type="text" id="firstname" size="30" maxlength="50" />
 </p>
 <p>Email:                                      
   <input name="email" type="text" id="email" size="30" maxlength="50" />
 </p>

 

I use

#lastname, #firstname, #telephone, #email{

 

margin-left: 100px;

}

But still not line up, how can I do?

Hi there!

 

P tags are not really what you want to use, here is a link to a simple page explaining fieldsets, legends, and labels with CSS too.

 

http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html

 

so something like;

...

 

<form id="form1" name="form1" method="post" action="send.php">

<fieldset>

<legend>Send Message</legend>

<label for="lastname">Last name:</label>                             

<input name="lastname" type="text" id="lastname" size="30" maxlength="50" />

 

<label for="firstname">First name:</label>                            

<input name="firstname" type="text" id="firstname" size="30" maxlength="50" />

 

<label for="email">Email:</label>                                     

<input name="email" type="text" id="email" size="30" maxlength="50" />

</fieldset>

</form>

...

 

good luck!

MikeyB

 

HI,

I try to align form box with css but not working. I can do with table but want to learn with css.

 

<form id="form1" name="form1" method="post" action="send.php">
 <p>Last  name:                             

   <input name="lastname" type="text" id="lastname" size="30" maxlength="50" />
 </p>


 <p>First  name:                            
   <input name="firstname" type="text" id="firstname" size="30" maxlength="50" />
 </p>
 <p>Email:                                      
   <input name="email" type="text" id="email" size="30" maxlength="50" />
 </p>

 

I use

#lastname, #firstname, #telephone, #email{

 

margin-left: 100px;

}

But still not line up, how can I do?

Sorry, See below.

Edited May 6, 201016 yr by welshhuw

Give your input tags a class. eg

 

<input name="lastname" type="text" id="lastname" size="30" maxlength="50" class="inputbox" />

First name:

<input name="firstname" type="text" id="firstname" size="30" maxlength="50" class="inputbox" />

Email:

<input name="email" type="text" id="email" size="30" maxlength="50" class="inputbox" />

 

in your CSS:

.inputbox { margin-left: 100px; }

 

But do, take a look at the link above as you should add Fieldset/s, labels and legends(if needed.).

 

Best of luck.