API tools faq
paste
PayneLess_Designs

PayneLess Designs - Scrollbox - Absolutely Positioned Over a

PayneLess_Designs
May 31st, 2012
353
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.67 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. <title>Scrollbox - Absolutely Positioned Over an Image</title>
  5. <link rel="stylesheet" type="text/css" href="../css/css_TheShadowKnows.css" />
  6. <link rel="stylesheet" type="text/css" href="../css/css_textarea.css" />
  7.  
  8. <style type="text/css">
  9. * { margin: 0; padding: 0; border: 0; }
  10.  
  11. html, body { width: 100%; height: 100%; }
  12.  
  13. div#scroll-wrap {
  14. width: 800px;
  15. height: 600px;
  16. margin: 0 auto;
  17. }
  18.  
  19. h1 { color: #fff; text-align: center; margin-bottom: 3%; }
  20.  
  21. div#scroll-bg img {
  22. width: 530px;
  23. height: 490px;
  24. position: absolute;
  25. top: 10%;
  26. left: 27.7%;
  27. /* background:  url(http://i.imgur.com/R47mU.jpg) no-repeat center scroll; */ /* Optional way */
  28. }
  29.  
  30. div#scrollbox {
  31. width: 450px;
  32. height: 240px;
  33. position: absolute;
  34. top: 40%;
  35. left: 30%;
  36. font-family: 'century gothic', sans-serif;
  37. font-size: 1em;
  38. padding: 10px;
  39. background: transparent url(../images/opaque-1x1.png) repeat top center fixed; /* optional */
  40. text-align: justify;
  41. color: #fff;
  42. overflow: auto;
  43. z-index: 1; /* optional */
  44. }
  45.  
  46. div#scrollbox p {
  47. margin: 2% 0;
  48. }
  49. </style>
  50.  
  51. <!--[if IE]>
  52. <link rel="stylesheet" type="text/css" href="../css/css_TheShadowKnows-IE-only.css" />
  53. <link rel="stylesheet" type="text/css" href="../css/css_textarea-IE-only.css" />
  54. <![endif]-->
  55. </head><body>
  56. <h1>Scrollbox - Absolutely Positioned Over an Image</h1>
  57.  
  58. <div id="scroll-wrap">
  59. <div id="scroll-bg"><img src="http://i.imgur.com/R47mU.jpg" alt="" /></div>
  60.  
  61. <div id="scrollbox"><p>The background of this div scroll box has a partially transparent, repeated 1 X 1 pixel image.</p>
  62.  
  63. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis purus mauris, eget fermentum orci. Donec lobortis sagittis lacus. Aliquam scelerisque eleifend lectus, a tristique ligula hendrerit a. Aliquam fermentum pharetra lorem, et porttitor est luctus hendrerit. Ut eu nibh sapien, eu imperdiet neque. Sed placerat iaculis nisl id vehicula. Sed ut metus in mauris molestie bibendum nec quis orci. Aenean ornare lacus justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In luctus velit in libero posuere et molestie ante faucibus. Proin non tellus vel magna vehicula laoreet vel a arcu. Mauris tempor libero sed libero euismod eget mattis tellus tincidunt. Proin risus est, porta ut tristique egestas, molestie sed diam. Suspendisse quis tempus eros. Vestibulum aliquet arcu quis sem tincidunt dictum. Sed at sollicitudin mauris. Pellentesque facilisis eros non lorem elementum semper.</p>
  64.  
  65. <p>Nulla facilisi. Aliquam id neque at ipsum dictum ullamcorper sit amet vitae lorem. Vivamus porttitor lobortis varius. Fusce a lobortis libero. Proin tristique massa sit amet arcu tincidunt dignissim. Morbi pulvinar sem lacinia ante blandit rhoncus. Sed facilisis iaculis sapien a mattis. Donec tortor nisl, mattis sed suscipit ut, tincidunt eget nibh. Nulla sed orci auctor enim lacinia congue a ullamcorper ligula. Pellentesque sodales velit cursus nunc consequat sodales. Pellentesque lobortis justo nec neque pharetra eget consequat lectus dapibus. Vestibulum felis tellus, posuere eget sodales eget, consequat nec nunc. Nam libero magna, egestas ac tincidunt venenatis, elementum et neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  66.  
  67. <p>Proin rutrum malesuada nisl, vel iaculis libero venenatis eu. Suspendisse et diam mauris, a ultricies justo. Sed nec imperdiet felis. Vivamus in elementum erat. Pellentesque dignissim diam in odio sagittis sed posuere arcu fermentum. Fusce placerat faucibus libero, non eleifend enim feugiat quis. Vivamus at risus vitae libero suscipit tempus quis a arcu. Nullam malesuada velit at felis porta eget congue enim molestie. Ut commodo sodales leo, sit amet adipiscing velit auctor et. Donec consequat convallis magna, auctor sodales orci facilisis in. Duis mattis blandit nisi et sodales. In eu massa id tellus volutpat vestibulum. Quisque sed metus sit amet dui accumsan scelerisque. Pellentesque eleifend volutpat pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas in accumsan dolor. Cras egestas euismod nisl nec consequat. Praesent in massa arcu, at facilisis mauris. Pellentesque sodales, eros eu fermentum vehicula, nisl sem pharetra dui, nec sollicitudin magna risus blandit erat.</p>
  68.  
  69. <p>Ut in porttitor nunc. Suspendisse faucibus ipsum et velit tincidunt eleifend. Ut et nunc eros, sit amet tempus eros. Quisque vestibulum nulla libero, ac facilisis velit. Integer quis neque id ligula gravida consequat. Etiam gravida rhoncus ligula, vitae ornare nunc ultricies vitae. In in erat tortor, quis malesuada mauris. Mauris magna ipsum, feugiat vitae ultricies sit amet, euismod eu nunc. Nulla pretium eros a sem pretium vel lobortis libero dictum. Suspendisse non tortor id quam pellentesque interdum. In et quam sed nibh molestie fringilla in sit amet quam. Mauris dapibus ultrices sapien, in sodales lorem ultrices ac. Vivamus tellus risus, sodales sit amet vehicula sed, ullamcorper ac libero. Donec sodales nunc vel arcu vulputate lacinia. Duis auctor erat non lectus hendrerit nec vulputate augue feugiat. Phasellus non pellentesque est. Suspendisse potenti. Nulla facilisi.</p>
  70.  
  71. <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur, sem vitae viverra blandit, ipsum nisl bibendum nulla, sed condimentum lectus est sit amet massa. Proin lobortis interdum mauris, eu ultrices nunc mattis sollicitudin. Vivamus sit amet erat enim, in faucibus urna. Cras varius tincidunt diam, nec scelerisque purus egestas a. Quisque ligula felis, imperdiet sit amet fermentum id, ultricies nec magna. Nullam euismod odio sit amet arcu posuere placerat in quis eros. Sed eget velit purus, at porttitor tellus. Aliquam luctus leo sit amet quam bibendum mollis. Duis vestibulum pretium velit, sollicitudin interdum diam vehicula at. Vivamus nisi ante, rhoncus eu facilisis eu, accumsan nec sapien. Quisque tristique libero nec libero dignissim accumsan. Donec eget odio lorem. Donec in dictum sem. Proin erat purus, convallis in euismod ut, pellentesque quis nulla. Pellentesque sed erat in ligula pharetra eleifend. Sed nisi lacus, pulvinar ut tincidunt aliquet, ultricies sed nisi. In hac habitasse platea dictumst.</p></div>
  72. </div>
  73. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!