PAGE TITLE

CONTENT HEADER

CONTENT TEXT

Please Read

To make the width of the layout parts wider/thinner, edit the CSS file. The 'container' is what the whole layout is in. Some numbers have to add up make the layout work, so be carful. Anything in the CSS file that looks like this '#000000' or '#738393', or basically a '#' with 6 letters/numbers following, are colors. Changing them will change a color on the layout.

The Code

This is the HTML code:

<html> <head> <title>PAGE TITLE</title> <link rel="stylesheet" type="text/css" href="DIVlayout2.css"> </head> <body> <div id="banner"></div> <div id='container'> <div id='content'><div class='padding'> <div class='title'>CONTENT HEADER</div> <p> CONTENT TEXT <p> </div></div> <div id='disclaimer'><div class='padding'> <div class='title'>DISCLAIMER</div> <p> DISCLAIMER TEXT </div></div> <div id='leftmenu' > <div class='title'>LEFTMENU HEADER</div> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <div class='title'>LEFTMENU HEADER</div> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <div class='title'>LEFTMENU HEADER</div> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <div class='title'>LEFTMENU HEADER</div> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a><br> <a href=''>» LINK</a> </div> <div id='rightmenu' > <div class='title'>RIGHTMENU HEADER</div> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <div class='title'>RIGHTMENU HEADER</div> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <div class='title'>RIGHTMENU HEADER</div> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <a href=''>LINK «</a><br> <a href=''>LINK «</a> <div class='title'>Layout Template By</div> <div class='center'><a href='http://zakshq.com/'><img src='http://zakshq.com/images/affiliationbuttons/affiliationgarchomp2.png'></a></div> </div> </div> </body> </html>

This is the CSS code:

body { background-color:#FFFFFF; font-family:sans-serif; font-size:10px; color:#000000; } a:link, a:visited,a:active { text-decoration: none; color: #333333; } a:hover { text-decoration: none; color: #666666; } img { border:0px; } #container { position:relative; margin:auto; width:750; } #banner { position:relative; margin:auto; width:460px; height:200px; background-image:url(YOUR IMAGE URL); border:1px solid #000000; } #content { position:relative; left:145px; right:145px; width:460; top:5px; text-align:justify; background-color:#FFFFFF; border:1px solid #000000; } #disclaimer { position:relative; left:145px; right:145px; width:460; top:10px; text-align:justify; background-color:#FFFFFF; border:1px solid #000000; } #leftmenu { position:absolute; left:0px; width:140px; top:-202px; text-align:left; background-color:#FFFFFF; border:1px solid #000000; } #rightmenu { position:absolute; right:0px; width:140px; top:-202px; text-align:right; background-color:#FFFFFF; border:1px solid #000000; } .title { text-align:center; font-weight:bold; width:100%; background-color:#CCCCCC; } .center { text-align:center; }

NOTICE: Save these 2 text files in the same directory, or you will have to add a path in the HTML. Also, if you don't save the CSS file as 'DIVlayout2.css', you must change the name of the CSS file that the HTML gets. So, near the beginning of the HTML file, it says this: <link rel="stylesheet" type="text/css" href="DIVlayout2.css">

Simply change 'DIVlayout2.css' to whatever you named your CSS file.