home *** CD-ROM | disk | FTP | other *** search
/ 207.233.110.77 / 207.233.110.77.tar / 207.233.110.77 / web15 / tutorial.07 / jp.css < prev    next >
Cascading Style Sheet File  |  2011-04-11  |  4KB  |  92 lines
  1. /*
  2.    New Perspectives on HTML and XHTML 5th Edition
  3.    Tutorial 7
  4.    Tutorial Case
  5.  
  6.    Jumbo Popcorn Style Sheet
  7.  
  8.    Filename:         jp.css
  9.    Supporting Files: bottom.png, bottomleft.png, bottomright.png, button.jpg, 
  10.                      left.png, popcorn.jpg, top.png, topleft.png, topright.png,
  11.                      right.png
  12.  
  13. */
  14.  
  15. body                   {margin: 0px; padding: 0px; font-size: 15px; 
  16.                         font-family: Arial, Helvetica, sans-serif}
  17.  
  18. #head                  {position: absolute; top: 0px; left: 0px}
  19.  
  20. #links                 {position: absolute; top: 155px; left: 130px; width: 750px}
  21.  
  22. #links ul              {list-style-type: none; padding: 0px; margin: 0px}
  23. #links li              {display: block; float: left; font-size: 14px;
  24.                         background: url(button.jpg) no-repeat center center;
  25.                         width: 100px; height: 33px; text-align: center; margin-right: 2px}
  26. #links a               {display: block; color: white; text-decoration: none; margin-top: 5px}
  27. #links a:hover         {color: black}
  28.  
  29. #pageContent          {position: absolute; top: 210px; left: 0px; width: 870px;
  30.                        background: url(popcorn.jpg) repeat-y 0px 40px}
  31.  
  32. #pageContent h1       {background-color: white;
  33.                        font-weight: bold; font-size: 28px; letter-spacing: 6px;
  34.                        margin: 0px; padding: 0px 0px 5px 10px}
  35.  
  36. #pageContent h2       {font-size: 16px; text-align: center; margin: 0px 0px 10px 0px;
  37.                        color: white; letter-spacing: 5px}
  38. #pageContent p        {font-size: 12px}
  39.  
  40.  
  41. #filmlinks            {float: left; width: 180px; margin-right: 23px}
  42. #filmlinks ul         {list-style-type: none; padding: 0px; margin: 0px; margin-left: 10px}
  43. #filmlinks ul li      {font-size: 16px; margin-top: 10px; font-weight: bold}
  44. #filmlinks ul ul li   {font-size: 12px; margin-top: 0px; font-weight: normal}
  45. #filmlinks ul ul      {margin-left: 20px}
  46. #filmlinks a          {color: black; text-decoration: none}
  47. #filmlinks a:hover    {text-decoration: underline}
  48.  
  49. #middleColumn         {float: left; width: 300px; margin-right: 10px}
  50. #rightColumn          {float: left; width: 320px}
  51.  
  52. #cast                 {width: 300px; margin-bottom: 10px}
  53. #cast h2              {background-color: black}
  54. #cast p               {margin: 0px 0px 10px}
  55.  
  56. #synopsis             {width: 300px; margin-bottom: 10px}
  57. #synopsis h2          {background-color: rgb(202,148,28)}
  58. #synopsis img         {float: right; clear: right; margin-right: -10px}
  59. #synopsis p           {margin: 0px 0px 10px}
  60.  
  61. #notes1               {width: 320px; margin-bottom: 10px}
  62. #notes1 h2            {background-color: rgb(202,148,28)}
  63. #notes1 p             {margin: 0px 0px 10px}
  64.  
  65. #notes2               {width: 320px; margin-bottom: 10px}
  66. #notes2 h2            {background-color: black}
  67. #notes2 p             {margin: 0px 0px 10px}
  68.  
  69. .topLeft              {background: url(topleft.png) no-repeat top left}
  70. .topRight             {background: url(topright.png) no-repeat top right}
  71. .bottomLeft           {background: url(bottomleft.png) no-repeat bottom left}
  72. .bottomRight          {background: url(bottomright.png) no-repeat bottom right}
  73. .top                  {background: url(top.png) repeat-x top}
  74. .bottom               {background: url(bottom.png) repeat-x bottom}
  75. .left                 {background: url(left.png) repeat-y left}
  76. .right                {background: url(right.png) repeat-y right}
  77. .roundedBox           {margin: 5px}
  78. .boxContent           {padding: 16px}
  79.  
  80. #bottomlinks          {clear: left}
  81. #bottomlinks ul       {list-style-type: none; padding: 0px; margin: 0px 0px 0px 20px;
  82.                         border-top: 1px solid black}
  83. #bottomlinks li       {display: block; float: left; font-size: 10px;
  84.                        width: 110px; height: 33px; text-align: center; margin-right: 2px}
  85. #bottomlinks a        {display: block; color: black; text-decoration: none; margin-top: 5px}
  86. #bottomlinks a:hover  {color: black; text-decoration: underline}
  87.  
  88.  
  89.  
  90.  
  91.  
  92.