Introduction

This is a simple table layout with 3 columns, the menus spanning the entire layout. This would be a good template for a fairly large website, as the navigations can hold plenty of links and the content area is sizeable. This is not a stretching DIV layout, and its complete width is 800 pixels, which will fit into small screen resolutions like 800x600, but you're of course free to change it. 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, you're have to edit the widths of the content and menus so that they equal what width you desire.

Banner Image & Backgrounds

If you want 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. I suggest you keep the banner no more than 529 pixels in width if you don't want the layout to stretch (that is, if you're using 800px in total for the layout). 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: -380px;
margin-right: 0px; 
margin-top: 0px; 
margin-bottom: 0px; 
width: 800px;
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;
width:125px;
height:300px;
}

/* 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;
width:125px;
height:300px;
}

/* This code controls the properties of your content */
#content
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
width:550px;
height:300px;
font-size: 9px;
background-color: #FFFFFF;
background-image: url(' ');
border: 1px solid #000000;
}

/* 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: 0px solid #000000;
text-align:center;
width:529px;
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: 0px solid #000000;
text-align:center;
width: 529px;
height: 150px;
}

/* 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 cellpadding="4" cellspacing="2">
   <tr>
      <td id="leftmenu" rowspan="2" valign="top">

<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>

</td>
      <td valign="top">
         <table cellspacing="2" cellpadding="0" border="0">
            <tr>
               <td valign="top" align="center" id="banner">

</td>
            </tr>
         </table>
      </td>
      <td rowspan="2" id="rightmenu" valign="top">

</td>
   </tr>
   <tr>
      <td width="529" height="250" valign="top">
         <table cellspacing="2" cellpadding="7" width="529" height="300">
            <tr>
               <td id="content" valign="top">
<div align="justify">

<h1>CONTENT HEADER</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat nulla quis arcu consectetur placerat. Pellentesque interdum interdum dui sit amet volutpat. Mauris porta elit felis. Fusce sollicitudin pulvinar suscipit. Praesent enim mauris, cursus tristique vulputate in, commodo vel metus. In pharetra mauris in odio suscipit nec adipiscing orci tempor. Nunc commodo, ligula vitae accumsan eleifend, risus tortor gravida sapien, at suscipit neque metus non libero. Praesent et lorem odio, eget faucibus nibh. Integer nibh nisl, ultricies sed facilisis a, sagittis sed arcu. Nulla placerat laoreet rutrum. Nullam gravida, dui ac venenatis feugiat, dolor dui ullamcorper libero, eget ultrices libero neque ac velit. Sed dapibus est nec est iaculis semper. Etiam varius ornare tellus a feugiat. Cras a rhoncus tortor. Donec cursus, dui in tempor posuere, ipsum quam sagittis urna, luctus volutpat est enim vitae ante. Duis consequat quam enim, at sagittis nunc. Sed eget enim tortor.
<p>
Fusce arcu sem, rhoncus quis semper quis, ultrices non arcu. Nunc ac erat non velit facilisis condimentum quis id lectus. Maecenas arcu erat, malesuada facilisis rhoncus vel, venenatis ornare arcu. Sed libero ipsum, gravida vel mattis vitae, feugiat vestibulum libero. Ut varius fermentum quam a vulputate. Etiam pulvinar venenatis facilisis. In consectetur, elit sed suscipit bibendum, elit justo volutpat orci, vitae interdum nisi nisi vitae enim. Nunc adipiscing tellus sit amet massa tristique viverra. Nulla lacus felis, pellentesque a elementum sed, tincidunt sit amet ligula. Sed feugiat cursus sem. Duis ultricies luctus turpis in dictum. Quisque in est at nunc ornare pretium ac nec magna. Quisque luctus dignissim pellentesque. Maecenas tristique libero quis metus aliquam semper. Proin egestas, ipsum in facilisis luctus, ligula arcu volutpat nibh, ac laoreet libero velit sed purus. Mauris convallis nisl in sapien vehicula scelerisque. Praesent molestie luctus ipsum, pulvinar feugiat erat rhoncus nec.

</div>
               </td>
            </tr>
         </table>
<table cellspacing="2" cellpadding="5">
   <tr>
      <td valign="top" id="disclaimer">

<br><br>

Layout Template by <a href="http://www.eonlightvalley.com">Eonlight Valley</a>.

</td>
   </tr>
</table>
</body>
</html>