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