home *** CD-ROM | disk | FTP | other *** search
/ 207.233.110.77 / 207.233.110.77.tar / 207.233.110.77 / web10 / tutorial.05 / tutorial / rounded.css < prev    next >
Cascading Style Sheet File  |  2011-02-28  |  2KB  |  43 lines
  1. /*
  2.    New Perspectives on HTML and XHTML 5th Edition
  3.    Tutorial 5
  4.    Tutorial Case
  5.  
  6.    Style Sheet to create rounded boxes
  7.    Author: Edina Fuzesi
  8.    Date: 02/28/2011
  9.     
  10.  
  11.    Filename:         rounded.css
  12.    Supporting Files: bottom.png, bottomleft.png, bottomright.png, left.png,
  13.                      right.png, top.png, topleft.png, topright.png
  14.  
  15. */
  16.  
  17. table.roundedBox     {margin: 5px; border-collapse: collapse}
  18. table.roundedBox td  {padding: 0px} 
  19.  
  20. table.roundedBox td.topLeft       {width: 16px; height: 16px}
  21. table.roundedBox td.topRight      {width: 16px; height: 16px}
  22. table.roundedBox td.bottomLeft    {width: 16px; height: 16px}
  23. table.roundedBox td.bottomRight   {width: 16px; height: 16px}
  24.  
  25. table.roundedBox td.top           {width: auto; height: 16px}
  26. table.roundedBox td.bottom        {width: auto; height: 16px}
  27.  
  28. table.roundedBox td.left          {width: 16px; height: auto}
  29. table.roundedBox td.right         {width: 16px; height: auto}   
  30.  
  31. .topLeft         {background: url(topLeft.png) no-repeat top left}
  32. .topRight        {background: url(topRight.png) no-repeat top right}
  33. .bottomLeft      {background: url(bottomLeft.png) no-repeat bottom left}
  34. .bottomRight     {background: url(bottomRight.png) no-repeat bottom right}
  35.  
  36. .top             {background: url(top.png) repeat-x top}
  37. .bottom          {background: url(bottom.png) repeat-x bottom}
  38.  
  39. .left            {background: url(left.png) repeat-y left}
  40. .right           {background: url(right.png) repeat-y right}
  41.  
  42. div.roundedBox   {margin: 5px; position: relative}
  43. div.boxContent   {padding: 16px}