Form alignment.. wth right side submit buttoni

**shahzadsiddiqui8** · Oct 10, 2011 23:33

Dear All I am making a simple form with 2 fields Name and Email and I want my submit button (img.) right side of this 2 fields in middle, plz. find here with image of my form..subscribeform.jpg submit.png

I am using HTML:
<form action="" name="subscribe" id="subscribe">
<p class="subs_heading">Subscribe our News Letter </p>
<label>Name

/label> <input type="text" /> <br />

<label>Email: </label> <input type="text" />
<input type="image" value="submit" src="submit.png" class="submit" />
</form>

CSS:
.subs_heading {color:#fff; font-family:Tahoma; font-size:16px; padding-left:20px; font-weight:bolder; height:20px; width:250px; text-align:center;}
label{display:block; padding:5px 0 0 0px; width:80px; border:solid 0px #000; margin:0 0 0 0px; float:left; color:#fff; text-align:left;}
input{border:solid 1px #dddddd; margin:0 0 10px 0px; padding:5px; color:#bbbbbb; width:150px; float:left;}
.submit{
position:absolute;
display:block;
width:78px;
height:36px;
}

Please let me know where i am doing something wrong to align this button in right side..

**ralph.m** · Oct 11, 2011 08:10

This is really rough, and not the best way, but may help a bit:

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
* {margin: 0; padding: 0;}
body {font-family: arial, sans-serif;}
.subs_heading {color:#fff; font-family:Tahoma; font-size:16px; padding-left:20px; font-weight:bolder; height:20px; width:250px; text-align:center;}
label{font-size: 1.125em; width: 64px; clear: left;display:block; padding:5px 0 0 0px; border:solid 0px #000; margin:0 0 0 0px; float:left; color:#fff; text-align:left;}
input{margin:0 0 10px 0px; padding:5px; color:#bbbbbb; float:left; border: none;}
.submit{position:absolute; left: 350px; top: 30px; width: 75px; height: 35px; border-radius: 12px; background: white; }
form {position:relative; background: #4b5360; border-radius: 12px; overflow: hidden; width: 400px; padding: 4px 30px; }
input[type="text"] {width: 230px;}
</style>
	
</head>


<body>
<form action="" name="subscribe" id="subscribe">
  <p class="subs_heading">Subscribe our News Letter </p>
  <label>Name:</label> <input type="text" /> <br />
  <label>Email: </label> <input type="text" />
  <input type="image" value="submit" src="submit.png" class="submit" /> 	
</form>
</body>

</html>

**Stomme poes** · Nov 25, 2011 05:00

Shame shame ralph. P instead of a legend? * {padding: 0;}? oooh ooh, you're getting coal in your stockings this year :)

**ralph.m** · Nov 25, 2011 06:40

Originally Posted by Stomme poes

Shame shame ralph. P instead of a legend? * {padding: 0;}? oooh ooh, you're getting coal in your stockings this year

I have so much P in my stockings already that a bit of coal might be helpful. My focus was on knocking the main CSS into shape.

**Stomme poes** · Nov 25, 2011 08:50

Actually, I never understood why people in the 1800s would be unhappy to get free fuel for Christmas.

Today Santa gives out free tanks of gas to evildoers : )

**Hueij** · Nov 25, 2011 09:01

Wouldn't that get messy?

**Stomme poes** · Nov 25, 2011 15:21

I'm sure they'd come in brightly-coloured Christmas-red plastic gasoline containers. With little green ribbons on top.

User Tag List

Thread: Form alignment.. wth right side submit buttoni

Thread Tools

Display

Form alignment.. wth right side submit buttoni

Bookmarks

Bookmarks

Posting Permissions