PDA

View Full Version : What is the right CSS for this HTML



noel.groom
Apr 27th, 2010, 10:04 PM
If I have code like this that can not be changed:


<div class="form-item" id="edit-last-wrapper">
<label for="edit-last">Last: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="30" name="last" id="edit-last" size="20" value="" class="form-text required" />
</div>

what would be some good css technique to go from:

Last: *
[text field]

to:

Last: * [text field]

nikee
Apr 27th, 2010, 10:22 PM
.form-item label, .form-item input {
float: left;
}

That'll do it.

met
Apr 27th, 2010, 10:23 PM
#edit-last-wrapper { overflow:auto; }
#edit-last-wrapper label, #edit-last-wrapper input{ float:left; }


edit ~ although you'll want a way of separating each labe/input else they'll all be in one line

i prefer using unordered lists to structure each line, <p> or <div> can work just as well.

>http://articles.sitepoint.com/article/fancy-form-design-css/2 is good

noel.groom
Apr 28th, 2010, 02:58 PM
Thanks a bunch :D That info helps a lot!

nikee
Apr 28th, 2010, 04:35 PM
Thanks a bunch :D That info helps a lot!
If my answer helped you, please click "thank user for this useful post" on my post. Thank you!