PayneLess_Designs

PayneLess Designs - How To Put an HTML Scroll Box in Front o

May 2nd, 2012
427
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.93 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html><head>
  3. <title>How To Put an HTML Scroll Box in Front of a Picture?</title>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <meta name="created" content="Wed, 02 May 2012 03:51:10 GMT">
  6. <meta name="description" content="How can I put a html scroll box code in front of a picture?">
  7. <meta name="keywords" content="How to put a html scroll box in front of a picture?, Yahoo!Answers">
  8.    
  9. <meta name="classification" content="Design">
  10. <meta name="distribution" content="Global">
  11. <meta name="rating" content="General">
  12. <meta http-equiv="Content-Language" content="English">
  13. <meta name="resource-type" content="document">
  14. <meta name="author" content="PayneLess Designs">
  15. <meta name="copyright" content="Jan 2004 to present.">
  16. <meta name="robots" content="all">
  17. <meta name="revisit-after" content="180 days">
  18.  
  19. <style type="text/css">
  20. * { margin: 0; padding: 0; border: 0; }
  21. body { background: #000; }
  22. h1 { text-align: center; margin-bottom: 2%; }
  23. #main-wrap {
  24. width: 960px;
  25. height: 960px;
  26. margin: 0 auto;
  27. }
  28.  
  29. #image-wrap {
  30. width: 699px;
  31. height: 496px;
  32. margin: 0 auto;
  33. border: 1em ridge #f0f;
  34. background: #fff url(http://i.imgur.com/THeK9.jpg) no-repeat top left scroll; /* 699 X 496 */
  35. }
  36.  
  37. #text-box {
  38. width: 300px;
  39. height: 300px;
  40. position: absolute;
  41. right: 15%;
  42. bottom: 12%;
  43. padding: 5px;
  44. border: .5em ridge #0ff;
  45. background: transparent;
  46. overflow: auto;
  47. }
  48.  
  49. #text-box p {
  50. font-family: arial, 'times new roman', sans-serif;
  51. font-size: 1em;
  52. font-weight: bold;
  53. color: #fff;
  54. text-align: justify;
  55. margin: 2% 0;
  56. }
  57. </style>
  58.  
  59. <!--[if IE]>
  60. <link rel="stylesheet" type="text/css" href="site_css/IE-only.css">
  61. <![endif]-->
  62. </head><body>
  63. <h1>How To Put an HTML Scroll Box in Front of a Picture?</h1>
  64. <div id="main-wrap"><!-- START Main-Wrap -->
  65.  
  66. <div id="image-wrap"><!-- START Image Wrap --></div><!-- END Image Wrap -->
  67.  
  68. <div id="text-box"><!-- START Text Box -->
  69. <p>"'Aye? Well then, Don, refill my cup. Your chicha's very fine; and ere proceeding further I will tell ye what our Canallers are; for such information may throw side-light upon my story.'</p>
  70.  
  71. <p>"For three hundred and sixty miles, gentlemen, through the entire breadth of the state of New York; through numerous populous cities and most thriving villages; through long, dismal, uninhabited swamps, and affluent, cultivated fields, unrivalled for fertility; by billiard-room and bar-room; through the holy-of-holies of great forests; on Roman arches over Indian rivers; through sun and shade; by happy hearts or broken; through all the wide contrasting scenery of those noble Mohawk counties; and especially, by rows of snow-white chapels, whose spires stand almost like milestones, flows one continual stream of Venetianly corrupt and often lawless life. There's your true Ashantee, gentlemen; there howl your pagans; where you ever find them, next door to you; under the long-flung shadow, and the snug patronising lee of churches. For by some curious fatality, as it is often noted of your metropolitan freebooters that they ever encamp around the halls of justice, so sinners, gentlemen, most abound in holiest vicinities.</p>
  72.  
  73. <p>"'Is that a friar passing?' said Don Pedro, looking downwards into the crowded plazza, with humorous concern.</p>
  74.  
  75. <p>"'Well for our northern friend, Dame Isabella's Inquisition wanes in Lima,' laughed Don Sebastian. 'Proceed, Senor.'</p>
  76.  
  77. <p>"'A moment! Pardon!' cried another of the company. 'In the name of all us Limeese, I but desire to express to you, sir sailor, that we have by no means overlooked your delicacy in not substituting present Lima for distant Venice in your corrupt comparison. Oh! do not bow and look surprised; you know the proverb all along this coast&mdash;"Corrupt as Lima." It but bears out your saying, too; churches more plentiful than billiard-tables, and for ever open&mdash;and "Corrupt as Lima." So, too, Venice; I have been there; the holy city of the blessed evangelist, St. Mark!&mdash;St. Dominic, purge it! Your cup! Thanks: here I refill; now, you pour out again.'</p>
  78.  
  79. <p>"Freely depicted in his own vocation, gentlemen, the Canaller would make a fine dramatic hero, so abundantly and picturesquely wicked is he. Like Mark Antony, for days and days along his green-turfed, flowery Nile, he indolently floats, openly toying with his red-cheeked Cleopatra, ripening his apricot thigh upon the sunny deck. But ashore, all this effeminacy is dashed. The brigandish guise which the Canaller so proudly sports; his slouched and gaily-ribboned hat betoken his grand features. A terror to the smiling innocence of the villages through which he floats; his swart visage and bold swagger are not unshunned in cities. Once a vagabond on his own canal, I have received good turns from one of these Canallers; I thank him heartily; would fain be not ungrateful; but it is often one of the prime redeeming qualities of your man of violence, that at times he has as stiff an arm to back a poor stranger in a strait, as to plunder a wealthy one. In sum, gentlemen, what the wildness of this canal life is, is emphatically evinced by this; that our wild whale-fishery contains so many of its most finished graduates, and that scarce any race of mankind, except Sydney men, are so much distrusted by our whaling captains. Nor does it at all diminish the curiousness of this matter, that to many thousands of our rural boys and young men born along its line, the probationary life of the Grand Canal furnishes the sole transition between quietly reaping in a Christian corn-field, and recklessly ploughing the waters of the most barbaric seas.</p>
  80. </div><!-- END Text Box -->
  81.  
  82. </div><!-- END Main-Wrap -->
  83.  
  84. <h2>HTML/CSS Code</h2>
  85. <pre>
  86. &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  87. &lt;html>&lt;head>
  88. &lt;title>How To Put an HTML Scroll Box in Front of a Picture?&lt;/title>
  89. &lt;meta http-equiv="content-type" content="text/html; charset=utf-8">
  90. &lt;meta name="created" content="Wed, 02 May 2012 03:51:10 GMT">
  91.  
  92. &lt;style type="text/css">
  93. * { margin: 0; padding: 0; border: 0; }
  94. body { background: #000; }
  95. h1 { text-align: center; margin-bottom: 2%; }
  96. #main-wrap {
  97. width: 960px;
  98. height: 960px;
  99. margin: 0 auto;
  100. }
  101.  
  102. #image-wrap {
  103. width: 699px;
  104. height: 496px;
  105. margin: 0 auto;
  106. border: 1em ridge #f0f;
  107. background: #fff url(http://i.imgur.com/THeK9.jpg) no-repeat top left scroll; /* 699 X 496 */
  108. }
  109.  
  110. #text-box {
  111. width: 300px;
  112. height: 300px;
  113. position: absolute;
  114. right: 15%;
  115. bottom: 12%;
  116. padding: 5px;
  117. border: .5em ridge #0ff;
  118. background: transparent;
  119. overflow: auto;
  120. }
  121.  
  122. #text-box p {
  123. font-family: arial, 'times new roman', sans-serif;
  124. font-size: 1em;
  125. font-weight: bold;
  126. color: #fff;
  127. text-align: justify;
  128. margin: 2% 0;
  129. }
  130. &lt;/style>
  131.  
  132. &lt;!--[if IE]>
  133. &lt;link rel="stylesheet" type="text/css" href="site_css/IE-only.css">
  134. &lt;![endif]-->
  135. &lt;/head>&lt;body>
  136. &lt;h1>How To Put an HTML Scroll Box in Front of a Picture?&lt;/h1>
  137. &lt;div id="main-wrap">&lt;!-- START Main-Wrap -->
  138.  
  139. &lt;div id="image-wrap">&lt;!-- START Image Wrap -->&lt;/div>&lt;!-- END Image Wrap -->
  140.  
  141. &lt;div id="text-box">&lt;!-- START Text Box -->
  142. &lt;p>"'Aye? Well then, Don, refill my cup. Your chicha's very fine; and ere proceeding further I will tell ye what our Canallers are; for such information may throw side-light upon my story.'&lt;/p>
  143.  
  144. &lt;p>"For three hundred and sixty miles, gentlemen, through the entire breadth of the state of New York; through numerous populous cities and most thriving villages; through long, dismal, uninhabited swamps, and affluent, cultivated fields, unrivalled for fertility; by billiard-room and bar-room; through the holy-of-holies of great forests; on Roman arches over Indian rivers; through sun and shade; by happy hearts or broken; through all the wide contrasting scenery of those noble Mohawk counties; and especially, by rows of snow-white chapels, whose spires stand almost like milestones, flows one continual stream of Venetianly corrupt and often lawless life. There's your true Ashantee, gentlemen; there howl your pagans; where you ever find them, next door to you; under the long-flung shadow, and the snug patronising lee of churches. For by some curious fatality, as it is often noted of your metropolitan freebooters that they ever encamp around the halls of justice, so sinners, gentlemen, most abound in holiest vicinities.&lt;/p>
  145.  
  146. &lt;p>"'Is that a friar passing?' said Don Pedro, looking downwards into the crowded plazza, with humorous concern.&lt;/p>
  147.  
  148. &lt;p>"'Well for our northern friend, Dame Isabella's Inquisition wanes in Lima,' laughed Don Sebastian. 'Proceed, Senor.'&lt;/p>
  149.  
  150. &lt;p>"'A moment! Pardon!' cried another of the company. 'In the name of all us Limeese, I but desire to express to you, sir sailor, that we have by no means overlooked your delicacy in not substituting present Lima for distant Venice in your corrupt comparison. Oh! do not bow and look surprised; you know the proverb all along this coast&mdash;"Corrupt as Lima." It but bears out your saying, too; churches more plentiful than billiard-tables, and for ever open&mdash;and "Corrupt as Lima." So, too, Venice; I have been there; the holy city of the blessed evangelist, St. Mark!&mdash;St. Dominic, purge it! Your cup! Thanks: here I refill; now, you pour out again.'&lt;/p>
  151.  
  152. &lt;p>"Freely depicted in his own vocation, gentlemen, the Canaller would make a fine dramatic hero, so abundantly and picturesquely wicked is he. Like Mark Antony, for days and days along his green-turfed, flowery Nile, he indolently floats, openly toying with his red-cheeked Cleopatra, ripening his apricot thigh upon the sunny deck. But ashore, all this effeminacy is dashed. The brigandish guise which the Canaller so proudly sports; his slouched and gaily-ribboned hat betoken his grand features. A terror to the smiling innocence of the villages through which he floats; his swart visage and bold swagger are not unshunned in cities. Once a vagabond on his own canal, I have received good turns from one of these Canallers; I thank him heartily; would fain be not ungrateful; but it is often one of the prime redeeming qualities of your man of violence, that at times he has as stiff an arm to back a poor stranger in a strait, as to plunder a wealthy one. In sum, gentlemen, what the wildness of this canal life is, is emphatically evinced by this; that our wild whale-fishery contains so many of its most finished graduates, and that scarce any race of mankind, except Sydney men, are so much distrusted by our whaling captains. Nor does it at all diminish the curiousness of this matter, that to many thousands of our rural boys and young men born along its line, the probationary life of the Grand Canal furnishes the sole transition between quietly reaping in a Christian corn-field, and recklessly ploughing the waters of the most barbaric seas.&lt;/p>
  153. &lt;/div>&lt;!-- END Text Box -->
  154.  
  155. &lt;/div>&lt;!-- END Main-Wrap -->
  156. &lt;/body>&lt;/html>
  157. </pre>
  158. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment