Form layout styling with CSS

You can style forms using CSS and definition lists instead of tables. This has only been tested in IE6 and Firefox. As a basis I define the form in HTML as follows:

<fieldset class="form">
 <legend>Add Contact</legend>
 <dl>
  <dt>Forename: </dt>
  <dd><input type="text" name="forename" id="forename" /></dd>
  <dt>Surname: </dt>
  <dd><input type="text" name="surname" id="surname" /></dd>
  <dt>Email: </dt>
  <dd><input type="text" name="email" id="email" /></dd>
  <dt></dt>
  <dd><input type="submit" value="Add" /></dd>
 </dl>
</fieldset>

And the CSS:

fieldset.form {
 width: 95%;
 border: 1px dotted #ccc;
 padding: 12px;
}

fieldset.form legend {
 font-weight: bold;
 background: #fff;
}

fieldset.form dl {
 float: left;
 clear: both;
}

fieldset.form dl dt {
 clear: left;
 float: left;
 width: 110px;
 margin: .5em 0;
 text-align: right;
}

fieldset.form dl dd {
 margin: .5em 0;
 float: left;
 padding: 0 0 0 4px;
}

* html fieldset.form dl dd {
 float: none;
 margin: .5em 0 0 0;
}

fieldset.form dl dt is the definition for the label accompanying an input control. It has a fixed width and is right-aligned. fieldset.form dl dd is the input control next to the label. The * html fieldset.form dl dd is used to fix a few bugs in IE - without it, the input controls are not next to the labels, and the seperation between items is greater than it should be.

Sample:

Add Contact
Forename:
Surname:
Email:

Tags: ,

Comments

Post a Comment

Popular posts from this blog

Text Clips for Programmers Notepad 2 (XHTML)

Update (23 June, 2005) : Added DOCTYPEs. More Programmers Notepad 2 text clips. Some tags are not included (b, big, i, small, sub, sup) as these can be replaced with existing tags (em, strong), or styled using CSS. Create a file in the clips sub directory of the Programmers Notepad directory, with the extension .clips (i.e. xhtmltags.clips) and paste in the following code: <?xml version="1.0"?> <clips name="XHTML Tags"> <clip name="------ DOCTYPEs ------"></clip> <clip name="XHTML 1.0 transitional"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">|]]></clip> <clip name="XHTML 1.0 strict"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">|]]></clip> <clip name="XHTML 1.1...
Read more

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Read more

Select box manipulation with jQuery

If you read the jQuery mailing list , you may be aware that I have updated my plugins for working with select boxes . Summary of changes: addOption replaces any options with the same value (so think of it as an add/replace options plugin selectOptions selected options in addition to what was already selected, but there is now an option for it not to do this There are two new methods: copyOptions which is for copying options between select boxes ajaxAddOption allows you to add options via AJAX (i.e. could be used for create options dynamically from a server script)
Read more