API tools faq
paste
PayneLess_Designs

Triple Bordered Backgrounds - Table Method

PayneLess_Designs
Jun 20th, 2011
275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en-US"><head>
  3. <title>Triple Bordered Backgrounds - Table Method</title>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <meta name="created" content="Mon, 20 Jun 2011 06:22:37 GMT">
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="author" content="PayneLess Designs">
  9. <meta name="copyright" content="Jan 2004 to present.">
  10.    
  11. <style type="text/css">
  12. * { margin: 0; padding: 0; border: 0; }
  13. #page-wrap {
  14. width: 960px;
  15. margin: 0 auto;
  16. }
  17.  
  18. h1 {
  19. text-align: center;
  20. }
  21.  
  22. ul li { list-style-type: none; }
  23.  
  24. p {
  25. margin: 2% 0;
  26. font-size: 1em;
  27. padding: 10px;
  28. text-align: justify;
  29. }
  30.  
  31. #example {
  32. width: 960px;
  33. padding: 5px;
  34. }
  35. </style>
  36.  
  37. <!--[if IE]>
  38. <link rel="stylesheet" type="text/css" href="iestyle.css">
  39. <![endif]-->
  40. </head>
  41. <body>
  42. <h1>Triple Bordered Backgrounds - Table Method</h1>
  43. <div id="page-wrap">
  44.  
  45. <ul>
  46. <li>1.) Triple bordered backgrounds are made utilizing tables. Mostly tables within tables, with background images or colors applied.</li>
  47.  
  48. <li>2.) Set the page to the desired resolution, nowadays its 1024x768, then set a table within the page and then a table within that table. If using a html editor, such as Frontage (I recommend you not use this) , Dreamweaver, NVU or any WYSIWYG Editor, you just start with a new page and insert the tables.</li>
  49.  
  50. <li>3.) Background colors or images are applied to the page and each table. I recommend using CSS to set table attributes and place your page contents into the middle table. Height of the table is determined by the amount of content you place within the middle table, the more content you add, the longer the page becomes.</li>
  51.  
  52. <li>4.) To help you get started, see the template that you can view or download and use at <a href="http://www.hypergurl.com/trippleborder.html" onclick="window.open (this.href, ''); return false">www.hypergurl.com</a>, with the tables already set for you and more instructions on making your triple bordered background, or you can copy and paste the html code below.</li>
  53.  
  54. <li>5.) Within the html of the template &lt;!-- comments like this --> have been placed. You can alter the look of the triple bordered background to suit your personal taste easily. This will also give you the feel of what the html for tables is required.</li>
  55.  
  56. <li>6.) Take a look at the <a href="http://www.hypergurl.com/trippleborder.html" onclick="window.open (this.href, ''); return false">TRIPLE BORDERED BACKGROUND</a> template and if you want, freely use the template for your own site. Compliments of www.hypergurl.com.</li>
  57. </ul>
  58.  
  59. <p>EXAMPLE (body tag not included here.  Using bgcolors instead of image backgrounds.):</p>
  60. <div id="example">
  61. <p>&lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE TOP BORDER OF THE FIRST background AND THE TOP BORDER OF THE SECOND background --></p>
  62.  
  63. <p>&lt;!-- THE NEXT LINE CENTERS THE MAIN table ON THE PAGE --></p>
  64.  
  65. <p>&lt;!-- START OF MAIN table WITH THE WIDTH SET TO 90% OF BROWSER WINDOW TO GIVE THE EFFECT OF THE SECOND BORDER --></p>
  66.  
  67. <table border="2" style="width: 90%; margin: 0 auto; padding: 5px; background: #ff0000 url('ImageURL#2.jpg') no-repeat center scroll;" summary="">
  68. <tr>
  69. <td><p>&lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE TOP BORDER OF THE SECOND
  70. background AND THE TOP BORDER OF THE MIDDLE background--></p><p>&lt;!-- NESTED table INSIDE THE MAIN table is CENTERED --></p>
  71.  
  72. <p>&lt;!-- START OF CENTER NESTED table WITH THE WIDTH SET TO 85% TO GIVE THE EFFECT OF THE THIRD BORDER--></p>
  73.  
  74.     <table border="2" style="width: 85%; margin: 0 auto; padding: 20px; background: #00ff00 url('ImageURL#3') no-repeat center scroll;" summary="">
  75.     <tr>
  76.     <td style="background: #c0c0c0 url('ImageURL#4.jpg') no-repeat center scroll;"><p>&lt;!-- HERE IS WHERE YOU WILL PLACE ALL YOUR TEXT AND IMAGES FOR YOUR PAGE --></p><p>Here is where you will place all the text and images for your web page. Don't forget to change the text, link, active link and visited link colors to suit your page. Play around with the table widths, cellpadding, cellspacing and border attributes like color and size. By experimenting with these settings you can customize how your page will look. You'll notice a lot of comments between &lt;!--these--> characters in the html code. Browsers ignore any information contained within these characters, so you can put in any comments you like or delete them completely and it won't affect your page. I've added the comments to help you with using this template.</p><p>Please note that the height of the table is determined by the amount of content you have in this area. The more content you have, the longer the table.</p></td>
  77.     </tr>
  78.     </table>
  79.  
  80. <p>&lt;!-- END OF CENTER NESTED table --></p>
  81.  
  82. <p>&lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE BOTTOM BORDER OF THE MIDDLE background AND THE BOTTOM BORDER OF THE SECOND background --></p></td>
  83. </tr>
  84. </table>
  85.  
  86. <p>&lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE BOTTOM BORDER OF THE SECOND background AND THE BOTTOM OF THE FIRST background --></p>
  87. </div>
  88.  
  89. <p>Below is an example of the html used. Copy/paste as needed.</p>
  90.  
  91. <pre>
  92. &lt;!DOCTYPE here>
  93. &lt;html>&lt;head>
  94. &lt;title>write the name of your page title here&lt;/title>
  95. &lt;meta http-equiv="content-type" content="text/html; charset=utf-8">
  96. &lt;/head>
  97. &lt;body background="ImageURL#1.jpg" color="#999999" link="#6633FF" vlink="#cc3300" alink="#669999">
  98. &lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE TOP
  99. BORDER OF THE FIRST background AND THE TOP BORDER OF THE SECOND background -->
  100.  
  101. &lt;br>&lt;br>
  102.  
  103. &lt;!-- THE NEXT LINE CENTERS THE MAIN table ON THE PAGE -->
  104.  
  105. &lt;div align="center">
  106. &lt;!-- START OF MAIN table WITH THE WIDTH SET TO 90% OF BROWSER WINDOW TO GIVE THE EFFECT OF THE
  107. SECOND BORDER -->
  108.  
  109. &lt;table border="2" width="90%" cellpadding="5" cellspacing="0" background="ImageURL#2.jpg" summary="">
  110. &lt;tr>
  111. &lt;td>
  112. &lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE TOP
  113. BORDER OF THE SECOND background AND THE TOP BORDER OF THE MIDDLE background-->
  114.  
  115. &lt;br>&lt;br>
  116.  
  117. &lt;!-- CENTERS THE NESTED table INSIDE THE MAIN table -->
  118.  
  119. &lt;div align="center">
  120. &lt;!-- START OF CENTER NESTED table WITH THE WIDTH SET TO 85% TO GIVE THE EFFECT OF THE THIRD BORDER-->
  121.  
  122. &lt;table border="2" cellpadding="20" width="85%" background="ImageURL#3" summary="">
  123. &lt;tr>
  124. &lt;td background="ImageURL#4.jpg">
  125.  
  126. &lt;!-- HERE IS WHERE YOU WILL PLACE ALL YOUR TEXT AND IMAGES FOR YOUR PAGE -->
  127.  
  128. &lt;p>Here is where you will place all the text and images for your web page.&lt;/p>
  129.  
  130. &lt;p>Don't forget to change the text, link, active link and visited link colors to suit your page.&lt;/p>
  131.  
  132. &lt;p>Play around with the table widths, cellpadding, cellspacing and border attributes like color and size. By
  133. experimenting with these settings you can customize how your page will look.&lt;/p>
  134.  
  135. &lt;p>You'll notice a lot of comments between &lt;!--these--> characters in the html code. Browsers ignore
  136. any information contained within these characters, so you can put in any comments you like or delete them completely
  137. and it won't affect your page. I've added the comments to help you with using this template.&lt;/p>
  138.  
  139. &lt;p>Please note that the height of the table is determined by the amount of content you have in this area. The
  140. more content you have, the longer the table.&lt;/p>
  141. &lt;/td>
  142. &lt;/tr>
  143. &lt;/table>
  144.  
  145. &lt;!-- END OF CENTER NESTED table -->
  146.  
  147. &lt;/div>
  148.  
  149. &lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE BOTTOM
  150. BORDER OF THE MIDDLE background AND THE BOTTOM BORDER OF THE SECOND background -->
  151.  
  152. &lt;/td>
  153. &lt;/tr>
  154. &lt;/table>
  155.  
  156. &lt;!-- END OF MAIN table -->
  157. &lt;/div>
  158.  
  159. &lt;!-- THE NUMBER OF LINE BREAKS YOU PLACE HERE WILL DETERMINE THE SPACING BETWEEN THE BOTTOM
  160. BORDER OF THE SECOND background AND THE BOTTOM OF THE FIRST background -->
  161.  
  162. &lt;/body>&lt;/html>
  163. </pre>
  164. </div>
  165. </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!