...
PDA

Aligning form fields

wright67uk
06-11-2012, 10:31 PM
Can anybody share some advice on how I can align my text with my form fields. This is what I have;


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#midright1 {width:205px; height:130px; margin-bottom:10px; margin-left:10px; padding:5px; font-size:100%; clear:both; }
.emailtext {margin-top:16px;}
.firstname {margin-right:6px; float:right; }
.email {margin-right:6px; float:right; margin-bottom:4px; margin-top:4px;}
</style>

</head>

<body>

<div id="midright1">
<span style="font-weight: bold;">Free Report</span><hr />why do my form fields not align?<br /><br />
<span style="font-weight: bold;">Name </span> <input type="text" name="firstname" class="firstname"/><br/>
<span style="font-weight: bold" class="emailtext";>Email</span> <input type="text" name="email" class="email" /> <input type="submit" value="submit" /></div>
</body>
</html>
SeattleMicah
06-11-2012, 10:53 PM
no css


<div id="midright1">
<span style="font-weight: bold;">Free Report</span> why do my form fields not align?<br>
<strong>Name:</strong><input type="text" name="firstname" class="firstname"/><br>
<strong>Email:</strong><input type="text" name="email" class="email"/> <input type="submit" value="submit" />
</div>
wright67uk
06-12-2012, 05:26 AM
Im not really sure what is meant by your answer.
I need to use CSS to posistion the field boxes to where I want them.

Now my task is to alight the text so that they are level with the boxes.
Will Bontrager
06-12-2012, 03:11 PM
Looks like .firstname needs float:left instead of float:right, clear:both removed from #midright1 and used instead in a div between table rows, .emailtext needs float:left, and both type="text" input fields float:right. That is, if I understand what you are trying to accomplish.

Something like this might work.

<!-- inline CSS can be transferred to style sheet -->
<div style="width:205px;">
<div style="float:left; padding-top:3px;">Name:</div>
<div style="float:right;"><input type="text" style="width:150px;"></div>
<div style="clear:both; height:4px;"></div>
<div style="float:left; padding-top:3px;">Email:</div>
<div style="float:right;"><input type="text" style="width:150px;"></div>
<div style="clear:both;"></div>
<input type="submit" style="margin-top:4px;">
</div>


Will
abduraooft
06-12-2012, 03:47 PM
Have a look at http://www.alistapart.com/articles/prettyaccessibleforms

That will help you to setup an accessible form too.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum