...

View Full Version : Vertical Rhythm and Form Elements



fortheloveof_d
10-10-2007, 03:57 AM
Anyone have any thoughts on vertical rhythm and form elemts?

Is inconsistency between browsers so great that it's not worth trying to work out?

I have the following html and css if anyone wants to give there opinion. It is based off of the article by Richard Rutter (http://24ways.org/2006/compose-to-a-vertical-rhythm).

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>
<body id="index">

<div id="wrapper">

<div id="left">
<h1>Heading h1</h1>
<img src="img/sample.jpg" style="float: left;"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2>Heading h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h3>Heading h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="right">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</li>
<li>Item 5</li>
</ul>
<dl>
<dt>Term 1:</dt><dd> Definition 1</dd>
<dt>Term 2:</dt><dd> Definition 2</dd>
<dt>Term 3:</dt><dd> Definition 3</dd>
</dl>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</div>
<div id="footer">
<table border="0" cellspacing="0" cellpadding="0">
<tr><th>Header</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>Data</td><td>Data 2</td><td>Data 3</td></tr>
<tr><td>Data</td><td>Data 2</td><td>Data 3</td></tr>
</table>
<p><a href="#">Test link</a></p>
<fieldset>
<legend>Form Legend 1</legend>
<form action="index_submit" method="get" accept-charset="utf-8">
<label for="input1">Input 1:</label><input type="text" name="input1" value="" id="input1" />
<label for="input2">Input 2:</label><input type="text" name="input2" value="" id="input2" />
<label for="textarea1">Text Area 1:</label><textarea name="textarea1" id="textarea1" rows="6" cols="20"></textarea>
<input type="radio" name="radio1" value="" id="radio1" /><label for="radio1" class="radio">Radio 1</label>
<input type="radio" name="radio2" value="" id="radio2" /><label for="radio2" class="radio">Radio 2</label>
<input type="checkbox" name="checkbox1" value="" id="checkbox1" /><label for="checkbox1" class="checkbox">Checkbox 1</label>
<input type="checkbox" name="checkbox2" value="" id="checkbox2" /><label for="checkbox2" class="checkbox">Checkbox 2</label>
<input type="checkbox" name="checkbox3" value="" id="checkbox3" /><label for="checkbox3" class="checkbox">Checkbox 3</label>
<input type="submit" value="Continue" />
</form>
</fieldset>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

</body>
</html>


css:

/* @group resets */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { margin: 0; padding: 0; border: none; }
ul, ol, dl, li, dt, dd { list-style-type: none; }
li, dt { background: url(../img/bullet-arrow.png) no-repeat 0 .208em; padding-left: 1.3em; }
img { border: 1px solid #ccc; padding: .8333em; background-color: #fff; margin-right: .8333em; }
fieldset { }
label { display: block; }
input[type="text"], textarea { border-left: 2px solid #999; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 2px solid #999; padding-left: 0.41666666667em; }
input[type="text"]:focus, textarea:focus { background-color: #fff7e9; }
input[type="radio"], input[type="checkbox"] { width: auto; height: auto; float: left; clear: both; margin-top: 0.15em; margin-bottom: 0em; padding: 0; }
input[type="submit"] { padding: .2em; display: block; clear: both; }
textarea { width: 21.66666666667em; height: 7.8333em; }

/* @end */


/* @group typography */
body { font: 75% "Lucida Grande", Verdana, sans-serif; }
html>body { font-size: 12px; } /*=FILTER: to set font size in pixels in non-ie browsers*/
p, ul, ol, dl, table { margin-top: 1.5em; margin-bottom: 3em; line-height: 1.5em; }
p, li, dt, dd, td, th { font-size: 1em; }
li ul { margin-top: 0; margin-bottom: 0; }
h1 { font-size: 1.5em; line-height: 1em; margin-top: 0; margin-bottom: 1em; }
h2 { font-size: 1.1667em; line-height: 1.286em; margin-top: 1.1929em; margin-bottom: 0.643em; }
h3 { font-size: 1em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; }
legend { font-size: 1.1667em; margin-bottom: 1.286em; height: 1.286em; line-height: 1.286em; }
label { font-size: 1em; line-height: 1.5em; margin-bottom: 0; }
input[type="text"] { font-size: 1em; line-height: 1.5em; margin-bottom: 1.333em; }
input[type="submit"] { font-size: 1.1667em; line-height: 1.286em; margin-bottom: 0.626em; margin-top: 1.286em;}
textarea { margin-bottom: 1.5em; }
p.small { font-size: .8333em; margin-bottom: 1.8em; margin-top: 1.8em; line-height: 1.8em; }

/* @end */


/* @group color */
html { color: #333; }
#right { background-color: #f6f6f6; }

/* @end */


/* @group layout */
body { margin: 3em 6em; }
div#wrapper { width: 60em; position: relative; left: 50%; margin-left: -30em; }
div#left { float: left; width: 30em; }
div#right { float: right; width: 15em; }
div#right li, div#right dt, div#right dd { background-color: #f6f6f6; margin-left: .8333em; }
div#footer { clear: both; }

/* @end */

vtjustinb
10-10-2007, 04:18 AM
For the very reason you cited (rending inconsistencies) I try my best to avoid the headache of vertical rhythm in forms. I think it and a grid-based approaches are great angles to design text on a website with, but it's just too painful to try to make it work cross-browser with form elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum