WEBSITE TITLE HERE

Banner 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	Introduction This is a simple table layout with 3 columns, the type most sites have. Because it's a very basic template with no preset images or color, edit the CSS to match your aesthetic preferences. How to Use The notes in the HTML coding will not affect the appearance of your layout but are there to guide you. The notes are typed within these tags: <!-- --> and /* /. They simply mark the location of certain codes. Feel free to delete them if they're useless to you. If you want to edit link colors, find in the code where it says / This changes your link colors / and edit the code below it. You can find a hex color code table here. If you want to change the width of the layout from 800 pixels to something else, just change wherever it says 800px to your preferred width. You might also want to change the widths of the menus to apply. Banner Image & Backgrounds To insert a banner image, go to the #banner tag in the CSS and where it says "background-image: url(' ');", put the URL/address of your banner image. Also, remember to change the preset dimensions for the #banner in the CSS. If you want to add backgrounds to the menus, content, or disclaimer, fill in the background image URLs for them. Crediting Please keep the link to Eonlight Valley in the disclaimer, on the menu, or on a credits page. Since you'll likely be making heavy edits to the layout, just credit Eonlight Valley for the template. ^^ The Coding Copy and paste the code below onto your HTML editor. It contains the entire layout code. You may edit from there. <html> <head> <title>WEBSITE TITLE HERE</title> <style> / CSS STARTS HERE / / 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: 9px; background-color: #FFFFFF; background-image: url(' '); text-align: justify; margin-bottom: 5px; margin-right: 0px; margin-top: 5px; } / This code centers your layout / #centerlayout { margin-left: -370px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; width: 779px; left: 50%; top: 0%; position: absolute; } / This code controls the properties of your left menu / #leftmenu { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url(' '); text-align: left; border: 1px solid #000000; border-bottom: 0px solid #000000; border-top: 0px solid #000000; width:125px; } / This code controls the properties of your right menu / #rightmenu { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url(' '); text-align: right; border: 1px solid #000000; border-bottom: 0px solid #000000; border-top: 0px solid #000000; width:120px; } / This code controls the properties of your content / #content { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url(' '); border: 0px solid #000000; width: 529px; } / This code controls the properties of your disclaimer / #disclaimer { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url(' '); border: 1px solid #000000; text-align:center; width:779px; height:90px; } / This code controls the properties of your banner / #banner { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url(' '); border: 1px solid #000000; text-align:center; } / This sets the properties for content headers / h1 { font-family: verdana; sans serif; font-size: 12px; font-weight: bold; font-variant: small-caps; align:center; } / CSS ENDS HERE / </style> </head> <body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10"> <div id="centerlayout"> <table cellspacing="0" cellpadding="5" border="0"> <tr><td valign="top" align="center" id="banner" colspan="3" width="779" height="170"> <!--Erase This Text and see instructions for more info--> Banner Here <!--End banner--> </td> </tr> <tr> <td valign="top" id="leftmenu"> <!--LEFT MENU starts here--> <center><b>HEADER</b></center><br> <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> <br><br> <center><b>HEADER</b></center><br> <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> <br><br> <center><b>HEADER</b></center><br> <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> <br><br> <center><b>HEADER</b></center><br> <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> <!--LEFT MENU Ends Here--> </td> <td valign="top" id="content"> <div align="justify"> <!--Content Starts Here--> <center><b>.:. CONTENT HEADER HERE .:.</b></center><br><br> Now that you have a basic template, start creating content and adding images and colors! ^_^ Try to keep the banner image no more than 529 pixels maximum. If you have any problem or want to ask a question, feel free to <a href="mailto:kronakitty@gmail.com">e-mail</a> me about it, and I'll try to help. <!--Content Ends Here--> </div> </td> <td valign="top" id="rightmenu"> <!--Right Menu Starts Here--> <center><b>AFFILIATES</b></center><br> <center> <a href="#">Affy 1</a><br> <a href="#">Affy 2</a><br> <a href="#">Affy 3</a> </center> <p> <center><b>HEADER</b></center><br> <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> <!--Right Menu Ends here--> </td></tr> <tr><td valign="top" id="disclaimer" colspan="3"> <!--Disclaimer Starts Here--> This site is (c) [insert your name]...blablabla...edit this according to your will. <br><br> <!--DO NOT REMOVE CREDITS BELOW--> Layout Template by <a href="http://www.eonlightvalley.com">Eonlight Valley</a>. <!--Disclaimer Ends Here--> </td></tr> </table> </body> </html> .:. Assistance .:.* If you have any trouble with this layout, feel free to contact me at kronakitty@gmail.com. ^_^	AFFILIATES Affy 1 Affy 2 Affy 3 HEADER Link Here Link Here Link Here Link Here Link Here
This site is (c) [insert your name]...blablabla...edit this according to your will. Layout Template by Eonlight Valley.