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…
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…
ralphm
October 11, 2011, 2:10pm
2
This is really rough, and not the best way, but may help a bit:
<!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>
Shame shame ralph. P instead of a legend? * {padding: 0;}? oooh ooh, you’re getting coal in your stockings this year
ralphm
November 25, 2011, 12:40pm
4
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.
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 : )
I’m sure they’d come in brightly-coloured Christmas-red plastic gasoline containers. With little green ribbons on top.