Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Feb 2nd, 2011  |  syntax: HTML  |  size: 1.30 KB  |  views: 223  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <title>Styling DL lists</title>
  5.                 <style>
  6.                         dl {
  7.                                 overflow: hidden;
  8.  
  9.                                 /* these rules don't affect the positioning */
  10.                                 background: #ccc;
  11.                                 margin: 0;
  12.                                 padding: 0.5em;
  13.                                 max-width: 30em;
  14.                         }
  15.                         dt, dd {
  16.                                 margin-top: 0.5em;
  17.                         }
  18.                         dt {
  19.                                 clear: both;
  20.                                 float: left;
  21.                                 width: 6em;
  22.  
  23.                                 /* these rules don't affect the positioning */
  24.                                 font-style: italic;
  25.                                 text-align: right;
  26.                         }
  27.                         dd {
  28.                                 margin-left: 6.5em;
  29.                         }
  30.                         h1 {
  31.                                  display: none;
  32.                         }
  33.                 </style>
  34.         </head>
  35.         <body>
  36.                 <h1>Styling DL lists</h1>
  37.                 <dl>
  38.                         <dt>Term A</dt>
  39.                         <dd>Definition A</dd>
  40.                        
  41.                         <dt>Term B</dt>
  42.                         <dd>A very long definition of B that may span over multiple lines of text. This should not break the flow with the rest of the items in the list.</dd>
  43.                        
  44.                         <dt>Term C</dt>
  45.                         <dd>Definition C1</dd>
  46.                         <dd>Definition C2</dd>
  47.                         <dd>Definition C3</dd>
  48.                        
  49.                         <dt>Long term D that spans multiple lines</dt>
  50.                         <dd>Definition D</dd>
  51.                        
  52.                         <dt>Term E1</dt>
  53.                         <dt>Term E2</dt>
  54.                         <dd>Definition E</dd>
  55.  
  56.                         <dt>Long term F with multiple definitions</dt>
  57.                         <dd>Definition F1</dd>
  58.                         <dd>Definition F2</dd>
  59.                        
  60.                         <dt>Undefined term G</dt>
  61.                         <dd></dd>
  62.                        
  63.                         <dt>Term H</dt>
  64.                         <dd>Definition H</dd>
  65.                 </dl>
  66.         </body>
  67. </html>