Tabs based on definition list
// description of your code here
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <style type="text/css"> 6 dl.tabstrip { 7 float:left; 8 width:60em; 9 font-size:120%; 10 line-height:normal; 11 background: url("images/tabstripbottom.png") repeat-x bottom; 12 margin:0; 13 padding:8px 8px 0; 14 } 15 16 dl.tabstrip dt { 17 float:left; 18 padding:0; 19 margin:0 2px 0 0; 20 } 21 22 dl.tabstrip a { 23 display:block; 24 padding: 4px 12px 4px; 25 color:black; 26 font-family:verdana, sans-serif; 27 text-decoration:none; 28 } 29 30 dt.selected { 31 background: url("images/tabright.png") top right no-repeat; 32 } 33 34 dt.selected a { 35 background: url("images/tableft.png") top left no-repeat; 36 padding-bottom:5px; 37 } 38 39 40 dt.unselected { 41 background: url("images/unselectedtabright.png") top right no-repeat; 42 } 43 44 dt.unselected a { 45 background: url("images/unselectedtableft.png") top left no-repeat; 46 } 47 48 .tabstrip dd { 49 position:fixed; 50 left:8px; 51 top: 2.5em; 52 border: 1px solid #6290d2; 53 border-top:none; 54 background:#fff; 55 margin:0; 56 height:10em; 57 width: 60em; 58 padding:8px 8px 8px 6px; 59 } 60 61 dd.selected { 62 display:block; 63 } 64 65 dd.unselected { 66 display:none; 67 } 68 </style> 69 </head> 70 71 <body> 72 <dl class="tabstrip"> 73 <dt class="unselected"><a href="#">Tracy</a></dt> 74 <dd class="unselected"> 75 <p>Position: President</p> 76 </dd> 77 78 <dt class="selected"><a href="#">Andy</a></dt> 79 <dd class="selected"> 80 <p>Position: Architect</p> 81 </dd> 82 83 <dt class="unselected"><a href="#">Ron</a></dt> 84 <dd class="unselected"> 85 <p>Position: Operations Manager</p> 86 </dd> 87 </dl> 88 </body> 89 </html>
