WEBSITE TITLE HERE


HEADER Link Here Link Here Link Here Link Here Link Here HEADER Link Here Link Here Link Here Link Here Link Here HEADER Link Here Link Here Link Here Link Here Link Here HEADER Link Here Link Here Link Here Link Here Link Here	Layout Template #3 - How to Use Well, it should be pretty self-explanatory. The numerous comments I left in the code won't show up on the layout but they will guide you when you are editing the code. All the colors are pretty plain and there are no images, but those are for you to edit. Applying Background Images Fill out the background-image: url('') areas in the code. There should be a different background code for all the areas of the layout. If you don't want an image bg, you can always change the bg color by editing background: #HexColorCodeHere;. Changing the Layout Width The default width is set to 800px, which fits into all computer resolutions. But nowadays, since higher resolutions are more popular, you are always free to make it bigger. Just replace everywhere that says 800px to whatever size you want. You may also want to adjust the widths of the menus to accompany it. Where Credits are Concerned I honestly don't care much if you move the credits, but I'd like them to be on your site. By that I don't mean stuffing it on a random page with 6 point font that no one will ever see. ^^' Please let it stay in the disclaimer or menu or credits page if you must and make sure that it links to Eonlight Valley, please. Other than that, good luck with the layout! The full layout code is below, just copy/paste it into a new document. <html> <head> <title>WEBSITE TITLE HERE</title> <style> /* Start CSS / / This changes your link colors / A:link { text-decoration: none; color: #003399; } A:visited { text-decoration: none; color: #003399; } A:active { text-decoration: none; color: #003399; } A:hover { text-decoration: none; color: #6666FF; } / This changes the basic properties of your layout / body { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 10px; background-color: #FFFFFF; background-image: url(' '); text-align: justify; margin-bottom: 5px; margin-right: 0px; margin-top: 5px; } / This code centers the layout / #container { margin:0px auto 0px auto; width:100%; text-align:center; } / Leave this be / #container2 { width: 800px; text-align: left; margin: 0px auto; position: relative; min-height: 300px; } / This code controls the properties of your left menu / #leftmenu { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 10px; background-color: #E8E8E8; background-image: url(' '); text-align: left; border: 0px solid #000000; width:130px; padding:10px; } / This code controls the properties of your right menu / #rightmenu { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 10px; background-color: #E8E8E8; background-image: url(' '); text-align: right; border: 0px solid #000000; width:130px; padding:10px; } / This code is not mandatory, but sets a background for the menu headers / #menuheader { font-family: verdana; helvetica; sans serif; color: #333333; font size: 10px; background-color: #CCCCCC; background-image: url(' '); text-align: center; margin-top: 5px; padding:3px; } / This code controls the properties of your content / #content { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 10px; background-color: #FFFFFF; background-image: url(' '); border: 0px solid #000000; padding:10px; } / This code controls the properties of your disclaimer / #disclaimer { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 10px; background: #CCCCCC; background-image: url(' '); border: 0px solid #000000; text-align:center; width:800px; height:90px; padding:10px; } / This code controls the properties of your banner / #banner { background: #CCCCCC; background-image: url(' '); border: 0px solid #000000; text-align:center; width:800px; height:200px; } / This sets the properties for content headers / h1 { font-family: verdana; sans serif; font-size: 15px; font-weight: bold; font-variant: small-caps; align:center; } / End CSS */ </style> </head> <body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10"> <div id="container"> <div id="container2"> <table cellspacing="0" cellpadding="0" border="0"> <tr><td valign="top" id="banner" colspan="3"></td></tr> <tr> <td valign="top" id="leftmenu"> <!-- Start Left Menu --> <div id="menuheader">HEADER</div> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a> <div id="menuheader">HEADER</div> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a> <div id="menuheader">HEADER</div> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a> <div id="menuheader">HEADER</div> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a> <!-- End Left Menu--> </td> <td valign="top" id="content"> <div align="justify"> <!-- Start Content --> <h1>Layout Template #3 - How to Use</h1> Well, it should be pretty self-explanatory. The numerous comments I left in the code won't show up on the layout but they will guide you when you are editing the code. All the colors are pretty plain and there are no images, but those are for you to edit. <p><strong>Applying Background Images</strong></p> Fill out the <font color="purple">background-image: url('')</font> areas in the code. There should be a different background code for all the areas of the layout. If you don't want an image bg, you can always change the bg color by editing <font color="purple">background: #HexColorCodeHere;</font>. <p><strong>Changing the Layout Width</strong></p> The default width is set to 800px, which fits into all computer resolutions. But nowadays, since higher resolutions are more popular, you are always free to make it bigger. Just replace everywhere that says 800px to whatever size you want. You may also want to adjust the widths of the menus to accompany it. <p><strong>Where Credits are Concerned</strong></p> I honestly don't care much if you move the credits, but I'd like them to be on your site. By that I don't mean stuffing it on a random page with 6 point font that no one will ever see. ^^' Please let it stay in the disclaimer or menu or credits page if you must and make sure that it <i>links</i> to Eonlight Valley, please. <p> Other than that, good luck with the layout! <!-- End Content --> </div> </td> <td valign="top" id="rightmenu"> <!-- Start Right Menu --> <div id="menuheader">HEADER</div> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a> <div id="menuheader">HEADER</div> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a><br /> <a href="#">Link Here</a> <!-- End Right Menu --> </td> </tr> <tr> <td valign="top" id="disclaimer" colspan="3"> <!-- Start Disclaimer --> This site is (c) [insert your name]... etc. etc. <p> Layout Template by <a href="http://www.eonlightvalley.com">Eonlight Valley</a>. <!-- End Disclaimer --> </td> </tr> </table> </div> </div> </body> </html>	HEADER Link Here Link Here Link Here Link Here Link Here HEADER Link Here Link Here Link Here Link Here Link Here
This site is (c) [insert your name]... etc. etc. Layout Template by Eonlight Valley.

Layout Template #3 - How to Use