Skip to content

Instantly share code, notes, and snippets.

@jonahlyn

jonahlyn/definitions.html

Created April 15, 2010 19:49
Show Gist options
  • Save jonahlyn/367558 to your computer and use it in GitHub Desktop.
Save jonahlyn/367558 to your computer and use it in GitHub Desktop.
Download ZIP
A definition list styled like a table. http://jsbin.com/gist/367558
Raw
definitions.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Definitions</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
body { font: 16px "Lucida Grande",Helvetica,Verdana,Arial,Tahoma,sans-serif; }
dl { color: #444;
line-height: 20px;
width: 450px; }
dt { border-top: 1px solid #ddd;
clear: both;
float: left;
font-weight: bold;
margin: 0;
padding: 8px 3px;
width: 94px; }
dd { border-top: 1px solid #ddd;
float: left;
margin: 0;
padding: 8px 3px;
width: 344px; }
dd p { margin: 0;
padding: 0; }
</style>
</head>
<body>
<h1>Definitions</h1>
<dl id="definitions">
<dt id="monday"><dfn>Monday</dfn></dt>
<dd><p>The first day of the week.</p></dd>
<dt id="tuesday"><dfn>Tuesday</dfn></dt>
<dd><p>The second day of the week.</p></dd>
<dt id="wednesday"><dfn>Wednesday</dfn></dt>
<dd><p>The third day of the week.</p></dd>
<dt id="thursday"><dfn>Thursday</dfn></dt>
<dd><p>The fourth day of the week.</p></dd>
<dt id="friday"><dfn>Friday</dfn></dt>
<dd><p>The fifth day of the week.</p></dd>
<dt id="saturday"><dfn>Saturday</dfn></dt>
<dd><p>The sixth day of the week.</p></dd>
<dt id="sunday"><dfn>Sunday</dfn></dt>
<dd><p>The seventh day of the week.</p></dd>
<dt id="test"><dfn>Test</dfn></dt>
<dd><p>This is a test of a really, really, really long definition.</p></dd>
</dl>
</body>
</html>
Raw
gistfile2.js
/* Use jQuery to color the backgrounds of every even numbered definition */
$(function(){
$('dt:even, dd:even').css({'background-color':'#eee'});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment