Left Navigation

Link
Link
Link
Link

Header Name

Link
Link
Link
Link

Header Name

Link
Link
Link
Link

CONTENT STARTS HERE

This is a 3-column layout template, the kind you see most often around Pokemon Fansites. This template features a banner area, a content area, left and right sidebars, and a Disclaimer area. Since this is only a template, you are free to make as many changes as you want. Also, the banner border wouldn't show up for some reason, so I coloured it a grey-ish tone so you can see it better. I've also left helpful comments inside the coding. Only you will be able to see them, and they won't appear on the layout that your visitors see. They are only there to help you. If you don't need them, you can remove them. ^_^

Crediting me?
All I ask, is that you leave the credits to Kasumi there on the sidebar. Actually, you could move it to a Thanks/Credits page or the Disclaimer if you'd like, but make sure the link points to http://kasumi.netii.net please! You could use a text link, or a button link. You may find Kasumi's link buttons by clicking here.

Download this layout?
If you'd like to download this layout, you may do so, by using this code below:

Right click in the middle of that box below, and then choose Select All. Then right click again, and click copy. Then just paste it in an empty Freewebs HTML mode document or Notepad.

<html> <head>  <title>Your site name here</title>  <style> /* You can edit the hex color codes of what your links are going to look like in your layout in this section. */ /* Put your hex color code right behind the # sign. You can find color codes here: http://html-color-codes.info/ */ A:link, A:visited, A:active { text-decoration: none; color: #000000; } /* This little bit below controls what color your links are when your mouse hovers over them */ A:hover { text-decoration: none; color: #D8D8D8; } /* Stop editing the hex color codes here */ /* This section below changes what the basic body of your website looks like, if you need help in this, please don't hesitate to contact wishjiirachii@gmail.com */ body { font-family: arial; Verdana; sans serif; helvetica; color: #000000; font-size: 9px; background-color: #FFFFFF; background-image: url(' '); text-align: justify; margin-bottom: 5px; margin-right: 0px; margin-top: 5px; } /* Leave this section below as it is */ #centerlayout { margin-left: -400px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; width: 779px; left: 50%; top: 0%; position: absolute; } /* Now... this section below changes different parts of the left column of this layout */ #leftmenu { font-family: arial; Verdana; sans serif; helvetica; color: #000000; font-size: 10px; background-color: #FFFFFF; background-image: url(' '); text-align: center; border: 1px solid #000000; width:120px; } /* This section below changes different parts of the right column of this layout. */ #rightmenu { font-family: arial; Verdana; sans serif; helvetica; color: #000000; font-size: 10px; background-color: #FFFFFF; background-image: url(' '); text-align: center; border: 1px solid #000000; width:120px; } /*This section below changes different parts of your content. (The part in the middle of your layout */ #content { font-family: arial; Verdana; sans serif; helvetica; color: #000000; letter-spacing: 1px; font-size: 11px; background-color: #FFFFFF; border: 0px solid #000000; width: 529px; } /* This section below changes different parts of the banner on your layout */ #banner { width:800px; height:200px; background-color: #D8D8D8; /* You can place a direct link to a banner image below in-between the (' and ') brackets */ background-image: url(''); text-align:center; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } /* This section below will change what your headers are going to look like. The headers are the heading at the top of every page's content area. */ h1 { font-family: Helvetica; Verdana; Arial; sans-serif; font-size: 12px; color: #000000; letter-spacing: 1px; font-weight: bold; text-align: center; background-color: #FFFFFF; border: 1px solid #000000; } /* This section here changes different parts of the disclaimer */ #disclaimer { font-family: arial; Verdana; arial; sans-serif; font-size: 11px; color: #000000; letter-spacing: 1px; font-weight: none; background-color: #ffffff; background-image: url(''); border: 1px solid #000000; } /* CSS style stuff ends here! :) */ </style> </head> <body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10"> <div id="centerlayout"> <table cellspacing="0" cellpadding="5" border="0"> <td valign="top" align="center" id="banner" colspan="3"> </td> <tr> <td valign="top" id="leftmenu">  <h1>Left Navigation</h1> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <h1>Header Name</h1> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <h1>Header Name</h1> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br>  </center> </td> <td valign="top" id="content"> <div align="justify">  <h1>CONTENT STARTS HERE</h1>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tellus eget turpis malesuada mollis. Morbi commodo placerat feugiat. In elit metus, ultricies vitae interdum a, congue a dolor. Morbi tincidunt semper velit, nec accumsan elit accumsan vitae. Donec eu neque nec orci auctor varius. Morbi scelerisque, libero ut ultrices lobortis, lorem eros porttitor nulla, at congue mauris augue id nisi. Ut sit amet augue in lectus porta consectetur. Cras faucibus, purus vel rutrum convallis, ligula ante viverra ipsum, facilisis pellentesque ipsum purus sit amet magna. Proin malesuada elementum leo vitae varius. Nam rhoncus dolor vel massa semper eget adipiscing nulla lobortis. Curabitur gravida enim vitae arcu accumsan et aliquam nisl consectetur. Cras dapibus elit sit amet lectus malesuada pulvinar. Phasellus luctus, metus at viverra ornare, mauris leo posuere orci, a accumsan massa lorem eu odio. Sed a elementum urna. Nam quis odio sed metus tristique porttitor. Proin ornare hendrerit aliquet. Cras sed nibh nibh. Phasellus rutrum accumsan felis, eleifend convallis massa molestie at. Suspendisse nisl ante, laoreet et laoreet in, pretium ac sapien. Morbi aliquam tortor vel ante vestibulum vulputate. Quisque viverra odio et nunc convallis imperdiet. Sed venenatis tempor enim ut pellentesque. Maecenas dolor mauris, commodo id malesuada eu, scelerisque in dolor. Vivamus ut justo elit, a rutrum eros. Donec sed dignissim magna. Nam iaculis sapien id ligula vehicula sit amet congue arcu ultrices. Quisque sagittis pretium enim, eu tempor felis laoreet vel. Curabitur libero erat, volutpat quis faucibus in, mollis ut risus. Morbi lobortis urna sed ante dapibus auctor id vitae erat. Aliquam nibh orci, malesuada id pretium nec, sollicitudin vitae lorem. Mauris quis nisi quis diam mollis tincidunt a eget purus. Ut vehicula, tellus eu fermentum tempus, mauris turpis tristique purus, sit amet egestas velit nunc sed ante. Proin eget lectus magna, sit amet interdum arcu. Maecenas odio libero, adipiscing eu tincidunt at, elementum at neque. Sed hendrerit ullamcorper erat vitae congue. In sodales orci a leo consequat commodo vestibulum risus iaculis. Phasellus nec nisi augue. Fusce ut massa eget nisl pellentesque accumsan. Donec nec aliquet purus. Sed pharetra iaculis viverra. Duis at leo nulla. Duis porttitor sapien in nisi gravida vel pellentesque velit vulputate. Aliquam eu velit non velit cursus dictum sit amet at turpis. Maecenas vitae mi sapien.  </div> </center> <div id="disclaimer"> <h1>[Your site name here]'s Disclaimer</h1>  [your site name here] is copyrighted to [your name/nickname here] Nothing at this site should be stolen or redistributed without the owner's permission. Put whatever else you want to be in your disclaimer here!<p>  </div> </p> </td> <td valign="top" id="rightmenu">  <h1>Affiliates</h1> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br>   <h1>Header Name</h1> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br> <a href="#">Link</a><br>   <h1>Credits</h1> <a href="http://kasumi.netii.net" target="_blank">{Layout Template}</a><br>  </table> </body> </html>

Extra Stuff for this layout
Hex Color Codes for editing your layout template

Placing a banner image
To place a banner you've made as the image at the top of the screen, there are some instructions in the CSS. (the part of the layout inside the < style> and < /style> tags). You'll need a direct link for your banner though. ^_^ A good place for hosting images and getting direct links for them is Tinypic.

[Your site name here]'s Disclaimer

[your site name here] is copyrighted to [your name/nickname here] Nothing at this site should be stolen or redistributed without the owner's permission. Put whatever else you want to be in your disclaimer here!

Affiliates

Link
Link
Link
Link

Header Name

Link
Link
Link
Link

Credits

{Layout Template}